Skip to content
BranchesTags

Repository files navigation

React Date Picker

npm versionTest suitecodecovDownloads

A simple and reusable Datepicker component for React (Demo)

Installation

The package can be installed via npm:

npm install react-datepicker --save

Or via yarn:

yarn add react-datepicker

You’ll need to install React and PropTypes separately since those dependencies aren’t included in the package. If you need to use a locale other than the default en-US, you'll also need to import that into your project from date-fns (see Localization section below). Below is a simple example of how to use the Datepicker in a React view. You will also need to require the CSS file from this package (or provide your own). The example below shows how to include the CSS from this package if your build system supports requiring CSS files (Webpack is one that does).

importReact,{useState}from"react";importDatePickerfrom"react-datepicker";import"react-datepicker/dist/react-datepicker.css";// CSS Modules, react-datepicker-cssmodules.css// import 'react-datepicker/dist/react-datepicker-cssmodules.css';constExample=()=>{const[startDate,setStartDate]=useState(newDate());return<DatePickerselected={startDate}onChange={(date)=>setStartDate(date)}/>;};

Configuration

The most basic use of the DatePicker can be described with:

<DatePickerselected={startdate}onChange={(date)=>setStartDate(date)}/>

You can use onSelect event handler which fires each time some calendar date has been selected

<DatePickerselected={date}onSelect={handleDateSelect}//when day is clickedonChange={handleDateChange}//only when value has changed/>

onClickOutside handler may be useful to close datepicker in inline mode

See here for a full list of props that may be passed to the component. Examples are given on the main website.

Time picker

You can also include a time picker by adding the showTimeSelect prop

<DatePickerselected={date}onChange={handleDateChange}showTimeSelectdateFormat="Pp"/>

Times will be displayed at 30-minute intervals by default (default configurable via timeIntervals prop)

More examples of how to use the time picker are given on the main website

Localization

The date picker relies on date-fns internationalization to localize its display components. By default, the date picker will use the locale globally set, which is English. Provided are 3 helper methods to set the locale:

  • registerLocale (string, object): loads an imported locale object from date-fns
  • setDefaultLocale (string): sets a registered locale as the default for all datepicker instances
  • getDefaultLocale: returns a string showing the currently set default locale
import{registerLocale,setDefaultLocale}from"react-datepicker";import{es}from'date-fns/locale/es';registerLocale('es',es)<DatePickerlocale="es"/>

Locales can be changed in the following way:

  • Globally - setDefaultLocale('es');

Compatibility

React

We're always trying to stay compatible with the latest version of React. We can't support all older versions of React.

Latest compatible versions:

  • React 16 or newer: React-datepicker v2.9.4 and newer
  • React 15.5: React-datepicker v2.9.3
  • React 15.4.1: needs React-datepicker v0.40.0, newer won't work (due to react-onclickoutside dependencies)
  • React 0.14 or newer: All above React-datepicker v0.13.0
  • React 0.13: React-datepicker v0.13.0
  • pre React 0.13: React-datepicker v0.6.2

Moment.js

Up until version 1.8.0, this package was using Moment.js. Starting v2.0.0, we switched to using date-fns, which uses native Date objects, to reduce the size of the package. If you're switching from 1.8.0 to 2.0.0 or higher, please see the updated example above of check out the examples site for up to date examples.

Browser Support

The date picker is compatible with the latest versions of Chrome, Firefox, and IE10+.

Unfortunately, it is difficult to support legacy browsers while maintaining our ability to develop new features in the future. For IE9 support, it is known that the classlist polyfill is needed, but this may change or break at any point in the future.

Local Development

The main branch contains the latest version of the Datepicker component.

To begin local development:

  1. Run yarn install from project root
  2. Run yarn build from project root
  3. Run yarn start from project root

The last step starts documentation app as a simple webserver on http://localhost:5173.

You can run yarn test to execute the test suite and linters. To help you develop the component we’ve set up some tests that cover the basic functionality (can be found in /tests). Even though we’re big fans of testing, this only covers a small piece of the component. We highly recommend you add tests when you’re adding new functionality.

Please refer to CONTRIBUTING.md file for more details about getting set up.

The examples

The examples are hosted within the docs folder and are ran in the simple app that loads the Datepicker. To extend the examples with a new example, you can simply duplicate one of the existing examples and change the unique properties of your example.

Accessibility

Keyboard support

  • Left: Move to the previous day.
  • Right: Move to the next day.
  • Up: Move to the previous week.
  • Down: Move to the next week.
  • PgUp: Move to the previous month.
  • Shift+PgUp: Move to the same day and month of the previous year. If that day does not exist, moves focus to the last day of the month.
  • PgDn: Move to the next month.
  • Shift+PgDn: Move to the same day and month of the next year. If that day does not exist, moves focus to the last day of the month.
  • Home: Move to the first day (e.g Sunday) of the current week.
  • End: Move to the last day (e.g. Saturday) of the current week.
  • Enter/Esc/Tab: close the calendar. (Enter & Esc calls preventDefault)

For month picker

  • Left: Move to the previous month.
  • Right: Move to the next month.
  • Enter: Select date and close the calendar

License

Copyright (c) 2014-2025 HackerOne Inc. and individual contributors. Licensed under MIT license, see LICENSE for the full license.

About

No description, website, or topics provided.

Resources

Readme
MIT license

Code of conduct

Code of conduct

Contributing

Contributing

Security policy

Security policy
Activity

Stars

