catc/react-timekeeper

Google Keep app inspired time picker for react :clock4:

React Timekeeper

Time picker based on the style of the Android Google Keep app.

---

Features

• supports both 12 hour and 24 hour mode, and flexible time formats
• simple to use with many customizable options
• smooth, beautiful animations with react spring
• typescript support
• css variable support for custom styles

Installation

$ yarn add react-timekeeper

# or via npm
$ npm install --save react-timekeeper

Version 2+ of timekeeper requires react hooks (v16.8). If you're using an older version of react, install timekeeper v1 via

$ npm install --save react-timekeeper@^1.0.0

Usage

import React, {useState} from 'react';
import TimeKeeper from 'react-timekeeper';

function YourComponent(){
  const [time, setTime] = useState('12:34pm')

  return (
    <div>
      <TimeKeeper
        time={time}
        onChange={(data) => setTime(data.formatted12)}
      />
      <span>Time is {time}</span>
    </div>
  )
}

All styles are inlined via emotion so no css imports are required.

API

For full api and examples, see API docs and examples

Development

1. Clone the repo
2. nvm use v12.16.0 (or anything >12+)
3. yarn install
   • may also need to install react since it's a peer dev: yarn add -P react react-dom
4. npm run docs:dev
5. Navigate to localhost:3002

Contributing

Before submitting a PR, ensure that:

1. you follow all eslint rules (should be automatic)
2. all tests pass via npm run tests
3. everything builds
   • docs - npm run docs:build
   • lib - npm run lib
4. provide detailed info on what bug you're fixing or feature you're adding - if possible include a screenshot/gif

---

Other useful commands:

• new npm releases:
  • bump version: npm version NEW_VERSION, commit and push - CI should publish to npm automatically
• new github releases
  • manual (TODO - add github action)

react-timekeeper's Issues

Move away from styled

Due to NextJS 13 and the issues with emotion as it currently stands, I was messing around converting this component lib to use tailwindcss.

I have a working version here.
https://github.com/anatine/react-components

It is not published to NPM or anything. And I am using DaisyUI so I decided to just use a lot of stylings from that lib. Also, I pulled in some headlessUI to replace the dropdown. Again, far, far from perfect.

Styles are merged in with tailwind-merge

Honestly, if I have time I'll refactor the project so that it follows more of a unstyled pattern (like HeadlessUI) where you assemble the parts in the order you want, allowing for styling at the component level. It's a bit more work than a single import, but it would make it super easy to move components around.

Anyway. If someone else comes across this lib and you are looking for something without emotion, feel free to hit up my repo and copy/paste away. If you want to help make it a proper component to publish, I'd be happy to help orchestrate CI/CD pipelines and all that.

onChange is not triggered when time prop is changed from the parent component

After the user picks a time from the time picker
if I want to clear his selection by updating the time prop passed to the , the onChange fn is not triggered and therefore when I open the time picker again the old time persists.

Unable to change as 24 hrs Mode

Hi Team,

We have used this npm in our project and we want to implement timepicker in 24 HRS format, as per the documentation we have changed the code as shown below but it is still showing the time in 12 HRS format.

Reference :
<TimeKeeper
time={time}
onChange={(newTime) => setTime(newTime.formatted12)}
hour24Mode
coarseMinutes={15}
forceCoarseMinutes
/>

Please find the code below for your reference.
My code:
<TimeKeeper hour24Mode
forceCoarseMinutes
switchToMinuteOnHourSelect
doneButton={(newTime) => (
<div
style={{ textAlign: 'left', padding: '10px 0' }}
onClick={() => alert('new time is now', newTime.formatted12)}
>
Close

)}
time={props.selectedPickerValue}
onChange={(data) => props.onTimeChange(data)}
/>

Are we missing something, please let us know how to use the timepicker in 24 hours format

react version details from package.json

"react": "^16.13.0"

Include seconds picker

Hi, is there a way to include a seconds picker to this component? I need to be able to provide a way to select time with seconds precision and this component looks very usable for my use case if it allows this feature.

j.current.useInsertionEffect is not a function

I am using this library for almost 1 year, it was working fine but now causes an error 'j.current.useInsertionEffect is not a function'.
I don't know why this is happening.

Please consider it serious because of this error I can not update my application's front end.

onBlur event

I am trying to tie this component to a text box. Ideally it will open when a user focuses on the text box and go away when focus is elsewhere.

To do this I need to capture both focus on the text box (which I can do) and focus/blur on the timekeeper element ( so I know if the user is in the timekeeper, to keep it open, or elsewhere - to close it).

