A carefully crafted date picker built especially for React, with love.
Click for LIVE DEMO!
$ npm install react-date-picker
- input field integration
- fabulous keyboard navigation
- single & multi views
- easy to use but insanely configurable!
- multiple React components that can be used standalone but compose well together
- easily themable
- transition on navigation
- localization support & custom date formats
- & a lot more ...
Import the css first
Then go ahead & use the components
import DateField Calendar from 'react-date-picker'const onChange = dateString dateMoment timestampconsolelet date = '2017-04-24'<Calendar="YYYY-MM-DD"==/>
react-date-picker module exposes a number of components as named exports. The most important ones are:
DateField- a date field
Calendar- a calendar view - with support for date & time formats
The full list, besides those above:
MonthView- a calendar view without support for time.
MonthViewwith support for multiple months. Composes
HistoryView- a view for selecting a year & a month from a decade. Composes
TransitionView- a view for transitioning child views navigation
YearView- a view for month selection
DecadeView- a view for year selection
ClockInput- a Clock with an input field to pick time
Clock- a component displaying time
DateFormatInput- an input with support for editing dates & times.
DateFormatInputthat also has spinner controls.
For the old
v4 README, see v4
When contributing, please work on the
You'll need to run the following commands:
$ npm i # install all depedencies$ npm run dev# starts webpack-dev-server, which does all the bundling and live reloading
Now navigate to localhost:8080 With this setup, you have an environment which live-reloads all your changes, so you have a rapid development cycle.
react-date-picker uses the awesome
moment.js library ( Big thanks!)