7 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
GitHub - chdcgood85/react-datepicker · GitHub
Skip to content
BranchesTags
Repository files navigation
React Date Picker
npm versionTest suitecodecovDownloads
A simple and reusable Datepicker component for React (Demo)
Installation
The package can be installed via npm:
npm install react-datepicker --save

Or via yarn:
yarn add react-datepicker

You’ll need to install React and PropTypes separately since those dependencies aren’t included in the package. If you need to use a locale other than the default en-US, you'll also need to import that into your project from date-fns (see Localization section below). Below is a simple example of how to use the Datepicker in a React view. You will also need to require the CSS file from this package (or provide your own). The example below shows how to include the CSS from this package if your build system supports requiring CSS files (Webpack is one that does).
importReact,{useState}from"react";importDatePickerfrom"react-datepicker";import"react-datepicker/dist/react-datepicker.css";// CSS Modules, react-datepicker-cssmodules.css// import 'react-datepicker/dist/react-datepicker-cssmodules.css';constExample=()=>{const[startDate,setStartDate]=useState(newDate());return<DatePickerselected={startDate}onChange={(date)=>setStartDate(date)}/>;};
Configuration
The most basic use of the DatePicker can be described with:
<DatePickerselected={startdate}onChange={(date)=>setStartDate(date)}/>
You can use onSelect event handler which fires each time some calendar date has been selected
<DatePickerselected={date}onSelect={handleDateSelect}//when day is clickedonChange={handleDateChange}//only when value has changed/>
onClickOutside handler may be useful to close datepicker in inline mode
See here for a full list of props that may be passed to the component. Examples are given on the main website.
Time picker
You can also include a time picker by adding the showTimeSelect prop
<DatePickerselected={date}onChange={handleDateChange}showTimeSelectdateFormat="Pp"/>
Times will be displayed at 30-minute intervals by default (default configurable via timeIntervals prop)
More examples of how to use the time picker are given on the main website
Localization
The date picker relies on date-fns internationalization to localize its display components. By default, the date picker will use the locale globally set, which is English. Provided are 3 helper methods to set the locale:
  • registerLocale (string, object): loads an imported locale object from date-fns
  • setDefaultLocale (string): sets a registered locale as the default for all datepicker instances
  • getDefaultLocale: returns a string showing the currently set default locale
import{registerLocale,setDefaultLocale}from"react-datepicker";import{es}from'date-fns/locale/es';registerLocale('es',es)<DatePickerlocale="es"/>
Locales can be changed in the following way:
  • Globally - setDefaultLocale('es');
Compatibility
React
We're always trying to stay compatible with the latest version of React. We can't support all older versions of React.
Latest compatible versions:
  • React 16 or newer: React-datepicker v2.9.4 and newer
  • React 15.5: React-datepicker v2.9.3
  • React 15.4.1: needs React-datepicker v0.40.0, newer won't work (due to react-onclickoutside dependencies)
  • React 0.14 or newer: All above React-datepicker v0.13.0
  • React 0.13: React-datepicker v0.13.0
  • pre React 0.13: React-datepicker v0.6.2
Moment.js
Up until version 1.8.0, this package was using Moment.js. Starting v2.0.0, we switched to using date-fns, which uses native Date objects, to reduce the size of the package. If you're switching from 1.8.0 to 2.0.0 or higher, please see the updated example above of check out the examples site for up to date examples.
Browser Support
The date picker is compatible with the latest versions of Chrome, Firefox, and IE10+.
Unfortunately, it is difficult to support legacy browsers while maintaining our ability to develop new features in the future. For IE9 support, it is known that the classlist polyfill is needed, but this may change or break at any point in the future.
Local Development
The main branch contains the latest version of the Datepicker component.
To begin local development:
  1. Run yarn install from project root
  2. Run yarn build from project root
  3. Run yarn start from project root
The last step starts documentation app as a simple webserver on http://localhost:5173.
You can run yarn test to execute the test suite and linters. To help you develop the component we’ve set up some tests that cover the basic functionality (can be found in /tests). Even though we’re big fans of testing, this only covers a small piece of the component. We highly recommend you add tests when you’re adding new functionality.
Please refer to CONTRIBUTING.md file for more details about getting set up.
The examples
The examples are hosted within the docs folder and are ran in the simple app that loads the Datepicker. To extend the examples with a new example, you can simply duplicate one of the existing examples and change the unique properties of your example.
Accessibility
Keyboard support
  • Left: Move to the previous day.
  • Right: Move to the next day.
  • Up: Move to the previous week.
  • Down: Move to the next week.
  • PgUp: Move to the previous month.
  • Shift+PgUp: Move to the same day and month of the previous year. If that day does not exist, moves focus to the last day of the month.
  • PgDn: Move to the next month.
  • Shift+PgDn: Move to the same day and month of the next year. If that day does not exist, moves focus to the last day of the month.
  • Home: Move to the first day (e.g Sunday) of the current week.
  • End: Move to the last day (e.g. Saturday) of the current week.
  • Enter/Esc/Tab: close the calendar. (Enter & Esc calls preventDefault)
For month picker
  • Left: Move to the previous month.
  • Right: Move to the next month.
  • Enter: Select date and close the calendar
License
Copyright (c) 2014-2025 HackerOne Inc. and individual contributors. Licensed under MIT license, see LICENSE for the full license.
About
No description, website, or topics provided.
Resources
Readme
MIT license
Code of conduct
Code of conduct
Contributing
Contributing
Security policy
Security policy
Activity
Stars
7 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - chdcgood85/react-datepicker · GitHub
Skip to content
BranchesTags
Repository files navigation
React Date Picker
npm versionTest suitecodecovDownloads
A simple and reusable Datepicker component for React (Demo)
Installation
The package can be installed via npm:
npm install react-datepicker --save

