react-date-picker
Please note:
This is not the official repo. I created this repo because the official repo at zippyui/react-date-picker disappeared (the whole organisation did so).
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 fieldCalendar
- 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 navigationYearView
- a view for month selectionDecadeView
- a view for year selectionClockInput
- a Clock with an input field to pick timeClock
- a component displaying timeDateFormatInput
- 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!)