react+antd系列之日期选择框DatePicker

最新推荐文章于 2025-06-07 13:27:08 发布

菜鸟搬砖记

最新推荐文章于 2025-06-07 13:27:08 发布

阅读量2.6w

点赞数 5

CC 4.0 BY-SA版权

分类专栏： React+Antd系列文章标签： react antd js

本文链接：https://blog.youkuaiyun.com/hope93/article/details/85236194

5 篇文章

订阅专栏

本文详细介绍了Ant Design中DatePicker组件的使用方法，包括默认时间设置、不可选择日期的限制、禁用日期框、日期区间选择及月份和周的选择。同时，提供了moment.js的使用技巧，如时间戳获取和格式化时间。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 <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(时间戳)

（1）只能选择今天跟今天之后的日期：

  const disabledDate = (current) => {
    return current < moment().startOf('day');
  }
 <DatePicker disabledDate={disabledDate}/>

（2）只能选择今天之前的日期（不包括今天）：

  const disabledDate = (current) => {
    return current > moment().startOf('day');
  }
 <DatePicker disabledDate={disabledDate}/>

<DatePicker disabled/>

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

 <MonthPicker defaultValue={moment()}/>

 <WeekPicker defaultValue={moment()}/>