Or via yarn:
yarn add react-datepicker

You’ll need to install React and PropTypes separately since those dependencies aren’t included in the package. If you need to use a locale other than the default en-US, you'll also need to import that into your project from date-fns (see Localization section below). Below is a simple example of how to use the Datepicker in a React view. You will also need to require the CSS file from this package (or provide your own). The example below shows how to include the CSS from this package if your build system supports requiring CSS files (Webpack is one that does).
importReact,{useState}from"react";importDatePickerfrom"react-datepicker";import"react-datepicker/dist/react-datepicker.css";// CSS Modules, react-datepicker-cssmodules.css// import 'react-datepicker/dist/react-datepicker-cssmodules.css';constExample=()=>{const[startDate,setStartDate]=useState(newDate());return<DatePickerselected={startDate}onChange={(date)=>setStartDate(date)}/>;};
Configuration
The most basic use of the DatePicker can be described with:
<DatePickerselected={startdate}onChange={(date)=>setStartDate(date)}/>
You can use onSelect event handler which fires each time some calendar date has been selected
<DatePickerselected={date}onSelect={handleDateSelect}//when day is clickedonChange={handleDateChange}//only when value has changed/>
onClickOutside handler may be useful to close datepicker in inline mode
See here for a full list of props that may be passed to the component. Examples are given on the main website.
Time picker
You can also include a time picker by adding the showTimeSelect prop
<DatePickerselected={date}onChange={handleDateChange}showTimeSelectdateFormat="Pp"/>
Times will be displayed at 30-minute intervals by default (default configurable via timeIntervals prop)
More examples of how to use the time picker are given on the main website
Localization
The date picker relies on date-fns internationalization to localize its display components. By default, the date picker will use the locale globally set, which is English. Provided are 3 helper methods to set the locale:
  • registerLocale (string, object): loads an imported locale object from date-fns
  • setDefaultLocale (string): sets a registered locale as the default for all datepicker instances
  • getDefaultLocale: returns a string showing the currently set default locale
import{registerLocale,setDefaultLocale}from"react-datepicker";import{es}from'date-fns/locale/es';registerLocale('es',es)<DatePickerlocale="es"/>
Locales can be changed in the following way:
  • Globally - setDefaultLocale('es');
Compatibility
React
We're always trying to stay compatible with the latest version of React. We can't support all older versions of React.
Latest compatible versions:
  • React 16 or newer: React-datepicker v2.9.4 and newer
  • React 15.5: React-datepicker v2.9.3
  • React 15.4.1: needs React-datepicker v0.40.0, newer won't work (due to react-onclickoutside dependencies)
  • React 0.14 or newer: All above React-datepicker v0.13.0
  • React 0.13: React-datepicker v0.13.0
  • pre React 0.13: React-datepicker v0.6.2
Moment.js
Up until version 1.8.0, this package was using Moment.js. Starting v2.0.0, we switched to using date-fns, which uses native Date objects, to reduce the size of the package. If you're switching from 1.8.0 to 2.0.0 or higher, please see the updated example above of check out the examples site for up to date examples.
Browser Support
The date picker is compatible with the latest versions of Chrome, Firefox, and IE10+.
Unfortunately, it is difficult to support legacy browsers while maintaining our ability to develop new features in the future. For IE9 support, it is known that the classlist polyfill is needed, but this may change or break at any point in the future.
Local Development
The main branch contains the latest version of the Datepicker component.
To begin local development:
  1. Run yarn install from project root
  2. Run yarn build from project root
  3. Run yarn start from project root
The last step starts documentation app as a simple webserver on http://localhost:5173.
You can run yarn test to execute the test suite and linters. To help you develop the component we’ve set up some tests that cover the basic functionality (can be found in /tests). Even though we’re big fans of testing, this only covers a small piece of the component. We highly recommend you add tests when you’re adding new functionality.
Please refer to CONTRIBUTING.md file for more details about getting set up.
The examples
The examples are hosted within the docs folder and are ran in the simple app that loads the Datepicker. To extend the examples with a new example, you can simply duplicate one of the existing examples and change the unique properties of your example.
Accessibility
Keyboard support
  • Left: Move to the previous day.
  • Right: Move to the next day.
  • Up: Move to the previous week.
  • Down: Move to the next week.
  • PgUp: Move to the previous month.
  • Shift+PgUp: Move to the same day and month of the previous year. If that day does not exist, moves focus to the last day of the month.
  • PgDn: Move to the next month.
  • Shift+PgDn: Move to the same day and month of the next year. If that day does not exist, moves focus to the last day of the month.
  • Home: Move to the first day (e.g Sunday) of the current week.
  • End: Move to the last day (e.g. Saturday) of the current week.
  • Enter/Esc/Tab: close the calendar. (Enter & Esc calls preventDefault)
For month picker
  • Left: Move to the previous month.
  • Right: Move to the next month.
  • Enter: Select date and close the calendar
License
Copyright (c) 2014-2025 HackerOne Inc. and individual contributors. Licensed under MIT license, see LICENSE for the full license.
About
No description, website, or topics provided.
Resources
Readme
MIT license
Code of conduct
Code of conduct
Contributing
Contributing
Security policy
Security policy
Activity
Stars
7 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - chdcgood85/react-datepicker · GitHub
Skip to content
BranchesTags
Repository files navigation
React Date Picker
npm versionTest suitecodecovDownloads
A simple and reusable Datepicker component for React (Demo)
Installation
The package can be installed via npm:
npm install react-datepicker --save

