A fast, intuitive, and elegant date and time picker for React.
npm install kronos-datepickerReact Kronos 1.6
================
A fast, intuitive, and elegant date and time picker for React.
npm install react-kronos
import Kronos from 'react-kronos'
jsx
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)
- timeStep - number : minutes for time step (if not specified: 30 minutes)
- format - string : Moment formatting of date / time
- onChange - function : native onChange method
- onChangeDateTime - 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
- minTime - Date(), Moment(), ISO to set as the minimum time (only the time will be used)
- maxTime - Date(), Moment(), ISO to set as the maximum time (only the time will be used)
- closeOnSelect - boolean : closes the dropdown when a value is selected (default: true)
- closeOnBlur - boolean : closes the dropdown when the field is blurred (default: true)
- shouldTriggerOnChangeForDateTimeOutsideRange - boolean: optionally allow dates outside min/max range to trigger onChanges (default: false)
- preventClickOnDateTimeOutsideRange - boolean: optionally prevent users from clicking on dates outside min/max range (default: false)
- hideOutsideDateTimes - boolean: optionally hide times that do not pass validation
- placeholder - string : placeholder text when there is no value
- name - string : name used for the input form
- autoComplete - string : used for the input form
- disabled - boolean : prevent interaction with input field
- inputStyle - object : inline styles for input field
- inputClassName - string : .class for input field
- inputId - string : #id for input field
- calendarStyle - object : inline styles for calendar
- calendarClassName - string : .class for calendar
- calendarIcon: - optionally button-icon to native toggle the calendar
- className - string : .class for icon
- onClick - function : native onClick method
- 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)
- locale - 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'] })
- format: - object : Moment formatting for cell titles
- today: - string : default: Today
- hideToday: - boolean : default: false
- year: - string : default: YYYY
- month: - string : default: MMM
- day: - string : default: D
- hour: - string : default: h:mm a
Construction progress
#### Roadmap
Needed
- Provide docs on website
- options:
- date (restrict calendar to show only days, or with months, or with years)
- time (set increments, set ranges of time)
- support for connected start & end date+time
- date (show range on calendar)
- time (show "0 hours", "0.5 hours", "1 hour", &c)
#### Ideas
- input field masking
- ⇧+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
- prop: styles` - granular styling (overwrite any style, or provide entire theme)