datepicker
- 作者:caoxuewei
- 邮箱:caoxuewei@58ganji.com
- 版本:
0.2.1
介绍
日期选择
安装
lm-*
组件使用 npm
进行管理,命名空间统一为 lm-
,请使用以下命令进行组件安装。
npm i lm-datepicker --save
- 如果你还没有安装
npm
,可通过以下方式进行 安装。 - 安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
使用
样例文档
- 待开发
使用
-
最少配置参数为:
- 传入
showState
显示时间选择器
<Datepicker showState={true} />
- 传入
-
时间选择区间为 当前时间往前10天,往后35天
<Datepicker showState={this.state.show} passeddays={21} futuredays={35} onOk={this.onOk} onDismiss={this.onDismiss}/>
-
时间选择区间为 2016-10-11 ~ 2019-11-16,type为date
<Datepicker showState={this.state.show} startTime="2016-10-11" endTime="2019-11-16" onOk={this.onOk} date="date" onDismiss={this.onDismiss}/>
-
时间选择区间为 2016-02-14 11:49 ~ 2019-11-01 10:39
<Datepicker showState={ this.state.show } startTime="2016-02-14 11:49" endTime="2019-11-01 10:39" selected={{ year: 2019, month: 11, day: 1, hour: 10, minute: 49 }} onOk={ this.onOk } onDismiss = { this.onDismiss } />
-
时间选择区间为 11:49 ~ 10:39
<Datepicker showState={ this.state.show } startTime="11:49" endTime="10:39" selected={{ hour: 10, minute: 49 }} onOk={ this.onOk } type="time" onDismiss = { this.onDismiss } />
配置参数
Prop | Type | Default | Description |
---|---|---|---|
showState |
bool |
false |
控制时间选择器的显示隐藏 |
passeddays |
number |
30 |
单位天,开始时间为,当前时间 - passedDuration |
futuredays |
number |
30 |
单位天,结束时间为,当前时间 + futureDuration |
startTime |
string |
undefined |
开始时间 '2012-10-30 11:30:00' ,优先级高于passedDuration |
endTime |
number |
undefined |
结束时间 '2018-10-30 12:30:00' ,优先级高于futureDuration |
selected |
object |
{year: 当前年份, month: 当前月份, day: 当前日期, hour: 当前时间, minute: 当前分钟} |
默认选中的年份、月份、日期、小时、分钟 |
type |
'datetime' 或 'date' 或 'time' |
datetime |
选择类型 datetime日期时间选择,date日期选择,time时间选择 |
opacity |
number |
0.5 |
mask透明度,0 ~ 1 |
onOk |
func |
args => args |
确定按钮回调函数 |
onDismiss |
func |
args => args |
取消按钮回调函数 |
注意事项
- 组件注意事项
开发调试
进入项目目录后,使用 node
命令启动服务
npm run start
打包发布可通过 node
命令执行
npm run build
npm publish
相关资料
Changelog
0.1.0
- init
0.2.1
update react to version 16