antd DatePicker的使用

作者: 燕自浩 | 来源:发表于2019-06-30 14:42 被阅读0次

1.默认时间

<DatePicker

  defaultValue={moment('20120203')}

  format={dateFormat}

/>

默认当前时间:

const dateFormat = 'YYYY-MM-DD';

<DatePicker

  defaultValue={moment()}

  format={dateFormat}

/>

moment()不带参数表示默认当前日期

注意:

1. 获取时间戳

获取当前时间戳:

moment().valueOf()

获取固定时间的时间戳:

moment(date.format('YYYY-MM-DD')).valueOf()

date为moment格式

2. 获取格式时间

moment().format('YYYY-MM-DD')

DatePicker组件获取的时间都是moment格式的,要转换一般用这两种

时间戳转成moment格式:

moment(时间戳)

2.不可选择的日期

(1)只能选择今天跟今天之后的日期:

  const disabledDate = (current) => {

    return current < moment().startOf('day');

  }

<DatePicker disabledDate={disabledDate}/>

(2)只能选择今天之前的日期(不包括今天):

  const disabledDate = (current) => {

    return current > moment().startOf('day');

  }

<DatePicker disabledDate={disabledDate}/>

3.禁用日期框

<DatePicker disabled/>

4.日期区间范围选择

  <RangePicker defaultValue={[moment('20130607'), moment('20190301')]}/>

5.月份选择

<MonthPicker defaultValue={moment()}/>

6.选择周

<WeekPicker defaultValue={moment()}/>

相关文章

网友评论

    本文标题:antd DatePicker的使用

    本文链接:https://www.haomeiwen.com/subject/mikbcctx.html