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

下面是Antd-DatePicker组件获取时间值及相关设置方式的完整攻略。

获取时间值

Antd-DatePicker组件可以方便地获取用户选择的日期或时间。你可以使用onChange回调函数来获取所选日期或时间值。

下面是一个例子，当用户选择日期时，会将所选日期值打印出来：

import { DatePicker } from 'antd';

function onChange(date, dateString) {
  console.log(dateString);
}

ReactDOM.render(
  <DatePicker onChange={onChange} />,
  mountNode,
);

在这个例子中，当用户选择日期时，onChange函数被调用，并传入所选日期及其字符串形式。我们使用console.log输出日期字符串值。

相关设置方式

除了获取所选的日期或时间，Antd-DatePicker组件还提供了许多配置选项。下面是几个示例。

设置默认值

你可以使用defaultValue属性设置默认值。默认值格式为日期或时间字符串。

import { DatePicker } from 'antd';

ReactDOM.render(
  <DatePicker defaultValue={'2021-01-01'} />,
  mountNode,
);

在这个例子中，一个日期选择器被呈现，并且默认日期被设置为2021年1月1日。

设置可选择日期范围

你可以使用disabledDate属性设置可选择日期范围。

下面是一个例子，禁止选择2021年1月1日之前的日期：

import { DatePicker } from 'antd';

function disabledDate(current) {
  // Can not select days before today and today
  return current && current < moment('2021-01-01');
}

ReactDOM.render(
  <DatePicker disabledDate={disabledDate} />,
  mountNode,
);

在这个例子中，我们定义了一个名为disabledDate的函数，该函数返回当前日期和2021年1月1日日期之间的日期均为不可选日期。在渲染过程中，disabledDate函数作为disabledDate属性传递给DatePicker组件。

自定义日期格式

你可以使用format属性自定义日期格式。默认格式为YYYY-MM-DD。

下面是一个示例，自定义格式为YYYY/MM/DD:

import { DatePicker } from 'antd';

ReactDOM.render(
  <DatePicker format={'YYYY/MM/DD'} />,
  mountNode,
);

在这个例子中，我们创建一个日期选择器并指定日期格式为YYYY/MM/DD。

这就是Antd-DatePicker组件获取时间值及相关设置方式的完整攻略，希望能对你有所帮助。