react-google-flight-datepicker
google flight date-picker implemented in ReactJS
Start date
End date
Start date
End date

Date
Date

Preview

Desktop
Mobile

Installation

npm install react-google-flight-datepicker

Usage

import { RangeDatePicker, SingleDatePicker } from 'react-google-flight-datepicker';
import 'react-google-flight-datepicker/dist/main.css';
<RangeDatePicker
startDate={new Date()}
endDate={new Date()}
onChange={({startDate, endDate}) => onDateChange(startDate, endDate)}
minDate={new Date(1900, 0, 1)}
maxDate={new Date(2100, 0, 1)}
dateFormat="D"
monthFormat="MMM YYYY"
startDatePlaceholder="Start Date"
endDatePlaceholder="End Date"
disabled={false}
className="my-own-class-name"
startWeekDay="monday"
/>
<SingleDatePicker
startDate={new Date()}
onChange={({startDate}) => onDateChange(startDate)}
minDate={new Date(1900, 0, 1)}
maxDate={new Date(2100, 0, 1)}
dateFormat="D"
monthFormat="MMM YYYY"
startDatePlaceholder="Date"
disabled={false}
className="my-own-class-name"
startWeekDay="monday"
/>

Props


Prop nameTypeDefault valueDescription
startDateDatenullSelected start date
endDateDatenullSelected end date
dateFormatStringDDisplay format for date. Check momentjs doc for information (https://momentjs.com/docs/#/displaying/)
monthFormatStringMMM YYYYDisplay format for month. Check momentjs doc for information (https://momentjs.com/docs/#/displaying/)
onChangeFunctionnullEvent handler that is called when startDate and endDate are changed
onFocusFunctionnullReturn a string (START_DATE, END_DATE) which indicate which text input is focused
minDateDate1900 Jan 01Minimum date that user can select
maxDateDate2100 Jan 01Maximum date that user can select
classNameStringCustom CSS className for datepicker
disabledStringfalseDisable the datepicker
startDatePlaceholderStringStart DatePlaceholder text for startDate text input
endDatePlaceholderStringEnd DatePlaceholder text for endDate text input
startWeekDayString (monday or sunday)mondayDetermine the start day for a week (monday or sunday)

Author


David Tranhttps://github.com/davidtrandavid@jslancer.com
Leo Phanhttps://github.com/nhuthuy212507