Miss any of our Open RFC calls?Watch the recordings here! »

bee-datepicker

2.3.45 • Public • Published

datepicker

npm version Build Status Coverage Status dependencies Status NPM downloads Average time to resolve an issue Percentage of issues still open

react datepicker component for tinper-bee

可定制的日期组件

使用

使用单独的datepicker包

组件引入

先进行下载bee-datepicker包

npm install --save bee-datepicker

组件调用

import DatePicker from 'bee-datepicker';
ReactDOM.render(
        <DatePicker></DatePicker>
        , document.getElementById('target'));

样式引入

  • 可以使用link引入build目录下DatePicker.css
<link rel="stylesheet" href="./node_modules/bee-datepicker/build/DatePicker.css">
  • 可以在js中import样式
import "./node_modules/bee-datepicker/src/DatePicker.scss"
//或是
import "./node_modules/bee-datepicker/build/DatePicker.css"

API

DatePicker

参数 说明 类型 默认值
prefixCls 组件的前缀 String -
className 添加节点的样式 String -
dropdownClassName 添加下拉面板的样式 String -
style 添加内联样式 Object -
dateRender 日期表格 (current, value) => React.Node -
renderSidebar 侧边栏 () => React.Node -
renderFooter 扩展底边栏 () => React.Node -
defaultValue 默认值,输入框的默认值 moment -
value 日期 moment -
locale 日历的语言 Object en_US
format 日期格式化 String -
open 日期组件隐藏、显示 Boolean false
disabled 是否禁用功能 Boolean false
disabledDate 禁用的日期 Function(current:moment):Boolean -
disabledTime 禁用的时间 Function(current:moment):Object -
showDateInput 显示日期输入框 Boolean true
showWeekNumber 是否显示周数 Boolean false
showToday 是否显示今天 Boolean true
showOk 底边栏是否显示ok按钮 Boolean auto
onSelect 选择日期的回调函数 Function(date: moment) -
onChange 日期改变的回调函数 Function(date: moment) -
onOk 点击确定按钮的回调 Function(date: moment) -
dateInputPlaceholder 日期的placeholder String -
showTime 是否显示时间选择面板 Boolean -
renderIcon 更改默认的图标 Function () =>
closeIcon 鼠标划过清空内容的icon Function () =>
getCalendarContainer 更改默认渲染位置 Function -
keyboardInput 外层输入框是否支持键盘输入 Boolean false
iconClick 日期按钮点击的回调 Function -
outInputFocus 外层输入框获得焦点的回调 Function -
outInputKeydown 外层输入框keydown回调 Function -

注:使用keyboardInput时,以下api变化

  • 输入内容的格式需要个format格式相同,也可以有部分变化,变化范围参考 moment.js。例如:format='YYYY-MM-DD' 输入 '19-1-1'也可识别
  • 当输入日期格式无法转换为 moment 对象时,onChange,onClick回调内对应的moment参数值为 null

MonthPicker

参数 说明 类型 默认值
prefixCls 组件的前缀 String -
className 添加节点的样式 String -
style 添加内联样式 Object -
value 当前值,如输入框的值 moment -
defaultValue 默认值,输入框的默认值 moment -
locale 语言 Object en_US
disabledDate 禁用的日期 Function(current:moment):Boolean -
onSelect 选择日期的回调函数 Function(date: moment) -
onChange 日期改变的回调函数 Function(date: moment) -
monthCellRender 月份的渲染方法 function -
dateCellRender 日期的渲染方法 function -
monthCellContentRender 自定义月份的渲染方法,将被添加渲染内容中 function -
getCalendarContainer 更改默认渲染位置 Function -
closeIcon 鼠标划过清空内容的icon Function () =>

RangePicker

参数 说明 类型 默认值
prefixCls 组件的前缀 String -
className 添加节点的样式 String -
style 添加内联样式 Object -
dateRender 日期表格 (current, value) => React.Node -
renderSidebar 侧边栏 () => React.Node -
renderFooter 扩展底边栏 () => React.Node -
value 当前选中的区间 moment[] -
defaultValue 默认选中的区间 moment[] -
locale 日历的语言 Object en_US
format 日期格式化 String -
disabledDate 禁用的日期 Function(current:moment):Boolean -
disabledTime 禁用的时间 Function(current:moment):Object -
showDateInput 显示日期输入康 Boolean true
showWeekNumber 是否显示周数 Boolean false
showToday 是否显示今天 Boolean true
showOk 底边栏是否显示ok按钮 Boolean auto
showClear 是否显示清除按钮 Boolean false
onSelect 选择日期的回调函数 Function(date: moment) -
onChange 日期改变的回调函数 Function(date: moment) -
dateInputPlaceholder 日期的placeholder String -
type 是否固定开始或结束选定的值 enum('both','start', 'end') -
getCalendarContainer 更改默认渲染位置 Function -
closeIcon 鼠标划过清空内容的icon Function () =>

WeekPicker

参数 说明 类型 默认值
placeholder 输入框placeholder String -
defaultValue 默认值 moment -
getCalendarContainer 更改默认渲染位置 Function -
closeIcon 鼠标划过清空内容的icon Function () =>

YearPicker

参数 说明 类型 默认值
placeholder 输入框placeholder String -
defaultValue 默认值 moment 当前年
getCalendarContainer 更改默认渲染位置 Function -
format 日期格式化 String -
disabled 是否禁用功能 Boolean false
closeIcon 鼠标划过清空内容的icon Function () =>

DatePicker 已支持的键盘操作

按键 功能
↓(下箭) 打开面板
esc 关闭面板
delete 清除内容

setup develop environment

$ npm install -g bee-tools
$ git clone https://github.com/tinper-bee/bee-datepicker.git
cd bee-datepicker
$ npm install
$ npm run dev

Install

npm i bee-datepicker

DownloadsWeekly Downloads

883

Version

2.3.45

License

MIT

Unpacked Size

659 kB

Total Files

182

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar