{"id":27056198,"url":"https://github.com/JSLancerTeam/react-google-flight-datepicker","last_synced_at":"2025-04-05T10:01:35.363Z","repository":{"id":37585418,"uuid":"242052684","full_name":"Telsho/react-google-flight-datepicker","owner":"Telsho","description":"React date picker inspired by Google Flight","archived":false,"fork":false,"pushed_at":"2025-01-28T11:19:57.000Z","size":1019,"stargazers_count":391,"open_issues_count":6,"forks_count":49,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-04T17:03:14.266Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Telsho.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-02-21T04:18:41.000Z","updated_at":"2025-03-25T09:05:39.000Z","dependencies_parsed_at":"2024-12-20T13:18:12.956Z","dependency_job_id":"c7994e4e-67e7-4edb-a744-1ef29caf3f53","html_url":"https://github.com/Telsho/react-google-flight-datepicker","commit_stats":null,"previous_names":["jslancerteam/react-google-flight-datepicker","telsho/react-google-flight-datepicker"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Telsho%2Freact-google-flight-datepicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Telsho%2Freact-google-flight-datepicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Telsho%2Freact-google-flight-datepicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Telsho%2Freact-google-flight-datepicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Telsho","download_url":"https://codeload.github.com/Telsho/react-google-flight-datepicker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247318742,"owners_count":20919484,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-04-05T10:01:15.735Z","updated_at":"2025-04-05T10:01:35.335Z","avatar_url":"https://github.com/Telsho.png","language":"TypeScript","funding_links":[],"categories":["UI Components","JavaScript"],"sub_categories":["Form Components","Time / Date / Age"],"readme":"# react-google-flight-datepicker\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![Downloads][downloads-image]][downloads-url]\n\nGoogle flight date picker implemented in ReactJS\n\n### Demo\n- Live demo: https://codesandbox.io/s/react-google-flight-datepicker-zultp\n- To run demo on your computer:\n  - Clone this repository\n  - `yarn install`\n  - `yarn run dev`\n\n### Screenshot\n\n\n#### Desktop\n\u003cvideo src=\"https://user-images.githubusercontent.com/1154740/199437644-560147f6-82db-4736-8ff9-fb6747a460a9.mov\" width=\"500\" autoplay\u003e\u003c/video\u003e\n----\n#### Mobile\n\u003cvideo autoplay src=\"https://user-images.githubusercontent.com/1154740/199439704-c8cdb7db-8a6b-4f66-a3e0-f4b1f1fde10d.MOV\" width=\"500\"\u003e\u003c/video\u003e\n\n### Usage\n\n##### RangeDatePicker\n```jsx\nimport { RangeDatePicker } from 'react-google-flight-datepicker';\nimport 'react-google-flight-datepicker/dist/main.css';\n\n\u003cRangeDatePicker\n  startDate={new Date()}\n  endDate={new Date()}\n  onChange={(startDate, endDate) =\u003e onDateChange(startDate, endDate)}\n  minDate={new Date(1900, 0, 1)}\n  maxDate={new Date(2100, 0, 1)}\n  dateFormat=\"D\"\n  monthFormat=\"MMM YYYY\"\n  startDatePlaceholder=\"Start Date\"\n  endDatePlaceholder=\"End Date\"\n  disabled={false}\n  className=\"my-own-class-name\"\n  startWeekDay=\"monday\"\n/\u003e\n```\n\n##### SingleDatePicker\n```jsx\nimport { SingleDatePicker } from 'react-google-flight-datepicker';\nimport 'react-google-flight-datepicker/dist/main.css';\n\n\u003cSingleDatePicker\n  startDate={new Date()}\n  onChange={(startDate) =\u003e onDateChange(startDate)}\n  minDate={new Date(1900, 0, 1)}\n  maxDate={new Date(2100, 0, 1)}\n  dateFormat=\"D\"\n  monthFormat=\"MMM YYYY\"\n  startDatePlaceholder=\"Date\"\n  disabled={false}\n  className=\"my-own-class-name\"\n  startWeekDay=\"monday\"\n/\u003e\n```\n##### Props\n|Prop name |Prop type|Default value|Description|\n|---------|---------|-------------|-----------|\nstartDate | Date | null | Selected start date |\nendDate | Date | null | Selected end date |\ndateFormat | String | D | Display format for date. Check momentjs doc for information (\u003ca target=\"_blank\" href=\"https://momentjs.com/docs/#/displaying/\" class=\"jsx-1329640032\" data-reactroot=\"\"\u003ehttps://momentjs.com/docs/#/displaying/\u003c/a\u003e) |\nmonthFormat | String | MMM YYYY | Display format for month. Check momentjs doc for information (\u003ca target=\"_blank\" href=\"https://momentjs.com/docs/#/displaying/\" class=\"jsx-1329640032\" data-reactroot=\"\"\u003ehttps://momentjs.com/docs/#/displaying/\u003c/a\u003e) |\nonChange | Function | null | Event handler that is called when startDate and endDate are changed |\nonFocus | Function | null | Return a string (START_DATE, END_DATE) which indicate which text input is focused |\nminDate | Date | 1900 Jan 01 | Minimum date that user can select |\nmaxDate | Date | 2100 Jan 01 | Maximum date that user can select |\nclassName | String |  | Custom CSS className for datepicker |\ndisabled | String | false | Disable the datepicker |\nstartDatePlaceholder | String | Start Date | Placeholder text for startDate text input |\nendDatePlaceholder | String | End Date | Placeholder text for endDate text input |\nstartWeekDay | String (monday or sunday) | monday | Determine the start day for a week (monday or sunday) |\nhighlightToday | Bool | false | Hightlight \"today\" date\nsingleCalendar | 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\ntooltip | 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.\nsubTextDict | Dict | null | Each key of the dict is a date in format YYYY-MM-DD, and the value is the text you want to display. You can see an example in dev/index.js. The text shouldn't be too big\nexpandDirection | String | \"right\" | if \"right\" the calendar will expand from the top left to the right if \"left\" it will expand from the top right to the left\nlocale | string | \"fr\", \"it\" .. | You can specify the locale, it should follow the locale formats from dayjs.\n\n### Author\n- David Tran - david@jslancer.com\n- Elias Thouant \n\n### License\nMIT\n\n[package-url]: https://npmjs.org/package/react-google-flight-datepicker\n[npm-version-svg]: http://versionbadg.es/jslancerteam/react-google-flight-datepicker.svg\n[deps-svg]: https://david-dm.org/jslancerteam/react-google-flight-datepicker.svg\n[deps-url]: https://david-dm.org/jslancerteam/react-google-flight-datepicker\n[dev-deps-svg]: https://david-dm.org/jslancerteam/react-google-flight-datepicker/dev-status.svg\n[dev-deps-url]: https://david-dm.org/jslancerteam/react-google-flight-datepicker#info=devDependencies\n[downloads-image]: http://img.shields.io/npm/dm/react-google-flight-datepicker.svg\n[downloads-url]: http://npm-stat.com/charts.html?package=react-google-flight-datepicker\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJSLancerTeam%2Freact-google-flight-datepicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FJSLancerTeam%2Freact-google-flight-datepicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJSLancerTeam%2Freact-google-flight-datepicker/lists"}