This package has been deprecated

Author message:

React-Date-Picker 5.x and older is deprecated. The authors of these versions have disappeared. Please upgrade to version 6.x to get fully maintained package with support for React 16. It requires some changes on your side, but in most cases it shouldn't take you more than a few minutes. See project's page for instructions and support.

jk-react-date-picker

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 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 - a MonthView with support for multiple months. Composes MonthView
• HistoryView - a view for selecting a year & a month from a decade. Composes DecadeView & 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 - a DateFormatInput 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!)

License

MIT