基于react日期选择组件(单选,多选范围,自定义渲染)

r-date-picker

基于react的日历选择组件,支持单选,多选

demo

AirbnbStyle

Introduce

  • 支持单选和范围选择
  • 可以定制渲染项
  • 日历切换动画
  • 支持一个或者两个日历选择操作
  • 支持国际化
  • 不是table渲染,灵活配置样式,通过class覆盖即可

How to use

install

npm i r-date-picker

use module

import { DatePicker } from 'r-date-picker'
import { DateRangePicker } from 'r-date-picker'

import index.scss

import 'r-date-picker/src/styles/index.scss'

DatePicker

<DatePicker defaultDate={ moment('2019-04-01') }  />

可选项

属性值类型例子说明
minDatemoment objectmoment(‘2019-04-01’)可以切换的最小日历
maxDatemoment objectmoment(‘2019-04-01’)可以切换的最大日历
defaultDatemoment对象或者moment数组moment(‘2019-04-01’)默认选中值,对象是选中单个值,数组是选择范围
rangesarray[[]]二维数组,[[moment(‘2019-03-21’), moment(‘2019-03-25’)], [moment(‘2019-03-10’), moment(‘2019-03-10’)], [moment(‘2019-03-1’), moment(‘2019-03-4’)]]
languagestringcncn/en
disabledDatesarray[‘2019-04-11’, ‘2019-04-22’]禁止选择的日期数组
onMonthChangefunction月改变事件
onDateChangefunction日期选择回调
onDateRangeChangefunction范围选择回调
itemRenderfunction自定义渲染项
renderPrevBtnfunction渲染上一页按钮
renderNextBtnfunction渲染下一页按钮

itemRender属性

自定义渲染项,可以绘制头像,绘制任意除了数字以外的其他信息,值是一个函数

<DatePicker itemRender={ 
  (item) => { 
    const markDays = {
      20190329: {
        avator: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4208386305,57701306&fm=27&gp=0.jpg'
      },
      20190327: {
        avator: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2060761043,284284863&fm=27&gp=0.jpg'
      }
    }
    let mark, target
    if (item.date && (target = markDays[item.date.format('YYYYMMDD')])) {
      mark = (<div style={{ 
        backgroundImage: `url(${ target.avator })`, 
        borderRadius: '50%',
        backgroundSize: 'contain',
        width: 40,
        height: 40
      }}></div>)
    } else {
      mark = (<div data-label={ item.key }>{ item.num }</div>)
    }
    return mark
  } 
}/>

DateRangePicker

<DatePicker 
  onDateRangeChange={ this.rangeChange } 
  range={ true }
  defaultDate={ this.state.defaultDate } 
/>

Custom styles class

类名说明
rdp__container容器
range__container范围选择容器
rdp__prev-btn左按钮
rdp__next-btn右按钮
rdp-days__row日历行
rdp__days-item日历day项
rdp__days-item-active–single选中
rdp__days-item-active选中激活
rdp__days-item-active–start选中开始
rdp__days-item-active–start选中连接
rdp__days-item-active–end选中结束
rdp__days-item-active–range-start范围开始
rdp__days-item-active–range-connect范围连接
rdp__days-item-active–range-end范围结束

Development

npm i
npm run start

Avaiable

  • 单日历选择日期
  • 单日历选择范围
  • 两个日历选择范围
  • 个性化修改样式
  • 范围限制
  • 国际化支持,只支持英文和中文
  • 新增自定义国际化语言
  • 选择年份
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页