catc / react-timekeeper Goto Github PK
View Code? Open in Web Editor NEWGoogle Keep app inspired time picker for react :clock4:
Home Page: https://catc.github.io/react-timekeeper
License: MIT License
Google Keep app inspired time picker for react :clock4:
Home Page: https://catc.github.io/react-timekeeper
License: MIT License
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 :)
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.
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
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:
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.
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?
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
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.
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?
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.
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!
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
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!
It's possible to change the done button text or apply a localization? Thanks
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.
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:
fomatted24
property from onChange callback is returned as 0:00
Expected behavior:
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
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.
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'}
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).
@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.
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
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
I fixed it by padding the minutes by 0 if it's value is less than 10.
Hi,
Is there a way to set minimumTime and maximumTime please ?
Thanks
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.
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
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?
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).
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!
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}
Current behaviour:
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
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?
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.
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:
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.
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;
}
};
`
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
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.
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?
12:xx AM times are being returned as 24:xx in 24 hour format, when it should be 00:xx
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"
I think the surface for selecting minutes and AM and PM are overlapping.
See here:
BTW, awesome library! I will be sure to donate once my app starts making money. :)
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.