lm-datepicker

0.2.1 • Public • Published

datepicker

介绍

日期选择


安装

lm-* 组件使用 npm 进行管理,命名空间统一为 lm-,请使用以下命令进行组件安装。

npm i lm-datepicker --save
  • 如果你还没有安装 npm,可通过以下方式进行 安装
  • 安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org

使用

样例文档

  • 待开发

使用

  1. 最少配置参数为:

    • 传入showState显示时间选择器
    <Datepicker showState={true} />
    
    
  2. 时间选择区间为 当前时间往前10天,往后35天

    <Datepicker 
        showState={this.state.show}
        passeddays={21}
        futuredays={35}
        onOk={this.onOk}
        onDismiss={this.onDismiss}/>
    
  3. 时间选择区间为 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}/>
    
  4. 时间选择区间为 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 }
        />
    
  5. 时间选择区间为 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

  1. init

0.2.1

update react to version 16


Package Sidebar

Install

npm i lm-datepicker

Weekly Downloads

1

Version

0.2.1

License

none

Unpacked Size

770 kB

Total Files

13

Last publish

Collaborators

  • maqing01
  • sherry.cao