felixakiragreen / react-kronos

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

React Kronos 1.7.2

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

Philosophy

• 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

Demo

Usage

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)
• 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
• 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
• 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
    • 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)
• add crazy awesome date/time interpretation/parsing similar to that in The Hit List
• set up solid unit tests
• prop to allow or disallow outside range selection?

Kronos 2.0

• remove moment dependency to decrease size
• mobile support
• single input with date & time, or double
• simplify formatting

Thanks

• !!! 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

react-kronos's Issues

changes to min/max are not reflected

I'm setting the max/min values like

when I change the state, the min/max behavior is not refreshing.

EDIT: sorry, that was an error in my React code, issue can be closed, works as expected :)

upgrade jss module

Hi,

current version of jss has node engine version stucks to 6.
could you please update jss module to 5.5.5?

thanks

preventClickOnDateTimeOutsideRange does not prevent clicks on today

When a minimum date is set, and preventClickOnDateTimeOutsideRange is set to true, the date picker prevents clicks on all dates in the specified range except today.

ex:

  <Kronos
    date={moment().add(2, 'week')}
    onChangeDateTime={onChangeHandler}
    min={moment().add(1, 'week')}
    preventClickOnDateTimeOutsideRange
  />

moment.locale is not a function (moment-range 1.1.0 incompatibility)

Doing a clean npm install to my project, I constantly get this error. It's located in styles.js in the "initializeMoment" method.

Please give me a solution to this @DUBERT , it's blocking the deployment of my app. Thanks

visibility issue with visibility controlled

I'm trying to control visibility and have some issues.

You can reproduce issues at http://dubert.github.io/react-kronos/ on Controlled part.

First issue:
you click on "Toggle Visibility" and then click "next" or "previous" month (on nav bar) => calendar disapear (it should remain visible)

Second issue:
you click on "Toggle Visibility" and then focus input and then "Toggle Visibility" => calendar blink but remains visible (it should disapear)

Thanks for your work :)

Remove PropTypes for React 16 Compatibility?

Is there a plan to do this? Thank you very much for the great package.

UI goes crazy when clearing out the field and start typing

Hi!

Thanks for this component. See from your demo page, the controlled example goes bad when you clear out the field and type any number

Cannot import react-kronos

Just upgraded to 1.1.0 and we now get an error Error: Cannot find module 'react-kronos'.

It looks as though what is being published to npm needs to be a bit different, perhaps remove all of the dev stuff and define an entry point in your package.json

Issue with timezones

Not sure why I'm having this issue. I receive a utc time as well as offset from the server. I format the time for the kronos timepicker with moment js and the timezone offset I receive from the server. Once I change the date the moment object is recreated (or cloned) and now has an est zone associated with the time stamp. I then need to convert the time to utc seconds to update the time on the server, but the conversion back does not seem to be working.

`id` prop should be on `input` and not on `Calendar`

For of all, thanks for this library! Totally agree with your reasoning for creating it, and we're using it it in our app. Happy to help out with PRs as they come up.

In index.js, I think we should really be using props.id on the input and not on Calendar. This way we can use <label> with htmlFor= instead of wrapping <Kronos> in a label, which causes problems -- it ends up also being a label for the calendar, so selecting a date/time triggers a focus event and the calendar can never close.

Is there a reason for having an id prop for the Calendar that I'm missing? If so, maybe have props.id and props.calendarId?

Bug on demo page - time picker

I really like how this works everywhere. It's not like those "bootstrap" ones where if we're not using bootstrap we have to spend so much time styling it. (well I havent yet tried it, I actually was just basing my thoughts off the demos I compared.)

However there is a bug on the demo page. In Firefox 53 I am seeing this when i click into the uncontrolled time input box:

As seen in the screenshot, this popup is blank.

Placeholder

I am having problems with setting the placeholder to a string. If I declare the default state to null it just shows up empty. If I declare the default state to {} or moment() it shows the date. Undefined and empty string is not allowed.

How to trigger the placeholder properly?

Date Changes With Month Buttons

Hello and thanks for kronos!
I have one big issue: when using the arrow buttons to change the calendar month, the date in the input changes. This is unexpected behavior. I would expect the date to only change when I select a specific day from the calendar (by clicking on it). The month buttons should only be for navigating. And besides that, it shouldn't be possible to change the date in the input to a date that's out of range, but that's what happens: I am (correctly) prevented from clicking on out-of-range days, but by advancing the month out of range the input date changes anyway. That should not be possible.

Expose validation result in `onSelect`

When controlling visibility, there is currently no way to know whether validation succeeded or failed when props.onSelect is called.

The internal onSelect uses toggles state.visible; however, if you have enabled controlVisibility, this will be out of sync with the actual visibility.