However, assigning onFocus to the div containing the timekeeper, or to the element itself, doesn't trigger when the clockface is clicked (an svg element). It will trigger when the am/pm elements are clicked.

How do I either capture focus for the whole component or else manage some other way to tie a text box together with the time picker?

Module not found: Can't resolve 'react' in /node_modules/create-react-class

I get this error when I add react-timekeeper to a component. I've added create-react-class to my dependencies and have deleted my yarn.lock file and re-run yarn install.

Any other suggestions to get past this error?

Ability to use minutes for value and onChange

And potentially seconds (if that feature is added).

I find that when working with times in the day, it's easy to reason about it when just using minutes as the value- as in the total minutes past 00:00 in the day. Its a nice single value to pass around and can easily be converted to hours and minutes again for display.

I will be using the separated out hours and minutes for now, but just thought it was strange that pure minutes was not included from the get go too.

Please update the following components: Clock, ClockWrapper, StyleRoot, StyleSheet, Time, Timepicker

Warning:Legacy context API has been detected within a strict-mode tree.

The old API will be supported in all 16.x releases, but applications using it should migrate to the new version.

Please update the following components: Clock, ClockWrapper, StyleRoot, StyleSheet, Time, Timepicker

Removing <React.StrictMode></React.StrictMode> supress the error but it renders default component, not the one I have modified with adding props or css and also not able to change the value.

Versions:
React: 16.13.1
react-timekeeper: 2.1.1

Found Incompatible Node

I received this error when i try install

error react-timekeeper@2.0.3: The engine "node" is incompatible with this module. Expected version "10.16.0". Got "10.16.3"
error Found incompatible module.

My config
node:10.16.3
yarn:1.17.3

switchToHourOnMinuteSelect option

Hi and thx for this very nice component !

I have to switch between hours and minutes, is it possible to add this option ?

Thx a lot

Disable time range array

Support for React 17

Attempting to use react-timekeeper with React 17 leads to a styling error from @emotion/core. Upgrading from emotion 10 to emotion 11 (by proxy switching from @emotion/core to @emotion/react) appears to solve this issue. However, that causes tests to fail (despite everything appearing to still work) as enzyme still only supports up to React 16.

There are a few options: we can use the unofficial enzyme-adapter-react-17, we can use a different testing library, or we can ignore the failed tests until Enzyme officially supports React 17, which seems like might be relatively soon.

I'm happy to create a pull request for any of these options!

Forced to use node 10.16.0

Version 2.0.3 of the package works only if node 10.16.0 is installed on the PC. If any other version of node is installed, including 10.16.3, the web app can no longer be ran. Could this be changed so that any version above 10 works?

There is a huge event listener leak

The stopDragHandler adds itself to the document handler list instead of removing it.

	document.removeEventListener('mousemove', this.mousedragHandler, false)
	document.removeEventListener('mouseup', this.stopDragHandler, false)
	this.props.clockWrapperEl.removeEventListener('mouseleave', this.stopDragHandler, false)

	document.removeEventListener('touchmove', this.touchdragHandler, false);
	document.addEventListener('touchend', this.stopDragHandler, false)
	document.addEventListener('touchcancel', this.stopDragHandler, false)
	window.blockMenuHeaderScroll = false

I've got a fork that fixes this and some other issues. I'll do a PR when I'm done fiddling.

Feature request - Context menu click / right click to go back to the hour selection if currently in minutes

If you are modifying a time, a user might want to quickly switch back to hours and update it (e.g. if they misclicked initially). They currently have to move the cursor to the hour display, and then back down to choose the hour.

Having another option to quickly go back to the hour selector would be a great feature.

If reasonable, it might be good to have this as an option (prop) as well, and allow the user to toggle between the modes (hour + minutes) by right clicking without making a selection anyways.

Expand hitbox of 5 minute increment numbers

This looks great. One difference from Android time input that was immediately noticeable was the high precision selection of minutes. With the mouse, I almost always get the exact nearest minute. With the native Android control, most taps select on a 5 minute increment, but individual minutes are selectable if you point carefully or drag.

react-timekeeper's control would feel a little more like that if the hitbox of 5 minute increments was somewhat larger that currently.

NPM package contains original files next to the transpiled ones

Hey @catc

I encountered a bug where doing import TimeKeeper from 'react-timekeeper';

results in an error:

Because the NPM package contains both the .jsx and compiled .js file. That in turn confuses webpack into loading the original, instead of compiled.

Can this be fixed?