Or via yarn:
yarn add react-datepicker

You’ll need to install React and PropTypes separately since those dependencies aren’t included in the package. If you need to use a locale other than the default en-US, you'll also need to import that into your project from date-fns (see Localization section below). Below is a simple example of how to use the Datepicker in a React view. You will also need to require the CSS file from this package (or provide your own). The example below shows how to include the CSS from this package if your build system supports requiring CSS files (Webpack is one that does).
importReact,{useState}from"react";importDatePickerfrom"react-datepicker";import"react-datepicker/dist/react-datepicker.css";// CSS Modules, react-datepicker-cssmodules.css// import 'react-datepicker/dist/react-datepicker-cssmodules.css';constExample=()=>{const[startDate,setStartDate]=useState(newDate());return<DatePickerselected={startDate}onChange={(date)=>setStartDate(date)}/>;};
Configuration
The most basic use of the DatePicker can be described with:
<DatePickerselected={startdate}onChange={(date)=>setStartDate(date)}/>
You can use onSelect event handler which fires each time some calendar date has been selected
<DatePickerselected={date}onSelect={handleDateSelect}//when day is clickedonChange={handleDateChange}//only when value has changed/>
onClickOutside handler may be useful to close datepicker in inline mode
See here for a full list of props that may be passed to the component. Examples are given on the main website.
Time picker
You can also include a time picker by adding the showTimeSelect prop
<DatePickerselected={date}onChange={handleDateChange}showTimeSelectdateFormat="Pp"/>
Times will be displayed at 30-minute intervals by default (default configurable via timeIntervals prop)
More examples of how to use the time picker are given on the main website
Localization
The date picker relies on date-fns internationalization to localize its display components. By default, the date picker will use the locale globally set, which is English. Provided are 3 helper methods to set the locale:
  • registerLocale (string, object): loads an imported locale object from date-fns
  • setDefaultLocale (string): sets a registered locale as the default for all datepicker instances
  • getDefaultLocale: returns a string showing the currently set default locale
import{registerLocale,setDefaultLocale}from"react-datepicker";import{es}from'date-fns/locale/es';registerLocale('es',es)<DatePickerlocale="es"/>
Locales can be changed in the following way:
  • Globally - setDefaultLocale('es');
Compatibility
React
We're always trying to stay compatible with the latest version of React. We can't support all older versions of React.
Latest compatible versions:
  • React 16 or newer: React-datepicker v2.9.4 and newer
  • React 15.5: React-datepicker v2.9.3
  • React 15.4.1: needs React-datepicker v0.40.0, newer won't work (due to react-onclickoutside dependencies)
  • React 0.14 or newer: All above React-datepicker v0.13.0
  • React 0.13: React-datepicker v0.13.0
  • pre React 0.13: React-datepicker v0.6.2
Moment.js
Up until version 1.8.0, this package was using Moment.js. Starting v2.0.0, we switched to using date-fns, which uses native Date objects, to reduce the size of the package. If you're switching from 1.8.0 to 2.0.0 or higher, please see the updated example above of check out the examples site for up to date examples.
Browser Support
The date picker is compatible with the latest versions of Chrome, Firefox, and IE10+.
Unfortunately, it is difficult to support legacy browsers while maintaining our ability to develop new features in the future. For IE9 support, it is known that the classlist polyfill is needed, but this may change or break at any point in the future.
Local Development
The main branch contains the latest version of the Datepicker component.
To begin local development:
  1. Run yarn install from project root
  2. Run yarn build from project root
  3. Run yarn start from project root
The last step starts documentation app as a simple webserver on http://localhost:5173.
You can run yarn test to execute the test suite and linters. To help you develop the component we’ve set up some tests that cover the basic functionality (can be found in /tests). Even though we’re big fans of testing, this only covers a small piece of the component. We highly recommend you add tests when you’re adding new functionality.
Please refer to CONTRIBUTING.md file for more details about getting set up.
The examples
The examples are hosted within the docs folder and are ran in the simple app that loads the Datepicker. To extend the examples with a new example, you can simply duplicate one of the existing examples and change the unique properties of your example.
Accessibility
Keyboard support
  • Left: Move to the previous day.
  • Right: Move to the next day.
  • Up: Move to the previous week.
  • Down: Move to the next week.
  • PgUp: Move to the previous month.
  • Shift+PgUp: Move to the same day and month of the previous year. If that day does not exist, moves focus to the last day of the month.
  • PgDn: Move to the next month.
  • Shift+PgDn: Move to the same day and month of the next year. If that day does not exist, moves focus to the last day of the month.
  • Home: Move to the first day (e.g Sunday) of the current week.
  • End: Move to the last day (e.g. Saturday) of the current week.
  • Enter/Esc/Tab: close the calendar. (Enter & Esc calls preventDefault)
For month picker
  • Left: Move to the previous month.
  • Right: Move to the next month.
  • Enter: Select date and close the calendar
License
Copyright (c) 2014-2025 HackerOne Inc. and individual contributors. Licensed under MIT license, see LICENSE for the full license.
About
No description, website, or topics provided.
Resources
Readme
MIT license
Code of conduct
Code of conduct
Contributing
Contributing
Security policy
Security policy
Activity
Stars
7 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
GitHub - chdcgood85/react-datepicker · GitHub
Skip to content
BranchesTags
Repository files navigation
React Date Picker
npm versionTest suitecodecovDownloads
A simple and reusable Datepicker component for React (Demo)
Installation
The package can be installed via npm:
npm install react-datepicker --save

