Antd RangePicker：快速实现日期区间选择控件

小蓝 • 2024-11-26 21:06 • 编程

一、简介

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 的使用方法，希望能对读者有所帮助。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/185675.html