react-date-picker2

react-date-picker2

Disclaimer:

This is not the official or original repository for "react-date-picker" created by ZippyUI. This repo was created because we started leveraging its great features, and the component continued to be available from NPM; however, the GitHub repo and the ZippyUI team suddenly disappeared. Mostly we wanted to be able to address security vulnerabilities that had not been taken into account in the last version provided by ZippyUI. Primarily, there was a known vulnerability in the version of Moment.js, and the primary motivation for forking this project was to update that version and include it in our projects for security scans and reviews.

A carefully crafted date picker built especially for React, with love.

Click for LIVE DEMO!

Install

$ npm install react-date-picker2

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-picker2/index.css'

Then go ahead & use the components

import { DateField, Calendar } from 'react-date-picker2'

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-picker2 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-picker2 uses the awesome moment.js library (Big thanks!)

License

MIT