Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/JSLancerTeam/react-google-flight-datepicker
React date picker inspired by Google Flight
https://github.com/JSLancerTeam/react-google-flight-datepicker
Last synced: about 1 month ago
JSON representation
React date picker inspired by Google Flight
- Host: GitHub
- URL: https://github.com/JSLancerTeam/react-google-flight-datepicker
- Owner: davidtran
- License: mit
- Created: 2020-02-21T04:18:41.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-27T17:29:24.000Z (almost 2 years ago)
- Last Synced: 2024-10-30T11:02:37.701Z (about 1 month ago)
- Language: JavaScript
- Size: 1.46 MB
- Stars: 386
- Watchers: 9
- Forks: 48
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - react-google-flight-datepicker
- fucking-awesome-react-components - react-google-flight-datepicker - Google flight date picker implemented in ReactJS. (UI Components / Time / Date / Age)
- awesome-react-components - react-google-flight-datepicker - Google flight date picker implemented in ReactJS. (UI Components / Time / Date / Age)
- awesome-react - react-google-flight-datepicker - React date picker inspired by Google Flight.  (UI Components / Form Components)
- awesome-react-components - react-google-flight-datepicker - Google flight date picker implemented in ReactJS. (UI Components / Time / Date / Age)
README
# react-google-flight-datepicker
[![dependency status][deps-svg]][deps-url]
[![dev dependency status][dev-deps-svg]][dev-deps-url]
[](https://opensource.org/licenses/MIT)
[![Downloads][downloads-image]][downloads-url]
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
####Desktop
----
####Mobile
### Usage
##### RangeDatePicker
```jsx
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
```jsx
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 (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
tooltip | String, React Component, Function | Display 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
- David Tran - [email protected]
### License
MIT
[package-url]: https://npmjs.org/package/react-google-flight-datepicker
[npm-version-svg]: http://versionbadg.es/jslancerteam/react-google-flight-datepicker.svg
[deps-svg]: https://david-dm.org/jslancerteam/react-google-flight-datepicker.svg
[deps-url]: https://david-dm.org/jslancerteam/react-google-flight-datepicker
[dev-deps-svg]: https://david-dm.org/jslancerteam/react-google-flight-datepicker/dev-status.svg
[dev-deps-url]: https://david-dm.org/jslancerteam/react-google-flight-datepicker#info=devDependencies
[downloads-image]: http://img.shields.io/npm/dm/react-google-flight-datepicker.svg
[downloads-url]: http://npm-stat.com/charts.html?package=react-google-flight-datepicker