DatePicker：antd日期选择器的花样操作

2023-05-20 03:14:24

Ant Design DatePicker：回显和更改日期的全面指南

介绍

日期选择器在网页开发中随处可见，可满足从订单管理到人事系统的各种需求。Ant Design（antd）作为一个功能齐全的 UI 组件库，提供了一系列日期选择器组件，满足各种复杂场景的需要。本文将深入探究如何使用 antd 的 DatePicker 组件实现日期的回显和更改。

基本使用

要使用 DatePicker 组件，首先需要安装 antd 和 moment 库。在代码中，可以使用 useState 管理选定的日期，并在 onChange 函数中更新日期并将其传递给组件。

import { DatePicker } from 'antd';
import moment from 'moment';

const App = () => {
  const [value, setValue] = useState(moment());

  const onChange = (date, dateString) => {
    setValue(date);
  };

  return (
    <DatePicker value={value} onChange={onChange} />
  );
};

回显日期

若要回显现有数据，可设置 defaultValue 属性。

import { DatePicker } from 'antd';
import moment from 'moment';

const App = () => {
  const [value, setValue] = useState(moment());

  const onChange = (date, dateString) => {
    setValue(date);
  };

  return (
    <DatePicker value={value} onChange={onChange} defaultValue={moment('2023-03-08')} />
  );
};

禁用日期

在某些情况下，需要禁用特定日期。可通过设置 disabledDate 属性实现。

import { DatePicker } from 'antd';
import moment from 'moment';

const App = () => {
  const [value, setValue] = useState(moment());

  const disabledDate = (current) => {
    return current && current.day() === 6 || current.day() === 0;
  };

  const onChange = (date, dateString) => {
    setValue(date);
  };

  return (
    <DatePicker value={value} onChange={onChange} disabledDate={disabledDate} />
  );
};

范围选择

若要选择日期范围，可将 mode 属性设置为 'range'。

import { DatePicker } from 'antd';
import moment from 'moment';

const App = () => {
  const [value, setValue] = useState([moment(), moment()]);

  const onChange = (dates, dateStrings) => {
    setValue(dates);
  };

  return (
    <DatePicker mode="range" value={value} onChange={onChange} />
  );
};

时间选择

若要选择日期和时间，可设置 showTime 属性为 true。

import { DatePicker } from 'antd';
import moment from 'moment';

const App = () => {
  const [value, setValue] = useState(moment());

  const onChange = (date, dateString) => {
    setValue(date);
  };

  return (
    <DatePicker showTime value={value} onChange={onChange} />
  );
};

自定义格式

若要以特定格式显示日期，可设置 format 属性。

import { DatePicker } from 'antd';
import moment from 'moment';

const App = () => {
  const [value, setValue] = useState(moment());

  const onChange = (date, dateString) => {
    setValue(date);
  };

  return (
    <DatePicker format="YYYY-MM-DD" value={value} onChange={onChange} />
  );
};

特殊样式

若要添加特殊样式，可设置 className 属性。

import { DatePicker } from 'antd';
import moment from 'moment';

const App = () => {
  const [value, setValue] = useState(moment());

  const onChange = (date, dateString) => {
    setValue(date);
  };

  return (
    <DatePicker className="custom-date-picker" value={value} onChange={onChange} />
  );
};