Package Exports

react-date-picker
react-date-picker/index.css

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-date-picker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 - 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!)

JSPM