Class DateInput

packages/datetime/src/dateInput.tsx:167–489

@polyfill
export class DateInput extends AbstractPureComponent2<IDateInputProps, IDateInputState> {
    public static displayName = `${DISPLAYNAME_PREFIX}.DateInput`;

    public static defaultProps: Partial<IDateInputProps> = {
        closeOnSelection: true,
        dayPickerProps: {},
        disabled: false,
        invalidDateMessage: "Invalid date",
        maxDate: getDefaultMaxDate(),
        minDate: getDefaultMinDate(),
        outOfRangeMessage: "Out of range",
        reverseMonthAndYearMenus: false,
    };

    public state: IDateInputState = {
        isInputFocused: false,
        isOpen: false,
        value: this.props.value !== undefined ? this.props.value : this.props.defaultValue,
        valueString: null,
    };

    private inputEl: HTMLInputElement | IRefObject<HTMLInputElement> | null = null;
    private popoverContentEl: HTMLElement | null = null;
    private lastElementInPopover: HTMLElement | null = null;

    private refHandlers = {
        input: isRefObject<HTMLInputElement>(this.props.inputProps?.inputRef)
            ? (this.inputEl = this.props.inputProps.inputRef)
            : (ref: HTMLInputElement | null) => {
                  this.inputEl = ref;
                  (this.props.inputProps?.inputRef as IRefCallback<HTMLInputElement>)?.(ref);
              },
    };

    public componentWillUnmount() {
        super.componentWillUnmount();
        this.unregisterPopoverBlurHandler();
    }

    public render() {
        const { value, valueString } = this.state;
        const dateString = this.state.isInputFocused ? valueString : getFormattedDateString(value, this.props);
        const dateValue = isDateValid(value) ? value : null;
        const dayPickerProps = {
            ...this.props.dayPickerProps,
            // dom elements for the updated month is not available when
            // onMonthChange is called. setTimeout is necessary to wait
            // for the updated month to be rendered
            onMonthChange: (month: Date) => {
                Utils.safeInvoke(this.props.dayPickerProps.onMonthChange, month);
                this.setTimeout(this.registerPopoverBlurHandler);
            },
        };

        const wrappedPopoverContent = (
            <div ref={ref => (this.popoverContentEl = ref)}>
                <DatePicker
                    {...this.props}