Calendar Component based on React
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
src
style
tests
.eslintrc.json
.gitignore
.gitmodules
.npmignore
.travis.yml
HISTORY.md
README.md
index.html
package.json
webpack.custom.js

README.md

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