Clicking Meridiem buttons can sometimes change selected minute.

first and foremost - thank you to the authors for building an amazing component and sharing it with the community.

I encountered an intermittent issue where attempting to click the circular meridiem buttons unintentionally changes the selected hour or minute value.

here's an example:

time-keeper-meridiem-btn-issue.mp4

I eventually realized the problem occurs when my mouse drags during the button click.

In other words, 1 or more pixels of mouse movement between mouse down and mouse up causes the intended meridiem button click to be interpreted as a clock hand drag.

The issue can be hard to avoid when mouse sensitivity is high.

One possible solution would be to disable clock hand drag when the target of mouse down is a meridiem button.

prop-types problem in radium

Hi.
After installing react-timekeeper@^1.0.0 I face this prop-types error in radium package:

TypeError: Cannot read property 'object' of undefined
./node_modules/radium/lib/components/style.js
E:/Gandom/Karpage/Admin/node_modules/radium/lib/components/style.js:123

  120 | 
  121 |   return Style;
  122 | }(_react.PureComponent), _class.propTypes = {
> 123 |   radiumConfig: _react.PropTypes.object,
  124 |   rules: _react.PropTypes.object,
  125 |   scopeSelector: _react.PropTypes.string
  126 | }, _class.contextTypes = {

and here is the block of timekeeper in package-lock.json:

"react-timekeeper": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/react-timekeeper/-/react-timekeeper-1.0.0.tgz",
      "integrity": "sha1-DdigYwnubgSY9DUAShKGFxn4ePw=",
      "requires": {
        "lodash": "^4.17.4",
        "radium": "^0.18.1",
        "react-motion": "^0.4.7"
      }
    },

I tried different versions of prop-types and radium base on their change logs but the error is not solved. so any idea how to solve it?

react: 16.5.2
react-timekeeper: 1.0.0

Error on component unmount

Hi, @catc,

I'm getting this error when the component mounts/unmounts:


I'm worried that if we cannot remove event listener it will cause memory leak.

This is how I am using the component:

import TimeKeeper from 'react-timekeeper';
...
const timerConfig = {
  FONT_FAMILY: '"proxima-soft", sans-serif',
};
...
class TimeSelection extends Component {
  state = {
    time: null,
  };

  handleChange = (newTime) => {
    this.setState({ time: newTime.formatted });
  };
...
render () {
const { time } = this.state;
    return (
     ...
          <TimeKeeper
            time={time}
            config={timerConfig}
            switchToMinuteOnHourSelect
            onChange={this.handleChange}
          />
    )
  }
}

Am I missing something?

Updating time from outside timekeeper's onChange, new time is lost on next change

Hi,

I've run into an issue when updating the time for the timekeeper from outside the timekeeper component while using v.2.2.1. The new time will show up on the clock, but when I try to change either the hour or the minute, part of the time will revert back to the initial value that was set for the timekeeper.

I created a CodeSandbox that shows the issue: https://codesandbox.io/s/sweet-tamas-q0jc2e?file=/src/App.js
Steps to reproduce:

1. Click "Update Time Outside" button. Time should be shown as 11:15 AM.
2. Change hour to a new value. Minutes shown on the clock will revert to the initial value of ":34". Using the hour dropdown or the hour hand to change the time gives the same result.

The same issue shows up when the time is updated from outside and then the minute is changed. In that case the hour is reverted to the initial value.

I tested previous version of the timekeeper to see how far back this issue occurred. The first version where it shows up is 2.2.0.
Version 2.1.3 does not seem to have the problem.

Please let me know if there is an alternate way that I should be updating the time from outside the Timekeeper, or if you need any other information.

Documentation - double click selects too much (e.g. the word Boolean in the API section)

When double clicking the options to use in code, it selects too much by default, such that re-selection is required or modification of the copied item afterwards is required.

12:xx without meridiem (24hour format) is being considered as AM, whereas it should be PM

iOS events captured twice

If using an iOS device (tested on safari iOS 13 on iPhone and iPad) a simple tap to choose an hour will also select the minute with the closest placement.

This behavior is not so bad if the picker does not close itself, but I built one with the option closeOnMinuteSelect enabled and what happens is that with one tap both get selected and the picker closes. Thus the only choosable times are 12:00, 1:05, 6:30, etc...

This does not happen if instead of tapping the finger is held, dragged around and released.

I inspected the events firing in mobile safari and it seems like there are both touch and click events going on. My guess is that there is a preventdefault call missing in the touchstart or touchdown events, that would tell iOS not to generate a click one as well, but I'm not sure. I haven't tested it deeply.