Or via yarn:
yarn add react-datepicker

You’ll need to install React and PropTypes separately since those dependencies aren’t included in the package. If you need to use a locale other than the default en-US, you'll also need to import that into your project from date-fns (see Localization section below). Below is a simple example of how to use the Datepicker in a React view. You will also need to require the CSS file from this package (or provide your own). The example below shows how to include the CSS from this package if your build system supports requiring CSS files (Webpack is one that does).
importReact,{useState}from"react";importDatePickerfrom"react-datepicker";import"react-datepicker/dist/react-datepicker.css";// CSS Modules, react-datepicker-cssmodules.css// import 'react-datepicker/dist/react-datepicker-cssmodules.css';constExample=()=>{const[startDate,setStartDate]=useState(newDate());return<DatePickerselected={startDate}onChange={(date)=>setStartDate(date)}/>;};
Configuration
The most basic use of the DatePicker can be described with:
<DatePickerselected={startdate}onChange={(date)=>setStartDate(date)}/>
You can use onSelect event handler which fires each time some calendar date has been selected
<DatePickerselected={date}onSelect={handleDateSelect}//when day is clickedonChange={handleDateChange}//only when value has changed/>
onClickOutside handler may be useful to close datepicker in inline mode
See here for a full list of props that may be passed to the component. Examples are given on the main website.
Time picker
You can also include a time picker by adding the showTimeSelect prop
<DatePickerselected={date}onChange={handleDateChange}showTimeSelectdateFormat="Pp"/>
Times will be displayed at 30-minute intervals by default (default configurable via timeIntervals prop)
More examples of how to use the time picker are given on the main website
Localization
The date picker relies on date-fns internationalization to localize its display components. By default, the date picker will use the locale globally set, which is English. Provided are 3 helper methods to set the locale:
  • registerLocale (string, object): loads an imported locale object from date-fns
  • setDefaultLocale (string): sets a registered locale as the default for all datepicker instances
  • getDefaultLocale: returns a string showing the currently set default locale
import{registerLocale,setDefaultLocale}from"react-datepicker";import{es}from'date-fns/locale/es';registerLocale('es',es)<DatePickerlocale="es"/>
Locales can be changed in the following way:
  • Globally - setDefaultLocale('es');
Compatibility
React
We're always trying to stay compatible with the latest version of React. We can't support all older versions of React.
Latest compatible versions:
  • React 16 or newer: React-datepicker v2.9.4 and newer
  • React 15.5: React-datepicker v2.9.3
  • React 15.4.1: needs React-datepicker v0.40.0, newer won't work (due to react-onclickoutside dependencies)
  • React 0.14 or newer: All above React-datepicker v0.13.0
  • React 0.13: React-datepicker v0.13.0
  • pre React 0.13: React-datepicker v0.6.2
Moment.js
Up until version 1.8.0, this package was using Moment.js. Starting v2.0.0, we switched to using date-fns, which uses native Date objects, to reduce the size of the package. If you're switching from 1.8.0 to 2.0.0 or higher, please see the updated example above of check out the examples site for up to date examples.
Browser Support
The date picker is compatible with the latest versions of Chrome, Firefox, and IE10+.
Unfortunately, it is difficult to support legacy browsers while maintaining our ability to develop new features in the future. For IE9 support, it is known that the classlist polyfill is needed, but this may change or break at any point in the future.
Local Development
The main branch contains the latest version of the Datepicker component.
To begin local development:
  1. Run yarn install from project root
  2. Run yarn build from project root
  3. Run yarn start from project root
The last step starts documentation app as a simple webserver on http://localhost:5173.
You can run yarn test to execute the test suite and linters. To help you develop the component we’ve set up some tests that cover the basic functionality (can be found in /tests). Even though we’re big fans of testing, this only covers a small piece of the component. We highly recommend you add tests when you’re adding new functionality.
Please refer to CONTRIBUTING.md file for more details about getting set up.
The examples
The examples are hosted within the docs folder and are ran in the simple app that loads the Datepicker. To extend the examples with a new example, you can simply duplicate one of the existing examples and change the unique properties of your example.
Accessibility
Keyboard support
  • Left: Move to the previous day.
  • Right: Move to the next day.
  • Up: Move to the previous week.
  • Down: Move to the next week.
  • PgUp: Move to the previous month.
  • Shift+PgUp: Move to the same day and month of the previous year. If that day does not exist, moves focus to the last day of the month.
  • PgDn: Move to the next month.
  • Shift+PgDn: Move to the same day and month of the next year. If that day does not exist, moves focus to the last day of the month.
  • Home: Move to the first day (e.g Sunday) of the current week.
  • End: Move to the last day (e.g. Saturday) of the current week.
  • Enter/Esc/Tab: close the calendar. (Enter & Esc calls preventDefault)
For month picker
  • Left: Move to the previous month.
  • Right: Move to the next month.
  • Enter: Select date and close the calendar
License
Copyright (c) 2014-2025 HackerOne Inc. and individual contributors. Licensed under MIT license, see LICENSE for the full license.
About
No description, website, or topics provided.
Resources
Readme
MIT license
Code of conduct
Code of conduct
Contributing
Contributing
Security policy
Security policy
Activity
Stars
7 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - chdcgood85/react-datepicker · GitHub
Skip to content
BranchesTags
Repository files navigation
React Date Picker
npm versionTest suitecodecovDownloads
A simple and reusable Datepicker component for React (Demo)
Installation
The package can be installed via npm:
npm install react-datepicker --save

