[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-3450":3},{"id":4,"name":5,"fullName":6,"owner":5,"repo":5,"description":7,"homepage":8,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":16,"stars30d":17,"stars90d":15,"forks30d":15,"starsTrendScore":17,"compositeScore":18,"rankGlobal":9,"rankLanguage":9,"license":19,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":20,"hasPages":22,"topics":23,"createdAt":9,"pushedAt":9,"updatedAt":29,"readmeContent":30,"aiSummary":31,"trendingCount":15,"starSnapshotCount":15,"syncStatus":32,"lastSyncTime":33,"discoverSource":34},3450,"react-dates","react-dates\u002Freact-dates","An easily internationalizable, mobile-friendly datepicker library for the web","https:\u002F\u002Freact-dates.github.io\u002Freact-dates\u002F",null,"JavaScript",12197,1679,138,521,0,1,3,44.68,"MIT License",false,"master",true,[24,25,26,27,28,5],"calendar","datepicker","dates","react","react-component","2026-06-12 02:00:50","# react-dates \u003Csup>[![Version Badge][npm-version-svg]][package-url]\u003C\u002Fsup>\n\n[![Build Status][travis-svg]][travis-url]\n[![dependency status][deps-svg]][deps-url]\n[![dev dependency status][dev-deps-svg]][dev-deps-url]\n[![License][license-image]][license-url]\n[![Downloads][downloads-image]][downloads-url]\n\n[![npm badge][npm-badge-png]][package-url]\n\n> An easily internationalizable, accessible, mobile-friendly datepicker library for the web.\n\n![react-dates in action](https:\u002F\u002Fraw.githubusercontent.com\u002Freact-dates\u002Freact-dates\u002FHEAD\u002Freact-dates-demo.gif)\n\n## Live Playground\n\nFor examples of the datepicker in action, go to [react-dates.github.io](https:\u002F\u002Freact-dates.github.io\u002Freact-dates\u002F).\n\nOR\n\nTo run that demo on your own computer:\n* Clone this repository\n* `npm install`\n* `npm run storybook`\n* Visit http:\u002F\u002Flocalhost:6006\u002F\n\n## Getting Started\n### Install dependencies\nEnsure packages are installed with correct version numbers by running (from your command line):\n  ```sh\n  (\n    export PKG=react-dates;\n    npm info \"$PKG\" peerDependencies --json | command sed 's\u002F[\\{\\},]\u002F\u002Fg ; s\u002F: \u002F@\u002Fg; s\u002F *\u002F\u002Fg' | xargs npm install --save \"$PKG\"\n  )\n  ```\n\n  Which produces and runs a command like:\n\n  ```sh\n  npm install --save react-dates moment@>=#.## react@>=#.## react-dom@>=#.##\n  ```\n\n  > If you are running Windows, that command will not work, but if you are running npm 5 or higher, you can run `npx install-peerdeps react-dates` on any platform\n\n### Initialize\n```js\nimport 'react-dates\u002Finitialize';\n```\n\nAs of v13.0.0 of `react-dates`, this project relies on `react-with-styles`. If you want to continue using CSS stylesheets and classes, there is a little bit of extra set-up required to get things going. As such, you need to import `react-dates\u002Finitialize` to set up class names on our components. This import should go at the top of your application as you won't be able to import any `react-dates` components without it.\n\nNote: This component assumes `box-sizing: border-box` is set globally in your page's CSS.\n\n### Include component\n```js\nimport { DateRangePicker, SingleDatePicker, DayPickerRangeController } from 'react-dates';\n```\n\n#### Webpack\nUsing Webpack with CSS loader, add the following import to your app:\n```js\nimport 'react-dates\u002Flib\u002Fcss\u002F_datepicker.css';\n```\n\n#### Without Webpack:\nCreate a CSS file with the contents of `require.resolve('react-dates\u002Flib\u002Fcss\u002F_datepicker.css')` and include it in your html `\u003Chead>` section.\n\nTo see this in action, you can check out https:\u002F\u002Fgithub.com\u002Fmajapw\u002Freact-dates-demo which adds `react-dates` on top of a simple `create-react-app` setup.\n\n#### Overriding Base Class\nBy default `react-dates` will use `PureComponent` conditionally if it is available.  However, it is possible to override this setting and use `Component` and `shouldComponentUpdate` instead. It is also possible to override the logic in `build\u002Futil\u002FbaseClass` if you know that you are using a React version with `PureComponent`.\n  ```javascript\n    import React from 'react';\n    export default React.PureComponent;\n    export const pureComponentAvailable = true;\n  ```\n\n#### Overriding styles\nRight now, the easiest way to tweak `react-dates` to your heart's content is to create another stylesheet to override the default react-dates styles. For example, you could create a file named `react_dates_overrides.css` with the following contents (Make sure when you import said file to your `app.js`, you import it after the `react-dates` styles):\n\n```css\n\u002F\u002F NOTE: the order of these styles DO matter\n\n\u002F\u002F Will edit everything selected including everything between a range of dates\n.CalendarDay__selected_span {\n  background: #82e0aa; \u002F\u002Fbackground\n  color: white; \u002F\u002Ftext\n  border: 1px solid $light-red; \u002F\u002Fdefault styles include a border\n}\n\n\u002F\u002F Will edit selected date or the endpoints of a range of dates\n.CalendarDay__selected {\n  background: $dark-red;\n  color: white;\n}\n\n\u002F\u002F Will edit when hovered over. _span style also has this property\n.CalendarDay__selected:hover {\n  background: orange;\n  color: white;\n}\n\n\u002F\u002F Will edit when the second date (end date) in a range of dates\n\u002F\u002F is not yet selected. Edits the dates between your mouse and said date\n.CalendarDay__hovered_span:hover,\n.CalendarDay__hovered_span {\n  background: brown;\n}\n```\n\nThis would override the background and text colors applied to highlighted calendar days. You can use this method with the default set-up to override any aspect of the calendar to have it better fit to your particular needs. If there are any styles that you need that aren't listed here, you can always check the source css of each element.\n\n### Make some awesome datepickers\n\nWe provide a handful of components for your use. If you supply essential props to each component, you'll get a full featured interactive date picker. With additional optional props, you can customize the look and feel of the inputs, calendar, etc. You can see what each of the props do in the [live demo](http:\u002F\u002Fairbnb.io\u002Freact-dates\u002F) or explore\nhow to properly wrap the pickers in the [examples folder](https:\u002F\u002Fgithub.com\u002Freact-dates\u002Freact-dates\u002Ftree\u002FHEAD\u002Fexamples).\n\n#### DateRangePicker\nThe `DateRangePicker` is a fully controlled component that allows users to select a date range. You can control the selected\ndates using the `startDate`, `endDate`, and `onDatesChange` props as shown below. The `DateRangePicker` also manages internal\nstate for partial dates entered by typing (although `onDatesChange` will not trigger until a date has been entered\ncompletely in that case). Similarly, you can control which input is focused as well as calendar visibility (the calendar is\nonly visible if `focusedInput` is defined) with the `focusedInput` and `onFocusChange` props as shown below.\n\nHere is the minimum *REQUIRED* setup you need to get the `DateRangePicker` working:\n```jsx\n\u003CDateRangePicker\n  startDate={this.state.startDate} \u002F\u002F momentPropTypes.momentObj or null,\n  startDateId=\"your_unique_start_date_id\" \u002F\u002F PropTypes.string.isRequired,\n  endDate={this.state.endDate} \u002F\u002F momentPropTypes.momentObj or null,\n  endDateId=\"your_unique_end_date_id\" \u002F\u002F PropTypes.string.isRequired,\n  onDatesChange={({ startDate, endDate }) => this.setState({ startDate, endDate })} \u002F\u002F PropTypes.func.isRequired,\n  focusedInput={this.state.focusedInput} \u002F\u002F PropTypes.oneOf([START_DATE, END_DATE]) or null,\n  onFocusChange={focusedInput => this.setState({ focusedInput })} \u002F\u002F PropTypes.func.isRequired,\n\u002F>\n```\n\nThe following is a list of other *OPTIONAL* props you may provide to the `DateRangePicker` to customize appearance and behavior to your heart's desire. All constants (indicated by `ALL_CAPS`) are provided as named exports in `react-dates\u002Fconstants`. Please explore the [storybook](http:\u002F\u002Fairbnb.io\u002Freact-dates\u002F?selectedKind=DRP%20-%20Input%20Props&selectedStory=default&full=0&down=1&left=1&panelRight=0&downPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel) for more information on what each of these props do.\n```js\n\u002F\u002F input related props\nstartDatePlaceholderText: PropTypes.string,\nendDatePlaceholderText: PropTypes.string,\nstartDateAriaLabel: PropTypes.string,\nendDateAriaLabel: PropTypes.string,\nstartDateTitleText: PropTypes.string,\nendDateTitleText: PropTypes.string,\ndisabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf([START_DATE, END_DATE])]),\nrequired: PropTypes.bool,\nreadOnly: PropTypes.bool,\nscreenReaderInputMessage: PropTypes.string,\nshowClearDates: PropTypes.bool,\nshowDefaultInputIcon: PropTypes.bool,\ncustomInputIcon: PropTypes.node,\ncustomArrowIcon: PropTypes.node,\ncustomCloseIcon: PropTypes.node,\ninputIconPosition: PropTypes.oneOf([ICON_BEFORE_POSITION, ICON_AFTER_POSITION]),\nnoBorder: PropTypes.bool,\nblock: PropTypes.bool,\nsmall: PropTypes.bool,\nregular: PropTypes.bool,\nautoComplete: PropTypes.string,\n\n\u002F\u002F calendar presentation and interaction related props\nrenderMonthText: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'), \u002F\u002F (month) => PropTypes.string,\norientation: PropTypes.oneOf([HORIZONTAL_ORIENTATION, VERTICAL_ORIENTATION]),\nanchorDirection: PropTypes.oneOf([ANCHOR_LEFT, ANCHOR_RIGHT]),\nopenDirection: PropTypes.oneOf([OPEN_DOWN, OPEN_UP]),\nhorizontalMargin: PropTypes.number,\nwithPortal: PropTypes.bool,\nwithFullScreenPortal: PropTypes.bool,\nappendToBody: PropTypes.bool,\ndisableScroll: PropTypes.bool,\ndaySize: nonNegativeInteger,\nisRTL: PropTypes.bool,\ninitialVisibleMonth: PropTypes.func,\nfirstDayOfWeek: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),\nnumberOfMonths: PropTypes.number,\nkeepOpenOnDateSelect: PropTypes.bool,\nreopenPickerOnClearDates: PropTypes.bool,\nrenderCalendarInfo: PropTypes.func,\nrenderMonthElement: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'), PropTypes.func, \u002F\u002F ({ month, onMonthSelect, onYearSelect, isVisible }) => PropTypes.node,\nhideKeyboardShortcutsPanel: PropTypes.bool,\nverticalSpacing: PropTypes.number,\n\n\u002F\u002F navigation related props\nnavPrev: PropTypes.node,\nnavNext: PropTypes.node,\nonPrevMonthClick: PropTypes.func,\nonNextMonthClick: PropTypes.func,\nonClose: PropTypes.func,\ntransitionDuration: nonNegativeInteger, \u002F\u002F milliseconds\n\n\u002F\u002F day presentation and interaction related props\nrenderCalendarDay: PropTypes.func,\nrenderDayContents: PropTypes.func,\nminimumNights: PropTypes.number,\nminDate: momentPropTypes.momentObj,\nmaxDate: momentPropTypes.momentObj,\nenableOutsideDays: PropTypes.bool,\nisDayBlocked: PropTypes.func,\nisOutsideRange: PropTypes.func,\nisDayHighlighted: PropTypes.func,\n\n\u002F\u002F internationalization props\ndisplayFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),\nmonthFormat: PropTypes.string,\nweekDayFormat: PropTypes.string,\nphrases: PropTypes.shape(getPhrasePropTypes(DateRangePickerPhrases)),\ndayAriaLabelFormat: PropTypes.string,\n```\n\n#### SingleDatePicker\nThe `SingleDatePicker` is a fully controlled component that allows users to select a single date. You can control the selected\ndate using the `date` and `onDateChange` props as shown below. The `SingleDatePicker` also manages internal\nstate for partial dates entered by typing (although `onDateChange` will not trigger until a date has been entered\ncompletely in that case). Similarly, you can control whether or not the input is focused (calendar visibility is also\ncontrolled with the same props) with the `focused` and `onFocusChange` props as shown below.\n\nHere is the minimum *REQUIRED* setup you need to get the `SingleDatePicker` working:\n```jsx\n\u003CSingleDatePicker\n  date={this.state.date} \u002F\u002F momentPropTypes.momentObj or null\n  onDateChange={date => this.setState({ date })} \u002F\u002F PropTypes.func.isRequired\n  focused={this.state.focused} \u002F\u002F PropTypes.bool\n  onFocusChange={({ focused }) => this.setState({ focused })} \u002F\u002F PropTypes.func.isRequired\n  id=\"your_unique_id\" \u002F\u002F PropTypes.string.isRequired,\n\u002F>\n```\n\nThe following is a list of other *OPTIONAL* props you may provide to the `SingleDatePicker` to customize appearance and behavior to your heart's desire. All constants (indicated by `ALL_CAPS`) are provided as named exports in `react-dates\u002Fconstants`. Please explore the [storybook](http:\u002F\u002Fairbnb.io\u002Freact-dates\u002F?selectedKind=SDP%20-%20Input%20Props&selectedStory=default&full=0&down=1&left=1&panelRight=0&downPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel) for more information on what each of these props do.\n```js\n\u002F\u002F input related props\nplaceholder: PropTypes.string,\nariaLabel: PropTypes.string,\ntitleText: PropTypes.string,\ndisabled: PropTypes.bool,\nrequired: PropTypes.bool,\nreadOnly: PropTypes.bool,\nscreenReaderInputMessage: PropTypes.string,\nshowClearDate: PropTypes.bool,\ncustomCloseIcon: PropTypes.node,\nshowDefaultInputIcon: PropTypes.bool,\ncustomInputIcon: PropTypes.node,\ninputIconPosition: PropTypes.oneOf([ICON_BEFORE_POSITION, ICON_AFTER_POSITION]),\nnoBorder: PropTypes.bool,\nblock: PropTypes.bool,\nsmall: PropTypes.bool,\nregular: PropTypes.bool,\nautoComplete: PropTypes.string,\n\n\u002F\u002F calendar presentation and interaction related props\nrenderMonthText: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'), \u002F\u002F (month) => PropTypes.string,\norientation: PropTypes.oneOf([HORIZONTAL_ORIENTATION, VERTICAL_ORIENTATION]),\nanchorDirection: PropTypes.oneOf([ANCHOR_LEFT, ANCHOR_RIGHT]),\nopenDirection: PropTypes.oneOf([OPEN_DOWN, OPEN_UP]),\nhorizontalMargin: PropTypes.number,\nwithPortal: PropTypes.bool,\nwithFullScreenPortal: PropTypes.bool,\nappendToBody: PropTypes.bool,\ndisableScroll: PropTypes.bool,\ninitialVisibleMonth: PropTypes.func,\nfirstDayOfWeek: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),\nnumberOfMonths: PropTypes.number,\nkeepOpenOnDateSelect: PropTypes.bool,\nreopenPickerOnClearDate: PropTypes.bool,\nrenderCalendarInfo: PropTypes.func,\nrenderMonthElement: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'), \u002F\u002F ({ month, onMonthSelect, onYearSelect, isVisible }) => PropTypes.node,\nhideKeyboardShortcutsPanel: PropTypes.bool,\ndaySize: nonNegativeInteger,\nisRTL: PropTypes.bool,\nverticalSpacing: PropTypes.number,\n\n\u002F\u002F navigation related props\nnavPrev: PropTypes.node,\nnavNext: PropTypes.node,\nonPrevMonthClick: PropTypes.func,\nonNextMonthClick: PropTypes.func,\nonClose: PropTypes.func,\ntransitionDuration: nonNegativeInteger, \u002F\u002F milliseconds\n\n\u002F\u002F day presentation and interaction related props\nrenderCalendarDay: PropTypes.func,\nrenderDayContents: PropTypes.func,\nenableOutsideDays: PropTypes.bool,\nisDayBlocked: PropTypes.func,\nisOutsideRange: PropTypes.func,\nisDayHighlighted: PropTypes.func,\n\n\u002F\u002F internationalization props\ndisplayFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),\nmonthFormat: PropTypes.string,\nweekDayFormat: PropTypes.string,\nphrases: PropTypes.shape(getPhrasePropTypes(SingleDatePickerPhrases)),\ndayAriaLabelFormat: PropTypes.string,\n```\n\n#### DayPickerRangeController\nThe `DayPickerRangeController` is a calendar-only version of the `DateRangePicker`. There are no inputs (which also means\nthat currently, it is not keyboard accessible) and the calendar is always visible, but you can select a date range much in the same way you would with the `DateRangePicker`. You can control the selected\ndates using the `startDate`, `endDate`, and `onDatesChange` props as shown below. Similarly, you can control which input is focused with the `focusedInput` and `onFocusChange` props as shown below. The user will only be able to select a date if `focusedInput` is provided.\n\nHere is the minimum *REQUIRED* setup you need to get the `DayPickerRangeController` working:\n```jsx\n\u003CDayPickerRangeController\n  startDate={this.state.startDate} \u002F\u002F momentPropTypes.momentObj or null,\n  endDate={this.state.endDate} \u002F\u002F momentPropTypes.momentObj or null,\n  onDatesChange={({ startDate, endDate }) => this.setState({ startDate, endDate })} \u002F\u002F PropTypes.func.isRequired,\n  focusedInput={this.state.focusedInput} \u002F\u002F PropTypes.oneOf([START_DATE, END_DATE]) or null,\n  onFocusChange={focusedInput => this.setState({ focusedInput })} \u002F\u002F PropTypes.func.isRequired,\n  initialVisibleMonth={() => moment().add(2, \"M\")} \u002F\u002F PropTypes.func or null,\n\u002F>\n```\n\nThe following is a list of other *OPTIONAL* props you may provide to the `DayPickerRangeController` to customize appearance and behavior to your heart's desire. Again, please explore the [storybook](http:\u002F\u002Fairbnb.io\u002Freact-dates\u002F?selectedKind=DayPickerRangeController&selectedStory=default&full=0&down=1&left=1&panelRight=0&downPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel) for more information on what each of these props do.\n```js\n  \u002F\u002F calendar presentation and interaction related props\n  enableOutsideDays: PropTypes.bool,\n  numberOfMonths: PropTypes.number,\n  orientation: ScrollableOrientationShape,\n  withPortal: PropTypes.bool,\n  initialVisibleMonth: PropTypes.func,\n  renderCalendarInfo: PropTypes.func,\n  renderMonthElement: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'), \u002F\u002F ({ month, onMonthSelect, onYearSelect, isVisible }) => PropTypes.node,\n  onOutsideClick: PropTypes.func,\n  keepOpenOnDateSelect: PropTypes.bool,\n  noBorder: PropTypes.bool,\n\n  \u002F\u002F navigation related props\n  navPrev: PropTypes.node,\n  navNext: PropTypes.node,\n  onPrevMonthClick: PropTypes.func,\n  onNextMonthClick: PropTypes.func,\n  transitionDuration: nonNegativeInteger, \u002F\u002F milliseconds\n\n  \u002F\u002F day presentation and interaction related props\n  renderCalendarDay: PropTypes.func,\n  renderDayContents: PropTypes.func,\n  minimumNights: PropTypes.number,\n  isOutsideRange: PropTypes.func,\n  isDayBlocked: PropTypes.func,\n  isDayHighlighted: PropTypes.func,\n\n  \u002F\u002F internationalization props\n  monthFormat: PropTypes.string,\n  weekDayFormat: PropTypes.string,\n  phrases: PropTypes.shape(getPhrasePropTypes(DayPickerPhrases)),\n  dayAriaLabelFormat: PropTypes.string,\n\u002F>\n```\n\n## Localization\n\n[Moment.js](http:\u002F\u002Fmomentjs.com) is a peer dependency of `react-dates`. The latter then uses a single instance of `moment` which is imported in one’s project. Loading a locale is done by calling `moment.locale(..)` in the component where `moment` is imported, with the [locale key](http:\u002F\u002Fmomentjs.com\u002Fdocs\u002F#\u002Fi18n\u002F) of choice. For instance:\n\n```js\nmoment.locale('pl'); \u002F\u002F Polish\n```\n\nHowever, this only solves date localization. For complete internationalization of the components, `react-dates` defines a certain amount of [user interface strings](https:\u002F\u002Fgithub.com\u002Freact-dates\u002Freact-dates\u002Fblob\u002FHEAD\u002Fsrc\u002FdefaultPhrases.js) in English which can be changed through the `phrases` prop (explore the [storybook](http:\u002F\u002Fairbnb.io\u002Freact-dates\u002F?selectedKind=DateRangePicker%20%28DRP%29&selectedStory=non-english%20locale&full=0&addons=1&stories=1&panelRight=0&addonPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel) for examples). For accessibility and usability concerns, **all these UI elements should be translated**.\n\n## Advanced\n\n`react-dates` no longer relies strictly on CSS, but rather relies on `react-with-styles` as an abstraction layer between how styles are applied and how they are written. The instructions above will get the project working out of the box, but there's a lot more customization that can be done.\n\n### Interfaces\n\nThe `react-dates\u002Finitialize` script actually relies on [react-with-styles-interface-css](https:\u002F\u002Fgithub.com\u002Fairbnb\u002Freact-with-styles-interface-css) under the hood. If you are interested in a different solution for styling in your project, you can do your own initialization of a another [interface](https:\u002F\u002Fgithub.com\u002Fairbnb\u002Freact-with-styles\u002Fblob\u002FHEAD\u002FREADME.md#interfaces). At Airbnb, for instance, we rely on [Aphrodite](https:\u002F\u002Fgithub.com\u002FKhan\u002Faphrodite) under the hood and therefore use the Aphrodite interface for `react-with-styles`. If you want to do the same, you would use the following pattern:\n```js\nimport ThemedStyleSheet from 'react-with-styles\u002Flib\u002FThemedStyleSheet';\nimport aphroditeInterface from 'react-with-styles-interface-aphrodite';\nimport DefaultTheme from 'react-dates\u002Flib\u002Ftheme\u002FDefaultTheme';\n\nThemedStyleSheet.registerInterface(aphroditeInterface);\nThemedStyleSheet.registerTheme(DefaultTheme);\n```\n\nThe above code has to be run before any `react-dates` component is imported. Otherwise, you will get an error. Also note that if you register any custom interface manually, you *must* also manually register a theme.\n\n### Theming\n`react-dates` also now supports a different way to theme. You can see the default theme values in [this file](https:\u002F\u002Fgithub.com\u002Freact-dates\u002Freact-dates\u002Fblob\u002FHEAD\u002Fsrc\u002Ftheme\u002FDefaultTheme.js) and you would override them in the following manner:\n```js\nimport ThemedStyleSheet from 'react-with-styles\u002Flib\u002FThemedStyleSheet';\nimport aphroditeInterface from 'react-with-styles-interface-aphrodite';\nimport DefaultTheme from 'react-dates\u002Flib\u002Ftheme\u002FDefaultTheme';\n\nThemedStyleSheet.registerInterface(aphroditeInterface);\nThemedStyleSheet.registerTheme({\n  reactDates: {\n    ...DefaultTheme.reactDates,\n    color: {\n      ...DefaultTheme.reactDates.color,\n      highlighted: {\n        backgroundColor: '#82E0AA',\n        backgroundColor_active: '#58D68D',\n        backgroundColor_hover: '#58D68D',\n        color: '#186A3B',\n        color_active: '#186A3B',\n        color_hover: '#186A3B',\n      },\n    },\n  },\n});\n```\n\nThe above code would use shades of green instead of shades of yellow for the highlight color on `CalendarDay` components. Note that you *must* register an interface if you manually register a theme. One will not work without the other.\n\n#### A note on using `react-with-styles-interface-css`\nThe default interface that `react-dates` ships with is the [CSS interface](https:\u002F\u002Fgithub.com\u002Fairbnb\u002Freact-with-styles-interface-css). If you want to use this interface along with the theme registration method, you will need to rebuild the core `_datepicker.css` file. We do not currently expose a utility method to build this file, but you can follow along with the code in https:\u002F\u002Fgithub.com\u002Freact-dates\u002Freact-dates\u002Fblob\u002FHEAD\u002Fscripts\u002FbuildCSS.js to build your own custom themed CSS file.\n\n[package-url]: https:\u002F\u002Fnpmjs.org\u002Fpackage\u002Freact-dates\n[npm-version-svg]: http:\u002F\u002Fversionbadg.es\u002Freact-dates\u002Freact-dates.svg\n[travis-svg]: https:\u002F\u002Ftravis-ci.org\u002Freact-dates\u002Freact-dates.svg\n[travis-url]: https:\u002F\u002Ftravis-ci.org\u002Freact-dates\u002Freact-dates\n[deps-svg]: https:\u002F\u002Fdavid-dm.org\u002Freact-dates\u002Freact-dates.svg\n[deps-url]: https:\u002F\u002Fdavid-dm.org\u002Freact-dates\u002Freact-dates\n[dev-deps-svg]: https:\u002F\u002Fdavid-dm.org\u002Freact-dates\u002Freact-dates\u002Fdev-status.svg\n[dev-deps-url]: https:\u002F\u002Fdavid-dm.org\u002Freact-dates\u002Freact-dates#info=devDependencies\n[npm-badge-png]: https:\u002F\u002Fnodei.co\u002Fnpm\u002Freact-dates.png?downloads=true&stars=true\n[license-image]: http:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fl\u002Freact-dates.svg\n[license-url]: LICENSE\n[downloads-image]: http:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002Freact-dates.svg\n[downloads-url]: http:\u002F\u002Fnpm-stat.com\u002Fcharts.html?package=react-dates\n","react-dates 是一个易于国际化、支持无障碍访问且对移动设备友好的网页日期选择器库。它提供了丰富的核心功能，如单日和日期范围的选择，并支持自定义样式和类名设置。基于 React 构建，利用了 `react-with-styles` 使得样式管理更加灵活。适用于需要在 Web 应用中集成用户友好型日期选择界面的各种场景，特别是在追求良好用户体验和跨平台兼容性的项目中表现尤为突出。",2,"2026-06-11 02:54:31","top_language"]