react自定义DatePicker字符串传值

转载已于 2022-05-04 11:18:15 修改 · 1k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://github.com/ant-design/ant-design/issues/22185

收录于

前端

当前文章被收录于：

前端

1 篇文章 0 人学习

前端技术栈

订阅专栏查看详情

当前文章被以下社区和专栏收录：

于 2022-05-04 11:17:10 首次发布

这篇博客介绍了如何在React应用中自定义Ant Design的DatePicker组件，包括设置初始值、格式化日期字符串，并提供了onChange事件处理函数的实现。示例代码展示了如何使用moment库来处理日期时间。

出处： https://github.com/ant-design/ant-design/issues/22185
自定义DatePicker

<CustomDatePicker 
	value="2022-04-15 00:00:00"
	format="yyyy-MM-DD HH:mm:ss"/>

赋值可用moment格式字符串
写好format格式，取值自动格式化为此格式字符串

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

const CustomDatePicker = props => {
  const {value, onChange, ...other} = props;
  const time = value ? moment(value) : null;
  const triggerChange = (_, dateStr) => {
    onChange && onChange(dateStr);
  };

  return (
    <DatePicker
      defaultValue={time}
      onChange={triggerChange}
      {...other}
    />
  )
};

export default CustomDatePicker;