React date picker with Antd style classes

Code Snippets 4 U

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;

Leave a Reply

Your email address will not be published. Required fields are marked *

eight + 1 =