react-date-picker
A carefully crafted date picker built especially for React, with love.
Click for LIVE DEMO!
Install
$ npm install react-date-picker
Key features
- 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 ...
Usage
Import the css first
import 'react-date-picker/index.css'
Then go ahead & use the components
import { DateField, Calendar } from 'react-date-picker'
const onChange = (dateString, { dateMoment, timestamp }) => {
console.log(dateString)
}
let date = '2017-04-24'
<Calendar
dateFormat="YYYY-MM-DD"
date={date}
onChange={onChange}
/>
Docs & examples
See zippyui.com/docs/react-date-picker
Components
The 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. -
MultiMonthView
- aMonthView
with support for multiple months. ComposesMonthView
-
HistoryView
- a view for selecting a year & a month from a decade. ComposesDecadeView
&YearView
-
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. -
DateFormatSpinnerInput
- aDateFormatInput
that also has spinner controls. Footer
NavBar
Changelog
See changelog
For the old v4
README, see v4
Contributing
When contributing, please work on the src
dir.
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.
Other
react-date-picker
uses the awesome moment.js
library ( Big thanks!)