The props.onSelect callback should set the appropriate visibility, but it would be nice to know whether the validation succeeded or not.

Uncaught ReferenceError: datetime is not defined (nav.js:41)

I'm getting the stated error when selecting a date. (Uncaught ReferenceError: datetime is not defined (nav.js:41))

My React-code for the component is:

<Kronos
    onChange={this.props.onChange}
    date={this.props.date}
    format="MM-DD-YYYY"
    placeholder={this.props.header.label}
/>

The reason why date is using this.props.date and not state, is that the state is held in the parent component. I have tried changing it to state and add a default state, but the pattern is the same.

It is only the first time a date is selected in the component.

It might be locally but I was hoping that you could point me in the right direction as to what could be wrong.

All the best,
Anders

Cannot click decade selector

Uncaught ReferenceError: React is not defined

Using gulp + browserify, ./react-hoc-jss.js produces React is not defined error

Reduce size (& dependencies)

Adding to a bundle.js increases the size by 30k + lines.

I think it's bundling React as well as every other dependency?

It also only does this with gulp+browserify, not webpack.

Better support for browserify?

I just updated to the newest version, which gave me some errors. I think this is because the main reference in package.json is based on people using webpack.

I included the path to /dist/bundle.js, which works for me, but I am uncertain as to if this adds a lot to the file size? Are there better ways of using react-kronos with browserify?

All the best,
Anders

Allow all events to bubble up

There are currently some events that are being swallowed by the react-kronos library. If events like onBlur, onClick, onChange, etc. were able to bubble up (with their original event object argument), this would allow us to successfully use react-kronos with a library like redux-forms which relies on the availability of those events.

preventClickOnDateTimeOutsideRange is ignored

Fortunately #28 fixes it :)

Move codebase over to ES6

Pros:

• Better React+JSX support with Babel
• Allows contributions more easily

Cons:

• I love Coffeescript

disable component

hello,

can't find any option to disable component.

Could be fine to have a disabled prop as we do for an input element (<input disabled/>).

...
render() {
   return <Kronos disabled />
}
...

Or do you have other suggestion?

Define Locale Override, Momentjs

Hi (again),

On the pages where I am using react-kronos, I get the following warning from Momentjs:
http://momentjs.com/guides/#/warnings/define-locale/

I'm using 1.2.3 of react-kronos and 2.13.0 of Momentjs

I assume this is something related to react-kronos' use of Momentjs? Perhaps you can confirm.

All the best,
Anders

The className of input.

Hi, thank so much the className of input have to be customized...

Styling

It would be great to have properties which will allow to set custom styling on this component. Right now I have to write custom LESS files to overwrite default looks. Put style and className properties would be amazing. I assume there would be different properties to style: input, time dropdown, calendar.

Thank you !

props.moment.settings does not seem to work

Using version 1.2.2

Can't seem to change the calendar to start from Sunday instead of the default. I tried to use it like this in the render function but the calendar week still starts from Monday. I tested 'X' as a value in weekdaysMin but it is also not reflected in the calendar. Let me know if I am doing something wrong, or if there is anything else I can do.

const kronosOptions = {
  moment: {
    lang: 'en',
    settings: {
      week: { dow: 7  },
      weekdaysMin: ['X', 'T', 'W', 'T', 'F', 'S', 'S']
    }
  }
};

<Kronos date={ state.from }
        closeOnSelect= { false }
        closeOnBlur= { false }
        max={ (new Date()) }
        placeholder={ 'from' }
        options={ kronosOptions }
        onChange={ this._onChange.bind(this, 'from') }/>

Changing the time step

Hi!

Thank you for your job!

How can I change time step in time picker for 5 mins?

Example page

First of all thanks a lot for this great component.

It would be so amazing if you would expand on your example page showing different possible options and features of your component with some code examples.
Per say I'm struggling right now to make Kronos to show only time and then to show a dropdown with 24hr format time instead of am/pm one and not sure how to do that.

Scroll selected hour into view

Can use Element.scrollIntoView()

React 16 error

I am getting an error like this after migrate to React 16.

Error: Minified React error #149; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=149&args[]=kronos for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Setting props on one instance overwrites separate instances

With a min date.now(), the date is highlighted red

Hours scrollview jumping on first click

Webpack module parse failed.

ERROR in ./~/react-kronos/~/color/~/color-string/~/color-name/index.json
Module parse failed: /Users/nirrek/Projects/project/node_modules/react-kronos/node_modules/color/node_modules/color-string/node_modules/color-name/index.json Line 2: Unexpected token :
You may need an appropriate loader to handle this file type.
| {
|   "aliceblue": [240, 248, 255],
|   "antiquewhite": [250, 235, 215],
|   "aqua": [0, 255, 255],

If you are using webpack and haven't installed json-loader and set it up appropriately in webpack.config.js, then the webpack build will fail.

This is probably worth mentioning in your documentation somewhere given that most React devs use webpack, and plenty of people won't have json-loader installed and configured by default.

Support React v15

Please add support for React v15, it has been released enough time ago to start using it :)

