clockpicker-umd
v0.4.6
Published
A clock-style timepicker for Bootstrap (or jQuery)
Downloads
8
Readme
ClockPicker
A clock-style timepicker for Bootstrap (or jQuery). Documentation and examples.
Browser support
All major browsers are supported, including IE 9+. It should look and behave well enough in IE 8.
Device support
Both desktop and mobile device are supported. It also works great in touch screen device.
Dependencies
ClockPicker was designed for Bootstrap in the beginning. So Bootstrap (and jQuery) is the only dependency(s).
Since it only used .popover
and some of .btn
styles of Bootstrap, I picked these styles to build a jQuery plugin.
Feel free to use jquery-*
files instead of bootstrap-*
, for non-bootstrap project.
Usage
<!-- Bootstrap stylesheet -->
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
<!-- ClockPicker Stylesheet -->
<link rel="stylesheet" type="text/css" href="dist/bootstrap-clockpicker.min.css">
<!-- Input group, just add class 'clockpicker', and optional data-* -->
<div class="input-group clockpicker" data-placement="right" data-align="top" data-autoclose="true">
<input type="text" class="form-control" value="09:32">
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
<!-- Or just a input -->
<input id="demo-input" />
<!-- jQuery and Bootstrap scripts -->
<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
<!-- ClockPicker script -->
<script type="text/javascript" src="dist/clockpicker.min.js"></script>
<script type="text/javascript">
$('.clockpicker').clockpicker()
.find('input').change(function(){
// TODO: time changed
console.log(this.value);
});
$('#demo-input').clockpicker({
autoclose: true
});
if (something) {
// Manual operations (after clockpicker is initialized).
$('#demo-input').clockpicker('show') // Or hide, remove ...
.clockpicker('toggleView', 'minutes');
}
</script>
Options
| Name | Default | Description |
| ---- | ------- | ----------- |
| default | '' | default time, 'now' or '13:14' e.g. |
| placement | 'bottom' | popover placement |
| align | 'left' | popover arrow align |
| donetext | '完成' | done button text |
| autoclose | false | auto close when minute is selected |
| twelvehour | false | enables twelve hour mode with AM & PM buttons |
| vibrate | true | vibrate the device when dragging clock hand |
| fromnow | 0 | set default time to * milliseconds from now (using with default = 'now') |
| init | undefined
| callback function triggered after the colorpicker has been initiated |
| beforeShow | undefined
| callback function triggered with the current value
before popup is shown |
| afterShow | undefined
| callback function triggered with the current value
after popup is shown |
| beforeHide | undefined
| callback function triggered with the current value
before popup is hidden Note:will be triggered between a beforeDone and afterDone |
| afterHide | undefined
| callback function triggered with the current value
after popup is hidden Note:will be triggered between a beforeDone and afterDone |
| beforeHourSelect | undefined
| callback function triggered with the current value
before user makes an hour selection |
| afterHourSelect | undefined
| callback function triggered with the current value
after user makes an hour selection |
| beforeDone | undefined
| callback function triggered with the current value
before time is written to input |
| afterDone | undefined
| callback function triggered with the current value
after time is written to input |
Operations
| operation | Arguments | Description | | --------- | --------- | ----------- | | show | | show the clockpicker | | hide | | hide the clockpicker | | remove | | remove the clockpicker (and event listeners) | | toggleView | 'hours' or 'minutes' | toggle to hours or minutes view |
What's included
clockpicker/
├── dist/
│ ├── bootstrap-clockpicker.css # full code for bootstrap
│ ├── bootstrap-clockpicker.min.css # compiled and minified files for bootstrap
│ ├── standalone-clockpicker.css # full code for jquery
│ ├── standalone-clockpicker.min.css # compiled and minified files for jquery
│ ├── clockpicker.js
│ └── clockpicker.min.js
└── src/ # source code
├── clockpicker.css
├── clockpicker.js
└── standalone.css # some styles picked from bootstrap
Development
git clone https://github.com/martinemmert/clockpicker-umd.git
cd clockpicker
npm install -g gulp
npm install
gulp
# gulp test
Todo
- [ ] Auto placement and align.
- [ ] Events.
- [ ] Customize format.
- [ ] Seconds View ?
Change log
0.4.0
- renames the project to
colorpicker-umd
0.3.0
- adds current value as argument to all callbacks besides
init
0.2.0
- adds umd factory pattern to support commonjs and amd loaders
0.1.0 (Maintenance Relase)
- Updates build scripts
- Renames
jquery-
prefix tostandalone-
- Removes duplicate js export, use
clockpicker.js
andclockpicker.min.js
instead of the prefixed ones - updates qunit tests to use the correct files
0.0.7
- Enables twelve hour mode with AM & PM buttons.
0.0.6
- Default time can be setted to
now
. - Registered as a bower package.
0.0.5
- Functional operations.
License
The MIT License (MIT)
Copyright (c) 2014 Wang Shenwei Copyright (c) 2018 Martin Emmert
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.