使用自定义格式对 Antd DatePicker 进行响应以进行输入和显示 [英] React Antd DatePicker with custom format for input and for display

问题描述

我目前使用 antd 的 DatePicker 组件来显示日期，但无法自定义输入格式和显示格式.

I am currently using DatePicker Component of antd for displaying date but not able to customize the input format and display format.

例如:用户将日期输入为 mmddyy (112119) 格式，datePicker 应将日期显示为 2019-11-21.

Eg: user would type the date as mmddyy (112119) format, datePicker should display date as 2019-11-21.

请找到我通过将值设置为 datePicker 尝试过的沙箱链接，但它被格式属性覆盖了

Please find the sandbox link which I have tried by setting the value to datePicker but its getting overridden by format attribute

https://codesandbox.io/s/wonderful-star-75qjq

推荐答案

检查 onOpenChange 事件并更改 format 道具可以做到这一点.

Inspect the onOpenChange event and change the format prop can do this.

class DateInput extends React.Component {
  state = { isOpen: false };
  render() {
    return (
      <DatePicker
        onChange={onChange}
        format={this.state.isOpen ? "MMDDYYYY" : "YYYY-MM-DD"}
        onOpenChange={status => {
          this.setState({ isOpen: status });
        }}
      />
    );
  }
}

此处为 Codesandbox 演示

这篇关于使用自定义格式对 Antd DatePicker 进行响应以进行输入和显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！