Here is a screencast showing the problem. I'm only clicking on the hours and you can see the seconds immediately change (then I click on the hour number at the top to try again).

Question: WIP Branch

@catc I saw you are working on a new version and was wondering if you could publish your WIP to a new branch. I'm using this in a project and would like to contribute.

How to change done button text?

It's possible to change the done button text or apply a localization? Thanks

24 Hour format

Hello! First of all, thanks for the great component!
However, it would be great if you add 24 hour datepicker option. It's rather uncommon to use AM/PM here in Europe.
Thanks again!

12:xx AM times are being returned as 24:xx in 24 hour format

12:xx AM times are being returned as 24:xx in 24 hour format, when it should be 00:xx

Can I change the "Done" text?

Midnight time 24 hour mode strange behavior

Hi, seen similar issue in closed ones but I think this one is different.

Was seeing it in most recent version of Chrome/Firefox

Current behavior:

• Sometimes choosing 00 hour in 24h mode is setting display to 24:xx or 0:xx (specifically when you drag pointer (without releasing) from the right side of 00 clock hour it will be 0:xx, from left side : 24:xx)
• fomatted24 property from onChange callback is returned as 0:00

Expected behavior:

• display hour is 00:xx always
• fomatted24 property is returned as 00:00

#EDIT:
Ok, I see that number in hours without leading zero for lower than 10 is by choice here. It would be perfect if you could modify the format displayed there. Personally I find hour 09:15 looking better in case of display in top bar

TimePicker, disable range of time

Hi,

in TimePicker is it possible to disable hours and minutes? like in DatePicker with "minDate" and "maxDate" parameters, it would be useful to set the available time range,

for example TimePicker from={'9:00am'} to={'6:00pm'}

Change the clock radius

First of all, thank you for your wonderful work. If there is a way that I can change from outside the clock size.

Is there a future plan to allow the change of parameters from outside?

like the CLOCK_RADIUS var

switchToMinuteOnHourSelect does not work for the HOUR combobox when a selection is made

This means the user needs to click on the minute twice to get the combobox options to display

Expected behaviour for the options enabled
switchToMinuteOnHourSelect={true}

• Click twice on the hour to show the (list of) options for hour selection
• Upon selection change, the focus should move to the minutes, such that clicking on the minutes once should show the (list of) options for changing the minutes

Current behaviour:

• Click twice on the hour to show the (list of) options for hour selection
• Click on the minutes to change it to the "minutes" display
• Click again on the minutes to show the (list of) minute options

Feature request: Add close on click outside timekeeper

One missing feature I think would be nice to add is when the user clicks outside of the timekeeper, it should auto-close. This is a common feature on similar projects such as React Date-Picker

broadly theme and style timekeeper

First off, version 2.0.4 's AM button needs a float:left. Had to do the following to keep it from being janky:
.time-picker .react-timekeeper-button-reset:first-child { float:left; }

Also, looks like tb-hour-wrapper and tb-minute-wrapper are flipped.

I'd like to be able to set colors. Light blue won't work for everyone. I see how I can make the hour and minute text and hands permanently specific colors, but it would be great to have access to what is selected, so that I can actually theme HH:MM depending on what is currently selected (hour or minute wheel).

When selecting a minute through the combobox the property "courseMinutes" is not being respected.

When selecting a minute through the combobox the property "courseMinutes" is not being respected.

<TimeKeeper 
  switchToMinuteOnHourSelect
  time={value}
  onDoneClick={onClose}
  coarseMinutes={10}
  forceCoarseMinutes
  onChange={({ formatted12 }) => onChange(formatted12)}
/>

Demo page showing 60 minutes on Android devices

When testing demo pages I can put minutes dial to 60 minutes.

See attached image

Typo on most of the examples

Hi,

I just wanted to point out that most of the code from the "examples" page have typos.

importing
import TimeKeeper from 'react-timekeeper';
using
<Timekeeper>

Notice the K uppercase.

Thanks for the component :)

Make `coarseMultiplier` configurable

I am trying to set minutes to span to 15 minutes intervals instead of 5.

Is it possible to add coarseMultiplier in the config ? Or maybe the entire CLOCK_DATA object ?

https://github.com/catc/react-timekeeper/blob/master/src/helpers/data.js#L15

minimumTime and maximumTime

Hi,
Is there a way to set minimumTime and maximumTime please ?
Thanks

Support for React 18

Upgrade lodash dependencies

Hi Author,

