A fast, intuitive, and elegant date and time picker for React.
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
npm install react-kronos
import Kronos from 'react-kronos'
<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
)timeStep
- number : minutes for time step (if not specified: 30 minutes)format
- string : Moment formatting of date / timeonChange
- function : native onChange methodonChangeDateTime
- function : change method called when there is a new valuereturnAs
- string : onChange format JS_DATE
, MOMENT
, ISO
, STRING
(default: same as input)min
- Date(), Moment(), ISO to set as the minimum datetimemax
- Date(), Moment(), ISO to set as the maximum datetimeminTime
- 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 validationplaceholder
- string : placeholder text when there is no valuename
- string : name used for the input formdisabled
- boolean : prevent interaction with input fieldinputStyle
- object : inline styles for input fieldinputClassName
- string : .class
for input fieldinputId
- string : #id
for input fieldcalendarStyle
- object : inline styles for calendarcalendarClassName
- string : .class
for calendaroptions:
color
- string : the highlight color in the UI as a hexcorners
- number : the pixel size of rounded corners (default: 4
)font
- string : the font family (default: Source Sans Pro
)locale
- object : Moment locale customizationlang
- 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 titlestoday
: - string : default: Today
year
: - string : default: YYYY
month
: - string : default: MMM
day
: - string : default: D
hour
: - string : default: h:mm a
Needed
styles
- granular styling (overwrite any style, or provide entire theme)