antd-datepicker组件获取时间值,及相关设置方式

antd-datepicker是Ant Design中提供的日期选择器组件，可用于选择日期和时间值。获取时间值的方式有以下几种：

1. 使用onChange事件：在DatePicker组件上绑定onChange事件，当用户选择了日期或时间时，会触发该事件并将选择的时间值作为参数传递给回调函数。可以通过e.target.value来获取选择的时间值。

<DatePicker onChange={handleDateChange} />

const handleDateChange = (value) => {
  console.log(value);
  // 可以对选择的时间值进行相关处理
}

2. 使用moment.js库：Ant Design的DatePicker组件默认返回的是Moment.js对象，可以使用该库提供的方法来获取和处理时间值。

import moment from 'moment';

<DatePicker onChange={handleDateChange} />

const handleDateChange = (value) => {
  const selectedValue = moment(value).format('YYYY-MM-DD');
  console.log(selectedValue);
  // 可以对选择的时间值进行相关处理
}

相关设置方式包括：

1. 默认时间值：可以通过设置defaultValue属性来指定DatePicker组件的默认时间值。

<DatePicker defaultValue={moment('2022-01-01', 'YYYY-MM-DD')} />

2. 可选时间范围：可以通过设置disabledDate属性来限制可选的时间范围。该属性接收一个函数，根据函数的返回值来控制禁用的日期。

<DatePicker disabledDate={disabledDate} />

const disabledDate = (current) => {
  // 返回true表示禁用该日期
  return current && current < moment().endOf('day');
}

3. 时间格式：可以通过设置format属性来指定DatePicker组件的时间格式。

<DatePicker format="YYYY-MM-DD HH:mm:ss" />

以上就是antd-datepicker组件获取时间值及相关设置方式的介绍。