Need help with react-google-flight-datepicker?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

JSLancerTeam
270 Stars 27 Forks MIT License 119 Commits 3 Opened issues

Description

React date picker inspired by Google Flight

Services available

!
?

Need anything else?

Contributors list

react-google-flight-datepicker

dependency status dev dependency status License: MIT Downloads

Google flight date picker implemented in ReactJS

Demo

  • Live demo: https://codesandbox.io/s/react-google-flight-datepicker-zultp
  • To run demo on your computer:
    • Clone this repository
    • yarn install
    • yarn run dev

Screenshot


Usage

RangeDatePicker
import { RangeDatePicker } from 'react-google-flight-datepicker`;
import 'react-google-flight-datepicker/dist/main.css';

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';

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 name |Prop type|Default value|Description| |---------|---------|-------------|-----------| startDate | Date | null | Selected start date | endDate | Date | null | Selected end date | dateFormat | String | D | Display format for date. Check momentjs doc for information (https://momentjs.com/docs/#/displaying/) | monthFormat | String | MMM YYYY | Display format for month. Check momentjs doc for information (https://momentjs.com/docs/#/displaying/) | onChange | Function | null | Event handler that is called when startDate and endDate are changed | onFocus | Function | null | Return a string (STARTDATE, ENDDATE) which indicate which text input is focused | minDate | Date | 1900 Jan 01 | Minimum date that user can select | maxDate | Date | 2100 Jan 01 | Maximum date that user can select | className | String | | Custom CSS className for datepicker | disabled | String | false | Disable the datepicker | startDatePlaceholder | String | Start Date | Placeholder text for startDate text input | endDatePlaceholder | String | End Date | Placeholder text for endDate text input | startWeekDay | String (monday or sunday) | monday | Determine the start day for a week (monday or sunday) | highlightToday | Bool | false | Hightlight "today" date singleCalendar | Bool | false | Only applicable on SingleDatePicker. When this prop is actived, the datepicker will display 1 calendar instead of 2 calendar in the the container

Author

License

MIT

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.