Or via yarn:
yarn add react-datepicker

You’ll need to install React and PropTypes separately since those dependencies aren’t included in the package. If you need to use a locale other than the default en-US, you'll also need to import that into your project from date-fns (see Localization section below). Below is a simple example of how to use the Datepicker in a React view. You will also need to require the CSS file from this package (or provide your own). The example below shows how to include the CSS from this package if your build system supports requiring CSS files (Webpack is one that does).
importReact,{useState}from"react";importDatePickerfrom"react-datepicker";import"react-datepicker/dist/react-datepicker.css";// CSS Modules, react-datepicker-cssmodules.css// import 'react-datepicker/dist/react-datepicker-cssmodules.css';constExample=()=>{const[startDate,setStartDate]=useState(newDate());return<DatePickerselected={startDate}onChange={(date)=>setStartDate(date)}/>;};
Configuration
The most basic use of the DatePicker can be described with:
<DatePickerselected={startdate}onChange={(date)=>setStartDate(date)}/>
You can use onSelect event handler which fires each time some calendar date has been selected
<DatePickerselected={date}onSelect={handleDateSelect}//when day is clickedonChange={handleDateChange}//only when value has changed/>
onClickOutside handler may be useful to close datepicker in inline mode
See here for a full list of props that may be passed to the component. Examples are given on the main website.
Time picker
You can also include a time picker by adding the showTimeSelect prop
<DatePickerselected={date}onChange={handleDateChange}showTimeSelectdateFormat="Pp"/>
Times will be displayed at 30-minute intervals by default (default configurable via timeIntervals prop)
More examples of how to use the time picker are given on the main website
Localization
The date picker relies on date-fns internationalization to localize its display components. By default, the date picker will use the locale globally set, which is English. Provided are 3 helper methods to set the locale:
  • registerLocale (string, object): loads an imported locale object from date-fns
  • setDefaultLocale (string): sets a registered locale as the default for all datepicker instances
  • getDefaultLocale: returns a string showing the currently set default locale
import{registerLocale,setDefaultLocale}from"react-datepicker";import{es}from'date-fns/locale/es';registerLocale('es',es)<DatePickerlocale="es"/>
Locales can be changed in the following way:
  • Globally - setDefaultLocale('es');
Compatibility
React
We're always trying to stay compatible with the latest version of React. We can't support all older versions of React.
Latest compatible versions:
  • React 16 or newer: React-datepicker v2.9.4 and newer
  • React 15.5: React-datepicker v2.9.3
  • React 15.4.1: needs React-datepicker v0.40.0, newer won't work (due to react-onclickoutside dependencies)
  • React 0.14 or newer: All above React-datepicker v0.13.0
  • React 0.13: React-datepicker v0.13.0
  • pre React 0.13: React-datepicker v0.6.2
Moment.js
Up until version 1.8.0, this package was using Moment.js. Starting v2.0.0, we switched to using date-fns, which uses native Date objects, to reduce the size of the package. If you're switching from 1.8.0 to 2.0.0 or higher, please see the updated example above of check out the examples site for up to date examples.
Browser Support
The date picker is compatible with the latest versions of Chrome, Firefox, and IE10+.
Unfortunately, it is difficult to support legacy browsers while maintaining our ability to develop new features in the future. For IE9 support, it is known that the classlist polyfill is needed, but this may change or break at any point in the future.
Local Development
The main branch contains the latest version of the Datepicker component.
To begin local development:
  1. Run yarn install from project root
  2. Run yarn build from project root
  3. Run yarn start from project root
The last step starts documentation app as a simple webserver on http://localhost:5173.
You can run yarn test to execute the test suite and linters. To help you develop the component we’ve set up some tests that cover the basic functionality (can be found in /tests). Even though we’re big fans of testing, this only covers a small piece of the component. We highly recommend you add tests when you’re adding new functionality.
Please refer to CONTRIBUTING.md file for more details about getting set up.
The examples
The examples are hosted within the docs folder and are ran in the simple app that loads the Datepicker. To extend the examples with a new example, you can simply duplicate one of the existing examples and change the unique properties of your example.
Accessibility
Keyboard support
  • Left: Move to the previous day.
  • Right: Move to the next day.
  • Up: Move to the previous week.
  • Down: Move to the next week.
  • PgUp: Move to the previous month.
  • Shift+PgUp: Move to the same day and month of the previous year. If that day does not exist, moves focus to the last day of the month.
  • PgDn: Move to the next month.
  • Shift+PgDn: Move to the same day and month of the next year. If that day does not exist, moves focus to the last day of the month.
  • Home: Move to the first day (e.g Sunday) of the current week.
  • End: Move to the last day (e.g. Saturday) of the current week.
  • Enter/Esc/Tab: close the calendar. (Enter & Esc calls preventDefault)
For month picker
  • Left: Move to the previous month.
  • Right: Move to the next month.
  • Enter: Select date and close the calendar
License
Copyright (c) 2014-2025 HackerOne Inc. and individual contributors. Licensed under MIT license, see LICENSE for the full license.
About
No description, website, or topics provided.
Resources
Readme
MIT license
Code of conduct
Code of conduct
Contributing
Contributing
Security policy
Security policy
Activity
Stars
7 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - chdcgood85/react-datepicker · GitHub
Skip to content
BranchesTags
Repository files navigation
React Date Picker
npm versionTest suitecodecovDownloads
A simple and reusable Datepicker component for React (Demo)
Installation
The package can be installed via npm:
npm install react-datepicker --save

