Popularity
4.1
Stable
Activity
0.0
Stable
382
9
45
Programming language: JavaScript
License: MIT License
Latest version: v0.1.10
react-google-flight-datepicker alternatives and similar libraries
Based on the "Time / Date / Age" category.
Alternatively, view react-google-flight-datepicker alternatives based on common mentions on social networks and blogs.
-
timeago-react
:clock8: Simple and efficient react component to format date with `*** time ago` statement. eg: '3 hours ago'.
SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
Promo
surveyjs.io
Do you think we are missing an alternative of react-google-flight-datepicker or a related project?
README
react-google-flight-datepicker
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';
<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 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 (START_DATE, END_DATE) 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
- David Tran - [email protected]
- Leo Phan - [email protected]
License
MIT
*Note that all licence references and agreements mentioned in the react-google-flight-datepicker README section above
are relevant to that project's source code only.