react-google-flight-datepicker

by JSLancerTeam

React date picker inspired by Google Flight

251 Stars 20 Forks Last release: 3 months ago (0.1.10) MIT License 106 Commits 4 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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

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.