Negotiable Paleobotanist Missions

    @johnydays/react-date-picker

    5.3.19 • Public • Published

    react-date-picker

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

    Date picker

    Date picker

    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

    Install

    npm i @johnydays/react-date-picker

    DownloadsWeekly Downloads

    1

    Version

    5.3.19

    License

    MIT

    Last publish

    Collaborators

    • johnydays