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

r-date-picker

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

demo

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

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') }  />

可选项

属性 值类型 例子 说明
minDate moment object moment(‘2019-04-01’) 可以切换的最小日历
maxDate moment object moment(‘2019-04-01’) 可以切换的最大日历
defaultDate moment对象或者moment数组 moment(‘2019-04-01’) 默认选中值,对象是选中单个值,数组是选择范围
ranges array [[]] 二维数组,[[moment(‘2019-03-21’), moment(‘2019-03-25’)], [moment(‘2019-03-10’), moment(‘2019-03-10’)], [moment(‘2019-03-1’), moment(‘2019-03-4’)]]
language string cn cn/en
disabledDates array [‘2019-04-11’, ‘2019-04-22’] 禁止选择的日期数组
onMonthChange function 月改变事件
onDateChange function 日期选择回调
onDateRangeChange function 范围选择回调
itemRender function 自定义渲染项
renderPrevBtn function 渲染上一页按钮
renderNextBtn function 渲染下一页按钮

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

  • 单日历选择日期
  • 单日历选择范围
  • 两个日历选择范围
  • 个性化修改样式
  • 范围限制
  • 国际化支持,只支持英文和中文
  • 新增自定义国际化语言
  • 选择年份
上一篇:.Net语言 APP开发平台——Smobiler学习日志:如何实现快速跳转网页


下一篇:24Math-cnblog