Antd RangePicker：快速實現日期區間選擇控制項

一、簡介

Antd RangePicker 是 Ant Design 的控制項之一，可以幫助我們快速實現日期區間選擇。它提供了多種可定製的選項和風格，非常適用於需要日期區間選擇的網頁和應用程序。

二、基本使用

使用 Antd RangePicker 非常簡單，只需要引入相關依賴，並設置一些必要的參數即可。下面是一個基本的代碼示例：

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

function onChange(dates, dateStrings) {
  console.log('From: ', dates[0], ', to: ', dates[1]);
  console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
}

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

代碼解析：

1.首先引入了 DatePicker 和 React 兩個庫。

2.然後定義了一個 onChange 函數，當 RangePicker 的值改變時，會觸發該函數。

3.最後使用 ReactDOM.render 將 RangePicker 注入到指定的 DOM 節點上。

註：為了代碼的可讀性，本文後續的代碼示例中，我們將 React 和 ReactDOM 兩個庫的引入部分省略掉。

三、常用參數

Antd RangePicker 提供了很多可定製的參數，下面是其中一些常用的：

1.format：指定展示格式，如 yyyy-MM-dd。

2.showTime：是否顯示時間選擇器，可以設置為一個對象，指定時間選擇器的屬性。

3.defaultValue：指定默認值，可以是一個日期數組，也可以是一個 moment 對象數組。

4.disabledDate：指定禁用日期的函數。

5.onChange：當值改變時觸發的函數。

下面是一個設置了 format 和 showTime 參數的代碼示例：

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

const { RangePicker } = DatePicker;

function onChange(dates, dateStrings) {
  console.log('From: ', dates[0], ', to: ', dates[1]);
  console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
}

ReactDOM.render(
  <RangePicker
    showTime={{ format: 'HH:mm' }}
    format="YYYY-MM-DD HH:mm"
    onChange={onChange}
  />,
  mountNode,
);

四、自定義時間選擇器

我們可以使用 Antd 的 TimePicker 控制項，來自定義 RangePicker 中時間選擇器的格式和樣式。下面是一個自定義了時間選擇器的代碼示例：

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

const { RangePicker } = DatePicker;

function onChange(dates, dateStrings) {
  console.log('From: ', dates[0], ', to: ', dates[1]);
  console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
}

ReactDOM.render(
  <RangePicker
    showTime={{
      format: 'HH:mm',
      defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
      renderExtraFooter: () => (
        <TimePicker
          defaultValue={moment('00:00:00', 'HH:mm:ss')}
          format="HH:mm:ss"
        />
      ),
    }}
    format="YYYY-MM-DD HH:mm"
    onChange={onChange}
  />,
  mountNode,
);

五、自定義日期區間選擇範圍

Antd RangePicker 還允許我們設置自定義的日期區間範圍，可以通過設置 disabledDate 參數來實現。下面是一個設置了自定義日期區間選擇範圍的代碼示例：

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

function onChange(dates, dateStrings) {
  console.log('From: ', dates[0], ', to: ', dates[1]);
  console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
}

function disabledDate(current) {
  // Can not select days before today and today
  return current && current < moment().endOf('day');
}

ReactDOM.render(
  <DatePicker.RangePicker
    disabledDate={disabledDate}
    showTime={{ format: 'HH:mm' }}
    format="YYYY-MM-DD HH:mm"
    onChange={onChange}
  />,
  mountNode,
);

結語

Antd RangePicker 是一個非常實用的日期區間選擇控制項，它提供了多種可定製的選項和風格，能夠滿足各種需求。本文從基本使用、常用參數以及自定義時間選擇器和日期區間選擇範圍等方面介紹了 Antd RangePicker 的使用方法，希望能對讀者有所幫助。