https://github.com/weareoutman/clockpicker
A clock-style timepicker for Bootstrap (or jQuery). Sorry but no longer maintained.
https://github.com/weareoutman/clockpicker
Last synced: 4 months ago
JSON representation
A clock-style timepicker for Bootstrap (or jQuery). Sorry but no longer maintained.
- Host: GitHub
- URL: https://github.com/weareoutman/clockpicker
- Owner: weareoutman
- License: mit
- Archived: true
- Created: 2014-04-20T15:12:50.000Z (almost 11 years ago)
- Default Branch: gh-pages
- Last Pushed: 2021-07-07T06:06:36.000Z (over 3 years ago)
- Last Synced: 2024-10-29T20:27:22.530Z (4 months ago)
- Language: JavaScript
- Homepage: http://weareoutman.github.io/clockpicker/
- Size: 1010 KB
- Stars: 1,992
- Watchers: 76
- Forks: 538
- Open Issues: 104
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- starred-awesome - clockpicker - A clock-style timepicker for Bootstrap (or jQuery). Sorry but no longer maintained. (JavaScript)
README
# ClockPicker [](http://badge.fury.io/bo/clockpicker) [](https://travis-ci.org/weareoutman/clockpicker) [](https://david-dm.org/weareoutman/clockpicker#info=devDependencies)
A clock-style timepicker for Bootstrap (or jQuery).
[Documentation and examples](http://weareoutman.github.io/clockpicker/).
## 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
```html
$('.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');
}
```
## 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 | | callback function triggered after the colorpicker has been initiated |
| beforeShow | | callback function triggered before popup is shown |
| afterShow | | callback function triggered after popup is shown |
| beforeHide | | callback function triggered before popup is hidden Note:will be triggered between a beforeDone and afterDone |
| afterHide | | callback function triggered after popup is hidden Note:will be triggered between a beforeDone and afterDone |
| beforeHourSelect | | callback function triggered before user makes an hour selection |
| afterHourSelect | | callback function triggered after user makes an hour selection |
| beforeDone | | callback function triggered before time is written to input |
| afterDone | | callback function triggered 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
```bash
clockpicker/
├── dist/
│ ├── bootstrap-clockpicker.css # full code for bootstrap
│ ├── bootstrap-clockpicker.js
│ ├── bootstrap-clockpicker.min.css # compiled and minified files for bootstrap
│ ├── bootstrap-clockpicker.min.js
│ ├── jquery-clockpicker.css # full code for jquery
│ ├── jquery-clockpicker.js
│ ├── jquery-clockpicker.min.css # compiled and minified files for jquery
│ └── jquery-clockpicker.min.js
└── src/ # source code
├── clockpicker.css
├── clockpicker.js
└── standalone.css # some styles picked from bootstrap
```
## Development
```bash
git clone https://github.com/weareoutman/clockpicker.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.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
MIT