A fast, intuitive, and elegant date and time picker for React.

• Works straight out of the box with minimal props
• Provide a few props and options that give lots of control
• Allow for granular control when needed
• Style is done in JS and can be easily modified
• Beautiful code and appearance

Rationale

Even though there are many React Date and/or Time components, I'm developing my own because none of them do everything that I need.

Key requirements:

• Separate date and/or time components (many only have date)
• Easily style-able from JS (not have to muck around in the css)
• Return multiple time formats (Date, Moment, ISO, string)
• Lightweight, use no jquery
• Active on focus, disappear on blur
• Efficient keyboard navigation

1. NPM install npm install react-kronos
2. Require Kronos import Kronos from 'react-kronos'
3. Use

<Kronos
  date={this.state.datetime}
  onChange={this.onChange}
/>

Props:

• date - Date(), Moment(), ISO, or string (if string, must match format)
• time - Date(), Moment(), ISO, or string (if string, must match format)
• format - string : Moment formatting of date / time
• onChange - function : change method called when there is a new value
• returnAs - string : onChange format JS_DATE, MOMENT, ISO, STRING (default: same as input)
• min - Date(), Moment(), ISO to set as the minimum datetime
• max - Date(), Moment(), ISO to set as the maximum datetime
• minTimeOfDay - string : min selectable time; e.g. "9:00 am", "10:15 pm"
• maxTimeOfDay - string : max selectable time; e.g. "9:00 am", "10:15 pm"
• timeIncrement - number : increment the selectable times by this much (default: 30)
• timeIncrementUnits - string : increment the selectable times using these units; e.g. 'hours', 'minutes', 'seconds' (default: 'minutes')
• validator - function : custom function that returns true if the given datetime is valid for selection (default: undefined)
• closeOnSelect - boolean : closes the dropdown when a value is selected (default: true)
• closeOnBlur - boolean : closes the dropdown when the field is blurred (default: true)
• placeholder - string : placeholder text when there is no value
• options:
  • color - string : the highlight color in the UI as a hex
  • corners - number : the pixel size of rounded corners (default: 4)
  • font - string : the font family (default: Source Sans Pro)
  • moment: - object : Moment locale customization
    • lang - string : language (default: en for english)
    • settings - object : properties to override as an object (default: { week: { dow: 1 }, weekdaysMin: ['M', 'T', 'W', 'T', 'F', 'S', 'S'] })

1.0:

• Rewrite codebase in ES6
• Prodive docs on website

1.1

• options:
  • date (restrict calendar to show only days, or with months, or with years)
  • time (set increments, set ranges of time) [ DONE ]

1.2

• support for connected start & end date+time
  • date (show range on calendar)
  • time (show "0 hours", "0.5 hours", "1 hour", &c)

1.3

• prop: styles - granular styling (overwrite any style, or provide entire theme)

• input field masking
• scroll time list as user arrows up+down
• ⇧+arrow uses the higher order unit
• specify required props & non-required (what happens if none are included)
• add warning messages to help use component properly
• mobile support
• wide browser compatibility

Kronos is built from scratch, but heavily inspired by:

• Google Calendar's input fields
• react-widgets datetimepicker
• react-input-calendar

• !!! gaearon big thanks to Dan Abramov who has built some incredible react components (hot-loader, dnd), written excellent articles, and answered many questions
• ! vjeux leading the CSS in JS movement