alanclarke / time-input Goto Github PK

View Code? Open in Web Editor NEW

28.0 2.0 36.0 423 KB

A keyboard friendly react component for capturing time

JavaScript 100.00%

time-input's Introduction

time-input

A keyboard friendly react component for capturing time

features

small UI surface area (just a form input)
keyboard friendly (can type times, use up and down keys to go forwards and backwards in time, can tab between time groups)
simple api (infers most options from value, e.g. 24hr time or 12hr, whether to display seconds and milliseconds)
easy going UX: ignores invalid input and simply skips over separator if omitted
no dependencies
95% test coverage

installation

npm install time-input

usage

var ReactDom = require('ReactDom')
var TimeInput = require('time-input')

function render (value) {
  ReactDom.render((
    <TimeInput value={value} onChange={render}/>
  ), document.body)
}

render()

valid formats

/*
 * '12:00'
 * '12:00 AM'
 * '12:00:00'
 * '12:00:00:000 AM'
*/

run tests

npm test

demo

link

time-input's People

Contributors

Stargazers

Watchers

time-input's Issues

Infer defaultValue format from value

currently where there is a mismatch between default value format and value format, there be dragons

UX Questions

Hi @alanclarke, thank you for putting out this library - seems very useful.

As I began implementing, I noticed a few things which I wanted to bring up -

Support for placeholder: I feel like if you don't have a value to initialize with, showing a placeholder would be good user experience. The placeholder could be time or a string (like 'enter time').
Guides: This is especially useful when one begins to type, as it guides the user. So, lets say a user starts entering the number I am thinking of being able to show the separator and no text (or grayed out text). This, in conjunction with the a placeholder time makes for a good user experience as the placeholder doesn't disapper but just grays out acting as a guide.
When we enter the two digits for the hours, I feel like the cursor should move past the separator seeing how it moved to the next digit previously (when you enter the first hour digit).
I noticed that the input has type=text. I wonder if it would be more semantic to have it be type=time?

Thank you!

Deprecations warnings ([email protected])

Hello!

Recently React 15.5 was released, and with it come some deprecations for React.createClass and React.propTypes. At present it looks like time-input is still using the deprecated API - causing warnings to be emitted to the JS console and when running tests. Would it be possible to update to the new API? Happy to provide a PR.

More flexible formatting

@mattbasta and @Murriouz have expressed requirements to handle more diverse time formats, including:

non-leading zeros
59:59:59

Disable Backspace

For my project I wanted to disable backspace completely. How do I do it?

Demo link is dead

see subject.

Allow implementors to provide their own `validate()` function

The validate() function that's provided only allows for a very specific timestamp format, specifically timestamps with leading zeroes. It would be great if a validate={} prop could be passed that would allow the implementor to provide their own validator.

12h time is badly validated

You can type 24 hours for example which is invalid in both cases.

Should time-input accept and provide Date instances?

Better UX flow for hour input

When the first input is greater than one, like '5', it should move it to become '05:' and position it after the colon.

Is this project still being maintained?

There's no license specified in this project and the issue for that hasn't been answered. #29
The demo link is not working. #32
There's a serious bug (IMO) that hasn't been answered #34

These lead to my doubt about the maintenance status of this project. I'm willing to help if you need some more maintainer.

Also, @radumardale has made some great work improving this project in his fork (https://github.com/radumardale/react-keyboard-time-input). Perhaps you two might consider merging these two projects together.

const MyCustomInput = (props) => <input data-custom-attribute="custom" {...props} />;
return <TimeInput inputComponent={MyCustomInput} />

What do you think? I could create a pull request with this suggestion if you agree it.