React-h5-calendar-xi NPM

说明（请移步 https://www.npmjs.com/package/react-h5-calendar-x ）

工作中碰到一个需求：h5的日历选择（react技术线），支持多选，支持快捷选择近7日、30日、工作日，支持周视图，支持手指滑动。拿来主义者我在网上搜到一个最接近的——https://github.com/TangSY/react-hash-calendar，其功能有

支持手势滑动操作
上下滑动切换周/月模式
【周模式中】左右滑动可切换上一周/下一周【月模式中】左右滑动可切换上一月/下一月

最主要的问题是不支持多选。那只好站在人家的肩膀上，做一些改造/扩展的工作：

支持多选
支持选择近n天且符合自定义规则的日期
支持点击操作来快速左右切换月份/周

其他改动有：1）defaultDatetime可以为null，代表初始化选择的日期是无。 2）日期多选模式打开，则自动隐藏timePicker-时间选择。3）actionSlot支持函数。 4）支持顶部点击快速左右切换月份/周。

安装使用说明

npm i react-h5-calendar-x

import { ReactH5Calendar } from 'react-h5-calendar-x'

function App () {
  return (
    <div className="App">
      <ReactH5Calendar model="inline" />
    </div>
  );
}

export default App;

Demo及Api

简原版见 https://github.com/TangSY/react-hash-calendar/tree/master#readme

本库新增加|改动（相比较于原作）有：

属性	说明	类型	默认
monthTitleActionSlot	truely会显示日历组件顶部控件（左右点击可切换月/周），Array则显示自定义的类dom\|文案；	boolean\| undefined \| Array<React.ReactNode\|string>	-
multiple	是否多选	boolean	-
defaultDatetime	指定默认时间。	Date\|undefined\|null	now
dateClickCallback	日历被点击时调用，参数为 { date }。（返回的日期格式取决于 format 属性）	(date: Date｜string, isSelected: boolean) => void	-
checkedDateOnChange	多选模式下，选中的日期发生变化时的回调，参数为所选中的日期数组—— 数组元素格式取决于 format 属性）	(dateArr: Array<Date \| string>) => void	-