如何使用Antd DatePicker，優化日期選擇體驗

一、Antd DatePicker介紹

Ant Design 是螞蟻金服 AntV 團隊推出的一款基於 React 的前端 UI 庫，因其美觀易用而備受前端開發者的喜愛。Antd 中提供了 DatePicker 組件用來提供方便且易用的日期選擇功能。

二、Antd DatePicker的基本使用

Antd 提供了非常簡潔的 DatePicker 組件，我們僅需引入所需的樣式文件和 JS 文件，並在需要添加日期選擇器的頁面中添加如下代碼：

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

  function App() {
    const [date, setDate] = useState(null);

    function handleDateChange(value) {
        setDate(value);
    }

    return (
      
    );
  }

  export default App;

上面的代碼中，我們首先引入了 Antd 的 DatePicker 組件，在組件的 onChange 事件中，更新了 useState 中 date 的值，最後將值綁定到組件中，這樣就能實現一個完整的 DatePicker。

三、Antd DatePicker的定製化

1. 禁用過去的日期

在某些場景下，我們可能需要禁用日期選擇器中過去的日期以保證數據的合理性。我們可以使用 DatePicker 組件提供的 disabledDate 屬性中傳入一個 function，用於自定義日期的禁用規則。

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

  function App() {
    const [date, setDate] = useState(null);

    function handleDateChange(value) {
        setDate(value);
    }

    function disabledDate(currentDate) {
      // 禁用過去的日期
      return currentDate && currentDate < moment().startOf('day');
    }

    return (
      
    );
  }

  export default App;

上面的代碼中，我們在 disabledDate 函數中定義了日期的禁用規則，禁用過去的日期。然後將這個函數綁定到 DatePicker 的 disabledDate 屬性中，即可實現禁用過去日期的功能。

2. 自定義日期格式

Antd 組件支持自定義日期格式，在我們需要將日期以不同的格式顯示時可以使用 format 屬性。我們可以在自定義函數中定義想要的日期格式，並將其傳入到 format 屬性中即可。

  import React, { useState } from 'react';
  import { DatePicker } from 'antd';
  import moment from 'moment';

  function App() {
    const [date, setDate] = useState(null);

    function handleDateChange(value) {
        setDate(value);
    }

    function disabledDate(currentDate) {
      return currentDate && currentDate < moment().startOf('day');
    }

    function formatDate(date) {
      return moment(date).format('YYYY-MM-DD');
    }

    return (
      
    );
  }

  export default App;

如上所示，我們定義了 formatDate 函數，用於定義想要的日期格式。然後將這個函數綁定到 DatePicker 的 format 屬性中即可實現自定義日期格式的功能。

3. 限制可選日期範圍

除了禁用過去的日期，有時我們可能需要限制可選日期的範圍，以保證其業務邏輯的正確性。Antd 的 DatePicker 提供了一個 rangePickerProps 屬性，通過其傳入 Rules 數組，即可限定可選範圍。

  import React, { useState } from 'react';
  import { DatePicker } from 'antd';
  import moment from 'moment';

  function App() {
    const [rangeDate, setRangeDate] = useState([]);
    const disabledDate = current => current < moment().endOf('day');

    return (
      
    );
  }

  export default App;

如上所示，我們定義了 rangeDate 狀態來保存選擇的日期範圍，並傳入 rangePickerProps 屬性，該屬性中包含了 disabledDate 和 rules，其中 rules 數組中的類型為 object，且為必填項。如果用戶未選擇日期範圍，則會顯示 errorTip 中定義的錯誤信息。