[Suggestion] Min/max for time picker

Hello again!

I am using kronos only as time picker. It would be nice if min and max props could be used for this use case as well. I.e. possible restaurant delivery time is between 10 AM and 9 PM.

Kind regards,
Yuri.

Disable click on date that is out of range

Is there a currently a way that we can stop users being able to click on dates that are out of range? Currently it still allows those values to be selected and the value of the field to be updated. It would be great if there were a prop we could pass to disable that functionality.

I'd be happy to create a PR, but coffeescript...

Create docs with Storybook

https://getstorybook.io/

Moment lang option not applied to hour dropdown

Hi, first of all thank you for nice library!

Here is the issue description:

My code:
<Kronos time='15:00' format='HH:mm' options={{ moment: { lang: 'ru' } }}/>

In Russian we have 24 hour format by default. Initial value rendered fine and after selecting 7:30 PM from dropdown I can see 19:30, which is also fine.

The issue is that I am expecting to see 19:30 in the dropdown instead of 7:30 PM. I reviewed the source code and it seems that moment language option is never used for dropdown population.

Kind regards,
Yuri.

Incorrect time format when using timeStep

I have my component set up like so:

<Kronos
  time={this.state.selectedTime}
  format={'h:mm a'}
  onChangeDateTime={this.handleTime.bind(this)}
  placeholder="Time" />

Which results in the format of the time in the dropdown to be shown correctly:

However, when I add timeStep, the time in the dropdown is now formatted in 24-hour time:

The issue seems to be with this: https://github.com/dubert/react-kronos/blob/master/src/calendar.js#L244. The README mentions:

hour: - string : default: h:mm a

But looking at the source, it seems that minute is used, and the default is HH:mm, and not h:mm a.

To get things working how I want, I had to set:

options={{
  format: {minute: 'h:mm a'}
}}

Uncaught TypeError: Cannot read property 'format' of null (+1)

Hi, it's me again. Sorry for all these issues, but we're really just enjoying using react-kronos, and the sometimes things pops up!

1. Open http://dubert.github.io/react-kronos/
2. Place the cursor in the first input date field
3. Hit backspace until no more content is in the field
4. Hit enter
5. Watch the console - the above error should pop up.

+1

Also - in our solution (not on your site) I get an error extra between 4 and 5. When the input field is empty I get this:

Warning: `value` prop on `input` should not be null. Consider using the empty string to clear the component or `undefined` for uncontrolled components.

I can't seem to find out which event (if any?) the Kronos triggers when deleting content via backspace. These errors could be related, so my guess is that if you fix the first, mine will be fixed as well.

Again - thanks for your always swift replies and fixes! :-)

Open datepicker on event/API

This is more of a suggestion for improvement than a real issue.

Have you thought of implementing an API to e.g. open the datepicker from a function, rather than onFocus?

That would be really useful (at least for me). My datepicker is currently hidden behind a button, and as it is now, I have no option to do more than just reveal the input field - as I see the documentation, I cannot open the datepicker programatically - is that correct?

Thanks for a great plugin - looking forward to 1.3 👯

npm install error with package "jss"

timeStep has no effect in Kronos 1.5.1

Thanks very much for the great work @DUBERT.

I am trying to use the timeStep property and I have tried passing it in in many ways to no effect.

timeStep={15}
timeStep="15"

and

const kronosOptions = {
    timeStep: 15
}

<kronosComponent {...kronosOptions } />

None of these produced any effect? Thanks for any ideas you may have.

Default start time

I've been using react-kronos and it's working really well on my project.

But I've just got a request from my client, to make all time inputs start by default at 8am.

Is there an option for it, or could be something easy to implement?

Thanks and regards.

Not compatible with React 0.12.x

Uncaught TypeError: Cannot read property '__reactAutoBindMap' of null

Controlled visibility bug when navigating in months

Hi again,

I'm using the controlled version of http://dubert.github.io/react-kronos/

When clicking on the << or >> the date picker closes. This seems to be an error, as it disrupts the UI-experience. If controlVisibility={false} the problem goes away.

All the best,
Anders

Testing

A good library should have tests

Uncontrolled?

Is it really possible to do uncontrolled? In the demo it's connected to state. I need a totally uncontrolled field with just a defaultValue. In all cases I need defaultValue to be blank. Right now on re-render it is blanking out, or if I set a date prop it goes back to that original value.