{"id":22612104,"url":"https://github.com/talentedandrew/react-modern-datepicker","last_synced_at":"2025-04-11T08:53:25.194Z","repository":{"id":46932962,"uuid":"130090966","full_name":"talentedandrew/react-modern-datepicker","owner":"talentedandrew","description":"A modern date picker for react library","archived":false,"fork":false,"pushed_at":"2023-03-04T02:39:04.000Z","size":1558,"stargazers_count":18,"open_issues_count":10,"forks_count":7,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-16T01:09:48.589Z","etag":null,"topics":["date","datepicker","dayjs","javascript","modern","react","reactjs","styled-components"],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/talentedandrew.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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":"2018-04-18T16:22:45.000Z","updated_at":"2023-05-03T08:19:11.000Z","dependencies_parsed_at":"2024-06-18T21:23:05.030Z","dependency_job_id":"8d588cc1-c341-4336-8cc1-a715b1204055","html_url":"https://github.com/talentedandrew/react-modern-datepicker","commit_stats":{"total_commits":66,"total_committers":6,"mean_commits":11.0,"dds":"0.24242424242424243","last_synced_commit":"0558bb53d0ff04179bff1e5516607dbf02877364"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/talentedandrew%2Freact-modern-datepicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/talentedandrew%2Freact-modern-datepicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/talentedandrew%2Freact-modern-datepicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/talentedandrew%2Freact-modern-datepicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/talentedandrew","download_url":"https://codeload.github.com/talentedandrew/react-modern-datepicker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228762662,"owners_count":17968683,"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":["date","datepicker","dayjs","javascript","modern","react","reactjs","styled-components"],"created_at":"2024-12-08T17:09:59.755Z","updated_at":"2024-12-08T17:10:00.381Z","avatar_url":"https://github.com/talentedandrew.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-modern-datepicker\n\n[![npm (scoped)](https://img.shields.io/badge/npm-v1.2.0-success.svg)](https://www.npmjs.com/package/react-modern-datepicker)\n\nA modern date picker for react library. (Now customizable) . Built using [React](https://github.com/facebook/react), [Dayjs](https://github.com/iamkun/dayjs) and [styled-components](https://github.com/styled-components/styled-components)\n\n\n\u003cimg align=\"center\" src=\"https://user-images.githubusercontent.com/15646138/62488741-b47b9280-b7e2-11e9-967c-04c0a2494bb1.gif\" alt=\"Date view\"/\u003e\n\n\n\u003cp float=\"left\"\u003e\n  \u003cimg align=\"center\" hspace=\"5\" vspace=\"5\" src=\"https://raw.githubusercontent.com/talentedandrew/react-modern-datepicker/master/assets/dateview.png\" width=\"250\" alt=\"Date view\"/\u003e\n  \u003cimg align=\"center\" hspace=\"5\" vspace=\"5\" src=\"https://raw.githubusercontent.com/talentedandrew/react-modern-datepicker/master/assets/monthview.png\" width=\"250\" alt=\"Date view\"/\u003e\n  \u003cimg align=\"center\" hspace=\"5\" vspace=\"5\" src=\"https://raw.githubusercontent.com/talentedandrew/react-modern-datepicker/master/assets/yearview.png\" width=\"250\" alt=\"Date view\"/\u003e\n  \u003cbr/\u003e\u003cbr/\u003e\n\n  \n\u003c/p\u003e\n\n## Customizable\n\n\n\u003cp float=\"left\"\u003e\n  \u003cimg align=\"center\" hspace=\"5\" vspace=\"5\" src=\"https://raw.githubusercontent.com/talentedandrew/react-modern-datepicker/master/assets/screen1.png\" width=\"250\" alt=\"Date view\"/\u003e\n  \u003cimg align=\"center\" hspace=\"5\" vspace=\"5\" src=\"https://raw.githubusercontent.com/talentedandrew/react-modern-datepicker/master/assets/screen2.png\" width=\"250\" alt=\"Date view\"/\u003e\n  \u003cimg align=\"center\" hspace=\"5\" vspace=\"5\" src=\"https://raw.githubusercontent.com/talentedandrew/react-modern-datepicker/master/assets/screen3.png\" width=\"250\" alt=\"Date view\"/\u003e\n  \u003cimg align=\"center\" hspace=\"5\" vspace=\"5\" src=\"https://raw.githubusercontent.com/talentedandrew/react-modern-datepicker/master/assets/screen4.png\" width=\"250\" alt=\"Date view\"/\u003e\n  \u003cimg align=\"center\" hspace=\"5\" vspace=\"5\" src=\"https://raw.githubusercontent.com/talentedandrew/react-modern-datepicker/master/assets/screen5.png\" width=\"250\" alt=\"Date view\"/\u003e\n  \u003cimg align=\"center\" hspace=\"5\" vspace=\"5\" src=\"https://raw.githubusercontent.com/talentedandrew/react-modern-datepicker/master/assets/screen6.png\" width=\"250\" alt=\"Date view\"/\u003e\n  \u003cimg align=\"center\" hspace=\"5\" vspace=\"5\" src=\"https://raw.githubusercontent.com/talentedandrew/react-modern-datepicker/master/assets/screen7.png\" width=\"250\" alt=\"Date view\"/\u003e\n  \u003cimg align=\"center\" hspace=\"5\" vspace=\"5\" src=\"https://raw.githubusercontent.com/talentedandrew/react-modern-datepicker/master/assets/screen8.png\" width=\"250\" alt=\"Date view\"/\u003e\n  \u003cbr/\u003e\u003cbr/\u003e\n\u003c/p\u003e\n\n\n## Installation\n\nThe package can be installed via NPM:\n\n```\nnpm install react-modern-datepicker --save\n```\n\nThis package doesn't come with any dependency other than `dayjs` (momentjs deprecated) \u0026 `styled-components`. Threfore, You’ll need to install React, PropTypes separately since those dependencies aren’t included in the package. Below is a simple example of how to use the ModernDatepicker in a React view.\n\n```js\nimport React from 'react';\nimport ModernDatepicker from 'react-modern-datepicker';\n\nclass Example extends React.Component {\n\tconstructor(props) {\n\t\tsuper(props);\n\t\tthis.state = {\n\t\t\tstartDate: new Date(), // can be any of these ['dayjs()', '', null, new Date(2018,12,1)]\n\t\t};\n\t\tthis.handleChange = this.handleChange.bind(this);\n\t}\n\n\thandleChange(date) {\n\t\tthis.setState({\n\t\t\tstartDate: date,\n\t\t});\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t\u003cModernDatepicker\n\t\t\t\tdate={this.state.startDate}\n\t\t\t\tformat={'DD-MM-YYYY'}\n\t\t\t\tshowBorder\n\t\t\t\tonChange={date =\u003e this.handleChange(date)}\n\t\t\t\tplaceholder={'Select a date'}\n\t\t\t/\u003e\n\t\t);\n\t}\n}\n```\n\n## Important Note\n\nThe previous versions of this library ( \u003c v0.8) were using `momentjs` as a dependency which has been replaced by `dayjs` (mostly due to the bundle size). Since `momentjs` has been removed, the support for locale i.e `lang` has also been removed.\n\n\n\n### Adding your own theme\n\nYou can now add your own theme to customize the ModernDatepicker.You can do this with the help of `primaryColor`, `secondaryColor`, `primaryTextColor`, `secondaryTextColor` props. The following example shows how to customize the ModernDatepicker.\n\n```js\nimport React from 'react';\nimport ModernDatepicker from 'react-modern-datepicker';\nimport dayjs from 'dayjs';\nimport './App.css';\nimport icon from '../assets/icon.png'; // if you want to show an icon\n\nclass Example extends React.Component {\n\tconstructor(props) {\n\t\tsuper(props);\n\t\tthis.state = {\n\t\t\tstartDate: new Date(), // can be any of these ['dayjs()', '', null, new Date(2018,12,1)]\n\t\t};\n\t\tthis.handleChange = this.handleChange.bind(this);\n\t}\n\n\thandleChange(date) {\n\t\tthis.setState({\n\t\t\tstartDate: date,\n\t\t});\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t\u003cModernDatepicker\n\t\t\t\tdate={this.state.startDate}\n\t\t\t\tformat={'DD-MM-YYYY'}\n\t\t\t\tshowBorder\n\t\t\t\tallowEdit\n\t\t\t\tclassName=\"color\"\n\t\t\t\tid=\"someId\"\n\t\t\t\ticon={icon}\n\t\t\t\tmaxDate={dayjs().add('1', 'day')} // can be a javascript date object also (new Date(2018,12,12))\n\t\t\t\tminDate={dayjs().subtract('2', 'day')}// can be a javascript date object also (new Date(2018,12,1))\n\t\t\t\tonChange={date =\u003e this.handleChange(date)}\n\t\t\t\tplaceholder={'Select a date'}\n\t\t\t\tprimaryColor={'#d9b44a'}\n\t\t\t\tsecondaryColor={'#75b1a9'}\n\t\t\t\tprimaryTextColor={'#4f6457'}\n\t\t\t\tsecondaryTextColor={'#acd0c0'}\n\t\t\t/\u003e\n\t\t);\n\t}\n}\n```\n\nPlease note that these props (`primaryColor`, `secondaryColor`, `primaryTextColor`, `secondaryTextColor`) , takes a valid color scheme as a string.(like HEX or RGB format).\n\n### Adding your own CSS\n\nYou can also pass your own css to style the input element.The following example shows how to style the input element using your own css.\n\n`./App.css`\n\n```css\n//Please  note that, for this class to take the precedence over the\n//default css, we should repeat the class name like below (instead of .color, we are\n// using .color.color)\n.color.color {\n\tborder-radius: 0;\n\t-moz-border-radius: 0;\n\t-webkit-border-radius: 0;\n\tfont-size: 15px;\n\tfont-weight: 600;\n\tpadding: 10px 10px 10px 5px;\n\tborder-bottom: 1px solid #ebebeb !important;\n\tborder: none;\n\tbox-sizing: border-box;\n\tmargin-top: 22px;\n\tbox-shadow: none;\n\tfont-family: Open Sans, sans-serif;\n}\n```\n\n`./App.js`\n\n```js\nimport React from 'react';\nimport ModernDatepicker from 'react-modern-datepicker';\nimport dayjs from 'dayjs';\nimport './App.css';\nimport icon from '../assets/icon.png'; // if you want to show an icon\n\nclass Example extends React.Component {\n\tconstructor(props) {\n\t\tsuper(props);\n\t\tthis.state = {\n\t\t\tstartDate: dayjs(),\n\t\t};\n\t\tthis.handleChange = this.handleChange.bind(this);\n\t}\n\n\thandleChange(date) {\n\t\tthis.setState({\n\t\t\tstartDate: date,\n\t\t});\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t\u003cModernDatepicker\n\t\t\t\tdate={this.state.startDate}\n\t\t\t\tformat={'DD-MM-YYYY'}\n\t\t\t\tshowBorder\n\t\t\t\tclassName=\"color\"\n\t\t\t\ticon={icon}\n\t\t\t\tonChange={date =\u003e this.handleChange(date)}\n\t\t\t\tplaceholder={'Select a date'}\n\t\t\t/\u003e\n\t\t);\n\t}\n}\n```\n\n### Passing min and max date\n\nYou can also pass min and max date to the component.The following example shows how to pass min and max date.\n\n```js\nimport React from 'react';\nimport ModernDatepicker from 'react-modern-datepicker';\nimport dayjs from 'dayjs';\nimport './App.css';\nimport icon from '../assets/icon.png'; // if you want to show an icon\n\nclass Example extends React.Component {\n\tconstructor(props) {\n\t\tsuper(props);\n\t\tthis.state = {\n\t\t\tstartDate: dayjs(),\n\t\t};\n\t\tthis.handleChange = this.handleChange.bind(this);\n\t}\n\n\thandleChange(date) {\n\t\tthis.setState({\n\t\t\tstartDate: date,\n\t\t});\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t\u003cModernDatepicker\n\t\t\t\tdate={this.state.startDate}\n\t\t\t\tformat={'DD-MM-YYYY'}\n\t\t\t\tshowBorder\n\t\t\t\tallowEdit\n\t\t\t\tclassName=\"color\"\n\t\t\t\tid=\"someId\"\n\t\t\t\ticon={icon}\n\t\t\t\tmaxDate={dayjs().add('1', 'day')}\n\t\t\t\tminDate={dayjs().subtract('2', 'day')}\n\t\t\t\tonChange={date =\u003e this.handleChange(date)}\n\t\t\t\tplaceholder={'Select a date'}\n\t\t\t/\u003e\n\t\t);\n\t}\n}\n```\n\nIf you pass invalid min or max date, it will show the corresponding error.\n\n### \u003cdel\u003e Passing Language and Label \u003c/del\u003e (This feature has been deprecated as of now.)\n\n\u003cdel\u003eYou can also pass language and label to the component.The following example shows how to pass language and label, using props `lang` and `label`.\u003c/del\u003e\n\n## Configuration\n\nThe most basic use of the ModernDatepicker can be described with:\n\n```js\n\u003cModernDatepicker date={this.state.date} onChange={this.handleChange} showBorder /\u003e\n```\n\nThe default `format` prop is `DD-MM-YYYY` if not specified.\n\n## Options\n\nThe following are the props that you can pass to `ModernDatepicker` Component :\n\n| props              |   Default    | Optional | Description                                                                                                         |\n| ------------------ | :----------: | -------- | ------------------------------------------------------------------------------------------------------------------- |\n| date               |     null     | true     | This prop takes the date that you want to show, in string format, a javascript date object(new Date()) or as an instance of dayjs                                                                     |\n| format             | 'DD-MM-YYYY' | true     | This prop takes the format you want to set for your date                                                            |\n| showBorder         |    false     | true     | This prop takes a boolean to show or not to show borders around the input                                           |\n| allowEdit         |    false     | true     | This prop takes a boolean to edit the input field manually                                          |\n| onChange           |     null     | false    | This props takes a function, with the date passed to its parameters                                                 |\n| placeholder        |     null     | true     | This props takes a string to show when no date is selected                                                          |\n| className          |     null     | true     | This props takes any external css/scss you want to use to override the default one.                                 |\n| icon               |     null     | true     | This props takes an image you want to add as an icon.                                                               |\n| iconClass          |     null     | true     | This props takes any external css/scss, that you want to use to style your icon                                     |\n| maxDate            |     null     | true     | This props takes the maximum date. (expects you to provide the same format as the date)                             |\n| minDate            |     null     | true     | This props takes the minimum date. (expects you to provide the same format as the date)                             |\n| id                 |     null     | true     | This props takes the id as a string, that you want to pass to the input element                                     |\n| label              |     null     | true     | This props takes the label as a string, that you want to show for the input element                                 |\n| labelClass         |     null     | true     | This props takes any external css/scss, that you want to use to style your label                                    |\n| \u003cdel\u003elang\u003c/del\u003e               |      \u003cdel\u003een\u003c/del\u003e      | \u003cdel\u003etrue\u003c/del\u003e     | \u003cdel\u003eThis props takes the language as a string, that you want to show in the calendar\u003c/del\u003e                                    |\n| onFocus            |     null     | true     | This props takes the function to call on onFocus event                                                              |\n| onBlur             |     null     | true     | This props takes the function to call on onBlur event                                                               |\n| primaryColor       |     null     | true     | This props takes the color code in string format, and applies it to the selected date section                       |\n| secondaryColor     |     null     | true     | This props takes the color code in string format, and applies it to the body of the datepicker                      |\n| primaryTextColor   |     null     | true     | This props takes the color code in string format, and applies it to the text of the body of the datepicker          |\n| secondaryTextColor |     null     | true     | This props takes the color code in string format, and applies it to the selected text of the body of the datepicker |\n\n## Compatibility\n\n### React\n\nCompatible with the latest version of react i.e v16.X.X\n\nLatest compatible versions:\n\n-   React 16.0.0 or newer: All above React-datepicker v.0.2.0\n\n### Browser Support\n\nThe date picker is compatible with the latest versions of Chrome, Firefox, and IE10+.\n\n## License\n\nApache License\nsee [LICENSE](./LICENSE) for the full license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftalentedandrew%2Freact-modern-datepicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftalentedandrew%2Freact-modern-datepicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftalentedandrew%2Freact-modern-datepicker/lists"}