Handle manual edit of date time in DatePicker of antd

Question

I am using DatePicker from antd.

<LocaleProvider locale={enUS}>
    <DatePicker
      format="MM/D/YYYY HH:mm"
      defaultValue={this.getStartValue()}
      showTime={{format: 'HH:mm'}}
      placeholder="Start"
      allowClear={false}
      onOk={this.onStartTimeChange}
    />
</LocaleProvider>
<LocaleProvider locale={enUS}>
    <DatePicker
      format="MM/DD/YYYY HH:mm"
      defaultValue={this.getEndValue()}
      showTime={{format: 'HH:mm'}}
      placeholder="End"
      allowClear={false}
      onOk={this.onEndTimeChange}
    />
</LocaleProvider>

I am showing value from state and onOK am changing state with the new value. Now issue am facing is when user manually edit the time.

Is there a way to

1. Prevent user from changing time manually editing the input field?
2. Or to change state with the edited value?

Is onChange only way to do it as onChnage will change my state multiple time on almost each user click. If onChange is recommended way then can we avoid ok button itself?

Answer 1

After searching online and trying.

We can use onChange and this will handle all things.

<DatePicker
  format='MM/DD/YYYY HH:mm'
  defaultValue={this.getFromValue()}
  showTime={{format: 'HH:mm'}}
  placeholder="Start"
  allowClear={false}
  showToday={false}
  disabledDate={this.disabledFromDate}
  onChange={this.onStartTimeChange}
/>