npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

clockpicker-duration

v0.5.8

Published

A clock-style timepicker for Bootstrap (or jQuery)

Downloads

19

Readme

ClockPicker Bower version Build Status devDependency Status

A clock-style timepicker for Bootstrap (or jQuery). Documentation and examples.

Screenshot clockpicker-12-hour-screenshot

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/bootstrap-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');

	// Get the time of single clockpicker
	var dateObject = $('#demo-input').clockpicker('getTime');
	console.log(dateObject);

	// Get the time of a clockpicker list
	$('.clockpicker').clockpicker('getTime', function(dateObject) {
		// The clockpicker element
		console.log(this);
		console.log(dateObject);
	});
}
</script>

Options

| Name | Default | Description | | ---- | ------- | ----------- | | default | '' | default time, 'now', Date object or '13:14' e.g. | | placement | 'bottom' | popover placement. Supported values: 'top', 'bottom', 'left', 'right', 'top-adaptive', 'bottom-adaptive'. | | 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' or default = Date) | | hourstep | 1 | allow to multi increment the hour | | minutestep | 1 | allow to multi increment the minute | | ampmSubmit | false | allow submit with AM and PM buttons instead of the minute selection/picker | | addonOnly | false | disables the focus and click triggers on the input field (to allow delegation to native pickers) | | 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 | | getTime | Optional callback (Can be used for list of elements) | Returns Date object. (Will call the callback if callback is given) |

What's included

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

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.1.0

  • Able to set incremental step for hours and minutes
  • Added getTime
  • Able to set the default value via Date object
  • Some AM & PM bug fixes

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