DateRange for DatePicker

I have two datepicker inputs and I want that user selects a date range.

this is the expected behavior: 1- user clicks on the first datepicker input and selects the first day. now the start day must have class -selectedStart

2- user clicks on second datepicker input to select end day. this time datepicker have to keep the first value from first datepicker as ‘from’ and set new value as ‘to’.

the question is how can I do this for two different datepicker (e.g. keeping selectedStart for second datepicker) and set selected value for each input? a similar implementation is on alibaba hotel datepicker

[Kiarash-Z]

@thebrodmann thank you for taking care of this issue, highly appreciate that 😊

[spostad7]

thanks, @thebrodmann! this is final try on selecting a range from datepicker. at last, I format the input date and show the user only the ‘to’ value. for ‘from’ datepicker I used single date selection and for ‘to’ datepicker I used date range including an object that has ‘from’ and ‘to’ value.

export class SearchHotel extends PureComponent {
	constructor(props) {
		super(props);
		this.state = {
			dateRange: {
				from: null,
				to: null
			},
			fromDate: null,
			toDate: null
		};
	}

	

	onFromDateChange = date => {
		this.setState(prevState => ({
			fromDate: date,
			dateRange: {
				...prevState.dateRange,
				from: date
			}
		}));
	};

	onToDateChange = date => {
		if (!this.state.fromDate) {
			alertify
				.delay(4000)
				.closeLogOnClick(true)
				.error('لطفا ابتدا تاریخ ورود را انتخاب کنید');
			return false;
		}
		this.setState({
			fromDate: date.from,
			dateRange: date
		});
	};

	formatDateInput = () => {
		if (!this.state.dateRange.to) return '';
		const toDate = this.state.dateRange.to
		const year = toDate.year.toString();
		const month = toDate.month.toString().padStart(2, 0);
		const day = toDate.day.toString().padStart(2, 0);
		return `${year}/${month}/${day}`;
	};

	render() {
		const props = this.props;
		return (
			<form className={this.props.className} onSubmit={this.handleSearch}>
				
				<div
					className={this.props.className + '__fieldset mb-20 mt-20'}>
					<Label className={this.props.className + '__label'}>
						تاریخ ورود
					</Label>
					<DatePicker
						className={props.className}
						minimumDate={utils('fa').getToday()}
						value={this.state.fromDate}
						onChange={this.onFromDateChange}
						renderFooter={() => (
							<div
								style={{
									display: 'flex',
									justifyContent: 'center',
									alignItems: 'center'
								}}>
								<button
									type="button"
									onClick={() =>
										console.log(
											'today',
											this.state.persianToday
										)
									}
									className="btn DatePicker__footer-btn">
									امروز
								</button>
							</div>
						)}
					/>
				</div>
				<div className={this.props.className + '__fieldset mb-20'}>
					<Label className={this.props.className + '__label'}>
						تاریخ خروج
					</Label>
					<DatePicker
						className={props.className}
						minimumDate={utils('fa').getToday()}
						value={this.state.dateRange}
						onChange={this.onToDateChange}
						formatInputText={this.formatDateInput}
						renderFooter={() => (
							<div
								style={{
									display: 'flex',
									justifyContent: 'center',
									alignItems: 'center'
								}}>
								<button
									type="button"
									onClick={() =>
										console.log(
											'today',
											this.state.persianToday
										)
									}
									className="btn DatePicker__footer-btn">
									امروز
								</button>
							</div>
						)}
					/>
				</div>
			</form>
		);
	}
}