ant组件 日期时间组件如何使用

Ant Design是一个流行的前端UI框架，它的日期时间选择组件(`antd DatePicker`)非常易于使用。以下是基本步骤：

1. 引入依赖：首先，在HTML文件或JavaScript中引入`antd`库以及`DatePicker`组件所需的CSS样式。

<link rel="stylesheet" href="https://unpkg.com/antd@4/dist/antd.min.css">

import React from 'react';
import { DatePicker } from 'antd';

2. 创建组件：在React函数组件或Class组件中，添加`DatePicker`组件，并指定属性如初始值、日期格式等。

// 简单的日期选择器示例
function App() {
  const [value, setValue] = useState(new Date()); // 或者设置默认日期

  function onChange(date) {
    setValue(date);
  }

  return (
    <div>
      <DatePicker
        value={value}
        placeholder="请选择日期"
        format="yyyy-MM-dd"
        onChange={onChange} // 当日期改变时触发回调函数
      />
    </div>
  );
}

export default App;

3. 可选特性：`DatePicker`组件还支持许多其他选项，例如设置日期范围、禁用某些日期等。详细属性可以参考官方文档：[DatePicker API](https://ant.design/components/date-picker/)。