calendar componment for react


Keywords
react, react-calendar, react-uxcore-calendar, uxcore-calendar
License
MIT
Install
npm install uxcore-calendar@0.10.1

Documentation

uxcore-calendar


NPM version build status Test Coverage Dependency Status devDependency Status NPM downloads

Sauce Test Status

TL;DR

transfer ui component for react

setup develop environment

$ git clone https://github.com/uxcore/uxcore-calendar
$ cd uxcore-calendar
$ npm install
$ npm start

Usage

var Calendar = require('uxcore-calendar');
var MonthCalendar = Calendar.MonthCalendar;
var YearCalendar = Calendar.YearCalendar;
React.render(
  (<Calendar />),
  document.getElementById('target')
);

demo

http://uxco.re/components/calendar/

API

  • onSelect(date, formatDateString)
    • date date
    • formatDateString string

Attention

0.8.0 之后,我们使用 moment 替代了 gregorianCalendar,在一些格式上和用法上有了一些变化。

共通 Props

参数 说明 类型 默认值 版本
placeholder 占位符 string 请选择日期
locale en-us,zh-cnpl-pl string zh-cn
disabledDate 不可选择的日期 (currentDate) => boolean
onSelect 当日期被选中时触发 function(date)
disabled 禁用 boolean false
getPopupContainer 弹出的菜单渲染在哪个容器中 function(trigger:Node):Node () => document.body
size 尺寸,支持 large/middle/small string large 0.9.8
allowClear 是否支持清空 boolean true 0.9.12
onOpenChange 在下拉面板展开、收起时调用 function(open) noop 0.9.14

props

参数 说明 类型 默认值 版本
value 日期 string/number
defaultValue 日期 string/number
format 展示的日期格式 string 'YYYY-MM-DD'
disabledTime 不可选择的时间,返回格式见下文 function(date)
showTime 是否显示时间选择面板 boolean false
showHour 时间选择面板是否显示小时 boolean true 0.6.3
showSecond 时间选择面板是否显示秒 boolean true 0.6.3
timePicker 自己传入定制的 timePicker React Element -
yearSelectOffset 年选择器中第一个年份与当前选中值之间的距离,例如当前为 1997 年,距离为 50,则最早可选择年份为 1947 年 number 50 0.9.7
yearSelectTotal 年选择器中年份的总数,如最早可选为 1947 年,总数为 100,则可选年份范围为 1947 - 2047 number 100 0.9.7

disabledTime 例子

function range(start, end) {
  const result = [];
  for (let i = start; i < end; i++) {
    result.push(i);
  }
  return result;
}

function disabledTime() {
  return {
    disabledHours: () => range(0, 24).splice(4, 20),
    disabledMinutes: () => range(30, 60),
    disabledSeconds: () => [55, 56],
  };
}

MonthCalendar Props

参数 说明 类型 默认值 版本
value 日期 string/number
defaultValue 日期 string/number
format 展示的日期格式 string 'yyyy-MM'

YearCalendar Props

参数 说明 类型 默认值 版本
value 日期 string/number
defaultValue 日期 string/number
format 展示的日期格式 string 'yyyy'

RangeCalendar Props

参数基本与 Calendar 相同

参数 说明 类型 默认值 版本
value 日期 array
defaultValue 日期 array

util

一些辅助函数,用于某些套餐化定制

  • Calendar.util.generateContentRender(code, locale): 用于在日历上标注非常规的休假、上班以及日程。
    • code should be an object like this {'xxxx-xx-xx': ['work/leave/schedule']}
    • locale should be zh-cn or en-us