{"id":19565078,"url":"https://github.com/s3rious/react-date-picker","last_synced_at":"2026-06-09T22:31:14.024Z","repository":{"id":39421669,"uuid":"203181796","full_name":"s3rious/react-date-picker","owner":"s3rious","description":"Manual fork of old zippyui's react-date-picker update to work with newer react","archived":false,"fork":false,"pushed_at":"2022-12-11T02:32:11.000Z","size":1503,"stargazers_count":0,"open_issues_count":14,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-11-19T22:04:37.802Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/s3rious.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-08-19T13:47:31.000Z","updated_at":"2019-08-21T13:31:36.000Z","dependencies_parsed_at":"2023-01-26T14:01:43.281Z","dependency_job_id":null,"html_url":"https://github.com/s3rious/react-date-picker","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/s3rious/react-date-picker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s3rious%2Freact-date-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s3rious%2Freact-date-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s3rious%2Freact-date-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s3rious%2Freact-date-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/s3rious","download_url":"https://codeload.github.com/s3rious/react-date-picker/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s3rious%2Freact-date-picker/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34129072,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-09T02:00:06.510Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":"2024-11-11T05:24:57.554Z","updated_at":"2026-06-09T22:31:13.992Z","avatar_url":"https://github.com/s3rious.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"react-date-picker\n=================\n\n[![Join the chat at https://gitter.im/zippyui/react-date-picker](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/zippyui/react-date-picker?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n[![Circle CI](https://circleci.com/gh/zippyui/react-date-picker/tree/master.svg?style=svg)](https://circleci.com/gh/zippyui/react-date-picker/tree/master)\n\n\u003cimg src=\"http://npm.packagequality.com/badge/react-date-picker.png\"/\u003e\n\n\u003e A date picker built especially for React, with love.\n\n[![Date picker](./react-date-picker.png)](http://zippyui.github.io/react-date-picker)\n[![hackerone theme](./react-date-picker-theme-hackerone.png)](http://zippyui.github.io/react-date-picker)\n\nClick for [LIVE DEMO!](http://zippyui.github.io/react-date-picker)\n\n## Install\n\n```sh\n$ npm install react-date-picker\n```\n\n## Usage\n\nRequire the css\n```jsx\n\nrequire('react-date-picker/index.css');\n\nvar DatePicker = require('react-date-picker');\n\n```\n\n```jsx\n\nvar date = '2014-10-10' //or Date.now()\n\nfunction onChange(dateString, moment){\n    //...\n}\n\n\u003cDatePicker\n    minDate='2014-04-04'\n    maxDate='2015-10-10'\n    date={date}\n    onChange={onChange}\n/\u003e\n```\n\n## Theming\n\nTheming is done by requiring a specific css file.\n\nBy default, `react-date-picker/index.css` contains both structural styles and the default theme.\n\nIf you want to load a specific theme, make sure you load\n```jsx\nrequire('react-date-picker/base.css')\n```\nfirst (which contains only structural css rules), and then any css theme file. For now, there are two themes available:\n \n * `react-date-picker/theme/default.css`\n * `react-date-picker/theme/hackerone.css`\n\n### hackerone theme\n \n![hackerone theme](./react-date-picker-theme-hackerone.png)\n\n```jsx\nrequire('react-date-picker/base.css');\nrequire('react-date-picker/theme/hackerone.css');\nvar DatePicker = require('react-date-picker');\n\n\u003cDatePicker\n    minDate='2014-04-04'\n    maxDate='2015-10-10'\n    date={date}\n    onChange={onChange}\n/\u003e\n```\n\n## Changelog\n\nSee [changelog](./CHANGELOG.md)\n\n## Usage\n\n### NOTES:\n\nDon't forget to include index.css or index.styl! ( require('react-date-picker/index.css') )\n\nIf you use the files from the `dist` directory, (eg: `dist/react-date-picker.js`), you will need to make sure you have both `React` and `moment` global variables, so make sure you include [ReactJS](https://www.npmjs.com/package/react) and [MomentJS](https://www.npmjs.com/package/moment)\n\nThe preferred **React** version for `react-date-picker` is  \u003e=0.12. The initial version of `react-date-picker` worked with React 0.11.2 as well, but I do not intend to continue to support it, in order to be able to focus on advancing the current features and developing other high-quality React components.\n\n## I18n and localization\n\nFor rendering the date picker with a custom locale, there are two options\n\n#### require locale\n\nThe first option is to simply require the appropriate momentjs locale before `require`-ing `react-date-picker`\n\nExample:\n\n```jsx\n//make sure you require this first!\nvar nl = require('moment/locale/nl')\n\n//and then require the date picker - it will use\n//the locale you previously required\n\nvar DatePicker = require('react-date-picker')\n```\n\n#### locale prop\n\nThe second option is specifying the `locale` prop on the date picker. This assumes you have momentjs with the locale already into page (for example, you are using `moment-with-locales.js`)\n\n```jsx\n\u003cDatePicker locale=\"fr\" /\u003e\n```\n\n\n### Other i18n props\n\n * `weekDayNames` - either an array of week day names, or a function that returns an array. In case you specify `weekDayNames` as an array, it should have Sunday as the first day. If not specified, will be built with `momentjs`using `moment.weekdaysShort()`\n * `weekStartDay`: Number - Sun 0, Monday 1, etc... If not specified, the locale specific value will be uesd.\n * `locale`: String\n * todayText: String\n * gotoSelectedText: String\n\n## Props\n\n * hideFooter: Boolean - by default footer is shown, so specify this to true if you don't want the footer\n * hideHeader: Boolean - by default header is shown, so specify this to true if you don't want the header\n * date    : Date / String / Moment / Number - for controlled behavior. Make sure you also specify an `onChange` prop\n * defaultDate: Date / String / Moment / Number - for uncontrolled behavior\n * `minDate` : Date / String / Moment / Number\n * `maxDate` : Date / String / Moment / Number\n * `dateFormat`: String [see moment.js formats](http://momentjs.com/docs/#/displaying/format/). Default date format is 'YYYY-MM-DD'\n * `onChange`: Function(dateText, moment, event) - called when the user selects a date\n\n * `onSelect`: Function(dateText, moment, view) - called when the user selects a year/month\n * `onNav`: Function(dateText, moment, view, direction) - called when the user navigates to the next/previous month/year/decade.\n * `renderDay`: Function - (optional) A function that should return a React DOM for the day cell. The first param is the props object. You can use this to have full control over what gets rendered for a day.\n * `onRenderDay`: Function - (optional) A function that can manipulate the props object for a day, and SHOULD return a new props object. Use this for custom day styling. You can use this to take full control over the styles/css classes/attributes applied to the day cell in the month view.\n * `views`: Object - an object that maps view names to factory functions. See the exported `DatePicker.views`\n\n#### Formatting props\n\n * `dayFormat` - The format in which days should be rendered (on the MonthView)\n * `monthFormat` - The format in which months should be rendered (on the YearView)\n * `yearFormat` - The format in which years should be rendered (on the DecadeView)\n\n#### Props related to the view (the current date in view and the type of view)\n * `defaultViewDate`: Date / String / Moment / Number - a date for the period to show in the picker. If none specified, defaults to `date` or to the current date.\n * `viewDate`: Date / String / Moment / Number - controlled version for `defaultViewDate`\n * `onViewDateChange`: Function(dateText, moment , view) - called when navigating to another viewDate.\n\n * `defaultView`: String - the view to render initially in the datepicker - if no defaultView is specified, the \"month\" view is rendered. Possible values: \"month\", \"year\", \"decade\".\n * `view`: String - controlled version for `defaultView`.\n * `onViewChange`: Function - function called when the view is changed. If using the controlled `view` version, make sure you update the `view` prop in this function if you want to navigate to another view as expected.\n\n * `navOnDateClick`: Boolean - defaults to true. If false, will not navigate to the date that was clicked, even if that date is in the prev/next month\n\n## Styling with css\n\nIn order to change the date-picker border width/color with css, you'll have to specify a different border for the `.date-picker` and `.date-picker .dp-cell` classes.\nYou'll also probably want `.dp-cell:first-child` left border to be 0 and `.dp-cell:last-child` right border to be 0\n\n```css\n.date-picker,\n.date-picker .dp-cell {\n    border: 1px solid red;\n}\n.date-picker .dp-cell:first-child {\n    border-left: 0px;\n}\n.date-picker .dp-cell:last-child {\n    border-right: 0px;\n}\n```\n\n\n#### Custom styling of day cells\n\n```jsx\n\nfunction onRenderDay(props){\n    if (props.date.isBefore('2010-01-01')){\n        props.className += ' invalid'\n    }\n\n    props.style.border = '1px solid red'\n\n    return props\n}\n\n\u003cDatePicker\n    onChange={this.onChange}\n    onRenderDay={onRenderDay}\n/\u003e\n```\n## Contributing\n\nWhen contributing, please work on the `src` dir.\n\nYou'll need to run the following commands:\n\n```sh\n$ npm run dev\n# starts webpack-dev-server, which does all the bundling and live reloading\n```\n\nNow navigate to [localhost:8080](http://localhost:8080)\nWith this setup, you have an environment which live-reloads all your changes, so you have a rapid development cycle.\n\nIn order to build a new production version, make sure you run `npm run build` (it builds the `lib` directory from the `src` directory, it concats all files and builds the `dist` directory, and also prepares the css files)\n\n## Other\n\n`react-date-picker` uses the awesome `moment.js` library ( Big thanks!)\n\nIf you don't use npm you can include any of the following:\n\n * `dist/react-date-picker.js` - the full sources. NOTE: You'll need to include `React` separately\n * `dist/react-date-picker.min.js` - minified \u0026 optimized version. NOTE: You'll need to include `React` separately\n * `dist/react-date-picker.nomoment.js` - the full sources. NOTE: You'll need to include `React` AND `moment.js` separately\n * `dist/react-date-picker.nomoment.min.js` - minified \u0026 optimized version. NOTE: You'll need to include `React` AND `moment.js` separately\n\n## Tests\n\nFor testing, it is required that you have [io.js](https://iojs.org/) installed. The tests rely on https://www.npmjs.com/package/jsdom for a DOM implementation, which only works in `io.js` and not `node.js`\n\nBefore running tests, make sure you refresh the `lib` folder, which is built from the `src` folder (jsx is transpiled to normal js) by doing\n```sh\n$ npm run lib\n```\n\nNow you can safely run tests with\n```sh\n$ npm test\n```\nor\n```sh\n$ make\n```\n\nFor watch mode, run\n```sh\n$ make test-w\n```\n\n`react-date-picker` is setup with `CircleCI` https://circleci.com/gh/zippyui/react-date-picker so every time a test fails we are notified on the failure.\n## License\n\n#### MIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fs3rious%2Freact-date-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fs3rious%2Freact-date-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fs3rious%2Freact-date-picker/lists"}