I noticed that the lodash.debounce package you are using is released in 6 years ago, maybe it's not safe today. So I would like to ask you a request, could you help to upgrade to latest lodash version instead? Such as lodash or lodash-es.

// lodash
import debounce from "lodash/debounce"

// lodash-es
import { debounce } from "lodash-es"

Many thanks!

Warning from React Spring: Got NaN while animating

Hello and thank you for the very nice component!

When using it I am trigerring a warning message on the console that seem to be emitted by the react Spring dependency: _Got NaN while animating

It seems to happen when mounting and unmounting the TimeKeeper component

_

React timekeeper breaks application due to react-spring

Hello,
recently the application breaks on start / build. Not sure if it's from react-spring or because the way it is used in react-timekeeper

react-timekeeper version used: 2.2.1
Fails due to react spring version: 9.7.1 with te following message:

./node_modules/@react-spring/web/dist/esm/index.js 113:11
Module parse failed: Unexpected token (113:11)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|       this.transforms = i;
|     }
>     _value = null;
|     get() {
|       return this._value || (this._value = this._get());

I created a new react application with only react and react-timekeer, for the following version of react:
"react": "17.0.1",
"react-dom": "17.0.1",
"react-scripts": "^3.4.0",
"react-timekeeper": "^2.2.1",

Added in the app code:

Started the app and it failed with the message above.

IE Bug caused by React Spring

I'm getting an error in IE due to the way that the React Spring is imported - I believe this is actually a bug with the version of React Spring, as referenced here:
pmndrs/react-spring#552

The error is:
SCRIPT1002: Syntax error

And the offending un-transpiled lines (specifically the arrow functions) are:
`
const is = {
arr: Array.isArray,
obj: a => Object.prototype.toString.call(a) === '[object Object]',
fun: a => typeof a === 'function',
str: a => typeof a === 'string',
num: a => typeof a === 'number',
und: a => a === void 0,
nul: a => a === null,
set: a => a instanceof Set,
map: a => a instanceof Map,

equ(a, b) {
if (typeof a !== typeof b) return false;
if (is.str(a) || is.num(a)) return a === b;
if (is.obj(a) && is.obj(b) && Object.keys(a).length + Object.keys(b).length === 0) return true;
let i;

for (i in a) if (!(i in b)) return false;

for (i in b) if (a[i] !== b[i]) return false;

return is.und(i) ? a === b : true;

}

};
`

Get time on onDoneClick

Hi,
I'd like to use this component in my app. What I want to do is make a single external API call after the done button is clicked.

Currently, I only see that the time is returned via the onChange event and that it returns after both the hours and minutes are selected.

What is the best way to return time after the minutes are selected? (eg with onDoneClick or only when minutes are selected or have a function I can call to retrieve the time)

thanks,
tag

Facing _reactSpring.useTransition is not a function

ERROR
(0 , _reactSpring.useTransition) is not a function
TypeError: (0 , _reactSpring.useTransition) is not a function
at ClockWrapper (http://localhost:3000/static/js/bundle.js:1251505:54)
at renderWithHooks (http://localhost:3000/static/js/bundle.js:520983:22)
at mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:525057:17)
at beginWork (http://localhost:3000/static/js/bundle.js:526350:20)
at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:510721:18)
at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:510765:20)
at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:510822:35)
at beginWork$1 (http://localhost:3000/static/js/bundle.js:530491:11)
at performUnitOfWork (http://localhost:3000/static/js/bundle.js:529777:16)
at workLoopSync (http://localhost:3000/static/js/bundle.js:529701:9)

please check below ss

"Could not parse time for disabled time range"

Just in case anyone is facing this error:

I was using new Date().getMinutes() to set the minutes in the disabledTimeRange object. So when the minutes returned were from 0 to 9 I would get the error "Could not parse time for disabled time range".
I think it caused by the TIME_PARSE_24 regex.

react-timekeeper/src/helpers/time.ts

Lines 4 to 5 in 19e5569

	const TIME_PARSE_MERIDIEM = new RegExp(/^(\d{1,2}?):(\d{2}?)\s?(am|pm)$/i)
	export const TIME_PARSE_24 = new RegExp(/^(\d{1,2}?):(\d{2}?)$/)

I fixed it by padding the minutes by 0 if it's value is less than 10.

When selecting AM or PM it also sets minutes.

I think the surface for selecting minutes and AM and PM are overlapping.

See here:

Demo.-.Large.540p.mov

BTW, awesome library! I will be sure to donate once my app starts making money. :)