Used react npm package: https://github.com/gpbl/react-day-picker
<Form.Item
label="Birthday"}
colon={false}
required={true}
validateStatus={!this.state.isValidDay ? "error" : ""}
help={
!this.state.isValidDay
? "Need to fill this column"
: ""
}
>
<DayPickerInput
format={dateFormat}
formatDate={formatDate}
parseDate={parseDate}
placeholder={placeholder}
onDayChange={this.handleDayChange}
value={this.state.birthday}
classNames={{
container: "ant-calendar-picker birthday-input-container",
overlayWrapper: "ant-calendar-picker-container",
overlay: ""
}}
inputProps={{
className: "ant-calendar-picker-input ant-input",
onChange: this.dayInputChanged
}}
ref={c => this.datePickerRef = c}
/>
<Icon
onClick={this.showDayPicker}
type="calendar"
className="anticon anticon-calendar ant-calendar-picker-icon"
/>
</Form.Item>
We have disabled the user input in date picker:
handleDayChange = (date: Date, modifiers: any, dayPickerInput: DayPickerInput): void => {
const isValidDay = this.isDateValid(date) && dayPickerInput.getInput().value.trim();
if (isValidDay) {
this.setState({birthday: date, isValidDay});
}
}
isDateValid = (date: any) => {
if (date === "" || typeof date === "undefined" || date === null) {
return false;
}
return true;
}
dayInputChanged = (): void => {
// When user input wrong data using keyboard reset the date of date input
this.datePickerRef.input.value = moment(this.state.birthday).format("YYYY/MM/DD");
}
showDayPicker = (): void => {
this.datePickerRef.input.focus();
}
And ref :
datePickerRef: any;