Home

Awesome

react-google-flight-datepicker

dependency status dev dependency status License: MIT Downloads

Google flight date picker implemented in ReactJS

Demo

Screenshot

####Desktop <video src="https://user-images.githubusercontent.com/1154740/199437644-560147f6-82db-4736-8ff9-fb6747a460a9.mov" width="500" autoplay></video>

####Mobile <video autoplay src="https://user-images.githubusercontent.com/1154740/199439704-c8cdb7db-8a6b-4f66-a3e0-f4b1f1fde10d.MOV" width="500"></video>

Usage

RangeDatePicker
import { RangeDatePicker } 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
import { SingleDatePicker } from 'react-google-flight-datepicker';
import 'react-google-flight-datepicker/dist/main.css';

<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 nameProp typeDefault valueDescription
startDateDatenullSelected start date
endDateDatenullSelected end date
dateFormatStringDDisplay format for date. Check momentjs doc for information (<a target="_blank" href="https://momentjs.com/docs/#/displaying/" class="jsx-1329640032" data-reactroot="">https://momentjs.com/docs/#/displaying/</a>)
monthFormatStringMMM YYYYDisplay format for month. Check momentjs doc for information (<a target="_blank" href="https://momentjs.com/docs/#/displaying/" class="jsx-1329640032" data-reactroot="">https://momentjs.com/docs/#/displaying/</a>)
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)
highlightTodayBoolfalseHightlight "today" date
singleCalendarBoolfalseOnly applicable on SingleDatePicker. When this prop is actived, the datepicker will display 1 calendar instead of 2 calendar in the the container
tooltipString, React Component, FunctionDisplay the tooltip when hovering on day element, you can pass string, component, or a function. The function will receive a Date object, so you can generate the content of tooltip.

Author

License

MIT