React Clock TimePicker
An android inspired calendar time picker implemented in ReactJS
Usage
React = require('react');
TimePicker = require('../time_picker');
document.addEventListener('DOMContentLoaded', function() {
React.render(
<TimePicker onTimeChange={console.log} />,
document.body
);
});
Alternatively if you supply a ref, you can get hour
, minute
and isPM
from
the state
(see example/main.coffee) for an example.
CSS
- I included a basic stylesheet. I'm using a different stylesheet in my app.
- You could include the css file directly or import the less/scss files
- We are using BEM. In short, time-picker is the name of the component, __arm is contained within it. __arm--hour is a variation on the arm.
- Here's the full list of class names, you can tweak the SVG styles using css:
- time-picker
- time-picker__clock
- time-picker__arm
- time-picker__arm--hour
- time-picker__arm--minute
- time-picker__handle
- time-picker__handle--hour
- time-picker__handle--minute
- time-picker__face
- time-picker__center-point
- time-picker__hours (group containing hour numbers)
- time-picker__minutes (group containing minute numbers)
- time-picker__numbers
- time-picker__numbers--hidden (when not active)
- time-picker__numbers--hour
- time-picker__numbers--minute
- time-picker__ampm
- time-picker__ampm__toggle
- time-picker__ampm__toggle--active
- time-picker__am
- time-picker__pm
Options
name default description
------------------------------------------------------------------------------------
hour - current - starting hour (24 hour based)
minute - current - starting minute
onTimeChange - optional - if specified it'll get called when the time changes
areNumbersVisible - true - should show clock numbers
# unfortunately, some things can't be controlled via CSS easily
# pull requests welcome!
numberPadding - 20 - padding from the edge of the clock for each number
hourHandRadius - 20 - radius of the hour hand circle
minuteHandRadius - 15 - radius of minute hand circle
centerPointRadius - 10 - radius of the center point circle
Demo
Blog post: http://parrisneeds.coffee/2014/12/25/react-timepicker/
To try out the example yourself:
- clone the repo
npm install react
npm install
- run
npm run-script build-example
- open example/index.html
Compatibility
- Requires Browsers with SVG: IE9+
- Currently broken in Firefox and IE
- Developed using react ~0.12.0, likely works in 0.10.0
- Animations Require CSS3, but should be ignored otherwise
Task List
Contributions welcome but require unit tests!
- 24 clock mode (android does implement this)
- Add some material design effects when tapping on the circles
- A flash on tap of the handles
- Animate scaling
- Browser compatibility (IE and FF support)
- Test with marginally older versions of react
Contribution Notes
- you need to manually
npm install react
and uninstall it before younpm link
- does anyone know how to make this less annoying?
- the main time_picker.js file is generated on prepublish
- .less/.scss files are created from the .css file on prepubish
- example/main.js is gitignored and needs to be manually created
- your code will run through travis-ci