CODEWITHSUNDEEP
javascriptreactjsdatepickerantd
Rinsen S
Rinsen S

Reputation: 481

React Antd DatePicker with custom format for input and for display

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

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

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

Upvotes: 2

Views: 17808

Answers (1)

Aobo Cheng
Aobo Cheng

Reputation: 4528

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 demo here

Upvotes: 1

Related Questions