Or via yarn:
yarn add react-datepicker

You’ll need to install React and PropTypes separately since those dependencies aren’t included in the package. If you need to use a locale other than the default en-US, you'll also need to import that into your project from date-fns (see Localization section below). Below is a simple example of how to use the Datepicker in a React view. You will also need to require the CSS file from this package (or provide your own). The example below shows how to include the CSS from this package if your build system supports requiring CSS files (Webpack is one that does).
importReact,{useState}from"react";importDatePickerfrom"react-datepicker";import"react-datepicker/dist/react-datepicker.css";// CSS Modules, react-datepicker-cssmodules.css// import 'react-datepicker/dist/react-datepicker-cssmodules.css';constExample=()=>{const[startDate,setStartDate]=useState(newDate());return<DatePickerselected={startDate}onChange={(date)=>setStartDate(date)}/>;};
Configuration
The most basic use of the DatePicker can be described with:
<DatePickerselected={startdate}onChange={(date)=>setStartDate(date)}/>
You can use onSelect event handler which fires each time some calendar date has been selected
<DatePickerselected={date}onSelect={handleDateSelect}//when day is clickedonChange={handleDateChange}//only when value has changed/>
onClickOutside handler may be useful to close datepicker in inline mode
See here for a full list of props that may be passed to the component. Examples are given on the main website.
Time picker
You can also include a time picker by adding the showTimeSelect prop
<DatePickerselected={date}onChange={handleDateChange}showTimeSelectdateFormat="Pp"/>
Times will be displayed at 30-minute intervals by default (default configurable via timeIntervals prop)
More examples of how to use the time picker are given on the main website
Localization
The date picker relies on date-fns internationalization to localize its display components. By default, the date picker will use the locale globally set, which is English. Provided are 3 helper methods to set the locale:
  • registerLocale (string, object): loads an imported locale object from date-fns
  • setDefaultLocale (string): sets a registered locale as the default for all datepicker instances
  • getDefaultLocale: returns a string showing the currently set default locale
import{registerLocale,setDefaultLocale}from"react-datepicker";import{es}from'date-fns/locale/es';registerLocale('es',es)<DatePickerlocale="es"/>
Locales can be changed in the following way:
  • Globally - setDefaultLocale('es');
Compatibility
React
We're always trying to stay compatible with the latest version of React. We can't support all older versions of React.
Latest compatible versions:
  • React 16 or newer: React-datepicker v2.9.4 and newer
  • React 15.5: React-datepicker v2.9.3
  • React 15.4.1: needs React-datepicker v0.40.0, newer won't work (due to react-onclickoutside dependencies)
  • React 0.14 or newer: All above React-datepicker v0.13.0
  • React 0.13: React-datepicker v0.13.0
  • pre React 0.13: React-datepicker v0.6.2
Moment.js
Up until version 1.8.0, this package was using Moment.js. Starting v2.0.0, we switched to using date-fns, which uses native Date objects, to reduce the size of the package. If you're switching from 1.8.0 to 2.0.0 or higher, please see the updated example above of check out the examples site for up to date examples.
Browser Support
The date picker is compatible with the latest versions of Chrome, Firefox, and IE10+.
Unfortunately, it is difficult to support legacy browsers while maintaining our ability to develop new features in the future. For IE9 support, it is known that the classlist polyfill is needed, but this may change or break at any point in the future.
Local Development
The main branch contains the latest version of the Datepicker component.
To begin local development:
  1. Run yarn install from project root
  2. Run yarn build from project root
  3. Run yarn start from project root
The last step starts documentation app as a simple webserver on http://localhost:5173.
You can run yarn test to execute the test suite and linters. To help you develop the component we’ve set up some tests that cover the basic functionality (can be found in /tests). Even though we’re big fans of testing, this only covers a small piece of the component. We highly recommend you add tests when you’re adding new functionality.
Please refer to CONTRIBUTING.md file for more details about getting set up.
The examples
The examples are hosted within the docs folder and are ran in the simple app that loads the Datepicker. To extend the examples with a new example, you can simply duplicate one of the existing examples and change the unique properties of your example.
Accessibility
Keyboard support
  • Left: Move to the previous day.
  • Right: Move to the next day.
  • Up: Move to the previous week.
  • Down: Move to the next week.
  • PgUp: Move to the previous month.
  • Shift+PgUp: Move to the same day and month of the previous year. If that day does not exist, moves focus to the last day of the month.
  • PgDn: Move to the next month.
  • Shift+PgDn: Move to the same day and month of the next year. If that day does not exist, moves focus to the last day of the month.
  • Home: Move to the first day (e.g Sunday) of the current week.
  • End: Move to the last day (e.g. Saturday) of the current week.
  • Enter/Esc/Tab: close the calendar. (Enter & Esc calls preventDefault)
For month picker
  • Left: Move to the previous month.
  • Right: Move to the next month.
  • Enter: Select date and close the calendar
License
Copyright (c) 2014-2025 HackerOne Inc. and individual contributors. Licensed under MIT license, see LICENSE for the full license.
About
No description, website, or topics provided.
Resources
Readme
MIT license
Code of conduct
Code of conduct
Contributing
Contributing
Security policy
Security policy
Activity
Stars
7 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
GitHub - chdcgood85/react-datepicker · GitHub
Skip to content
BranchesTags
Repository files navigation
React Date Picker
npm versionTest suitecodecovDownloads
A simple and reusable Datepicker component for React (Demo)
Installation
The package can be installed via npm:
npm install react-datepicker --save

Or via yarn:
yarn add react-datepicker

You’ll need to install React and PropTypes separately since those dependencies aren’t included in the package. If you need to use a locale other than the default en-US, you'll also need to import that into your project from date-fns (see Localization section below). Below is a simple example of how to use the Datepicker in a React view. You will also need to require the CSS file from this package (or provide your own). The example below shows how to include the CSS from this package if your build system supports requiring CSS files (Webpack is one that does).
importReact,{useState}from"react";importDatePickerfrom"react-datepicker";import"react-datepicker/dist/react-datepicker.css";// CSS Modules, react-datepicker-cssmodules.css// import 'react-datepicker/dist/react-datepicker-cssmodules.css';constExample=()=>{const[startDate,setStartDate]=useState(newDate());return<DatePickerselected={startDate}onChange={(date)=>setStartDate(date)}/>;};
Configuration
The most basic use of the DatePicker can be described with:
<DatePickerselected={startdate}onChange={(date)=>setStartDate(date)}/>
You can use onSelect event handler which fires each time some calendar date has been selected
<DatePickerselected={date}onSelect={handleDateSelect}//when day is clickedonChange={handleDateChange}//only when value has changed/>
onClickOutside handler may be useful to close datepicker in inline mode
See here for a full list of props that may be passed to the component. Examples are given on the main website.
Time picker
You can also include a time picker by adding the showTimeSelect prop
<DatePickerselected={date}onChange={handleDateChange}showTimeSelectdateFormat="Pp"/>
Times will be displayed at 30-minute intervals by default (default configurable via timeIntervals prop)
More examples of how to use the time picker are given on the main website
Localization
The date picker relies on date-fns internationalization to localize its display components. By default, the date picker will use the locale globally set, which is English. Provided are 3 helper methods to set the locale:
  • registerLocale (string, object): loads an imported locale object from date-fns
  • setDefaultLocale (string): sets a registered locale as the default for all datepicker instances
  • getDefaultLocale: returns a string showing the currently set default locale
import{registerLocale,setDefaultLocale}from"react-datepicker";import{es}from'date-fns/locale/es';registerLocale('es',es)<DatePickerlocale="es"/>
Locales can be changed in the following way:
  • Globally - setDefaultLocale('es');
Compatibility
React
We're always trying to stay compatible with the latest version of React. We can't support all older versions of React.
Latest compatible versions:
  • React 16 or newer: React-datepicker v2.9.4 and newer
  • React 15.5: React-datepicker v2.9.3
  • React 15.4.1: needs React-datepicker v0.40.0, newer won't work (due to react-onclickoutside dependencies)
  • React 0.14 or newer: All above React-datepicker v0.13.0
  • React 0.13: React-datepicker v0.13.0
  • pre React 0.13: React-datepicker v0.6.2
Moment.js
Up until version 1.8.0, this package was using Moment.js. Starting v2.0.0, we switched to using date-fns, which uses native Date objects, to reduce the size of the package. If you're switching from 1.8.0 to 2.0.0 or higher, please see the updated example above of check out the examples site for up to date examples.
Browser Support
The date picker is compatible with the latest versions of Chrome, Firefox, and IE10+.
Unfortunately, it is difficult to support legacy browsers while maintaining our ability to develop new features in the future. For IE9 support, it is known that the classlist polyfill is needed, but this may change or break at any point in the future.
Local Development
The main branch contains the latest version of the Datepicker component.
To begin local development:
  1. Run yarn install from project root
  2. Run yarn build from project root
  3. Run yarn start from project root
The last step starts documentation app as a simple webserver on http://localhost:5173.
You can run yarn test to execute the test suite and linters. To help you develop the component we’ve set up some tests that cover the basic functionality (can be found in /tests). Even though we’re big fans of testing, this only covers a small piece of the component. We highly recommend you add tests when you’re adding new functionality.
Please refer to CONTRIBUTING.md file for more details about getting set up.
The examples
The examples are hosted within the docs folder and are ran in the simple app that loads the Datepicker. To extend the examples with a new example, you can simply duplicate one of the existing examples and change the unique properties of your example.
Accessibility
Keyboard support
  • Left: Move to the previous day.
  • Right: Move to the next day.
  • Up: Move to the previous week.
  • Down: Move to the next week.
  • PgUp: Move to the previous month.
  • Shift+PgUp: Move to the same day and month of the previous year. If that day does not exist, moves focus to the last day of the month.
  • PgDn: Move to the next month.
  • Shift+PgDn: Move to the same day and month of the next year. If that day does not exist, moves focus to the last day of the month.
  • Home: Move to the first day (e.g Sunday) of the current week.
  • End: Move to the last day (e.g. Saturday) of the current week.
  • Enter/Esc/Tab: close the calendar. (Enter & Esc calls preventDefault)
For month picker
  • Left: Move to the previous month.
  • Right: Move to the next month.
  • Enter: Select date and close the calendar
License
Copyright (c) 2014-2025 HackerOne Inc. and individual contributors. Licensed under MIT license, see LICENSE for the full license.
About
No description, website, or topics provided.
Resources
Readme
MIT license
Code of conduct
Code of conduct
Contributing
Contributing
Security policy
Security policy
Activity
Stars
7 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages