Default time can be setted to now

README.md

@@ -69,12 +69,13 @@ if (something) {
 
 | Name | Default | Description |
 | ---- | ------- | ----------- |
-| default | '' | default time, '13:14' e.g. |
+| 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 |
 | vibrate | true | vibrate the device when dragging clock hand |
+| fromnow | 0 | set default time to * milliseconds from now (using with default = 'now') |
 
 ## Operations
 
@@ -117,16 +118,22 @@ gulp
 
 ## Todo
 
-- [√] Compiling CSS and JavaScript.
-- [√] Comments in code.
-- [√] Add tests.
-- [√] Add documentation and more examples.
-- [√] Functional operations, since v0.0.5.
 - [ ] Auto placement and align.
 - [ ] Events.
 - [ ] Customize format.
 - [ ] Seconds View ?
 
+## Change log
+
+0.0.6
+
+* Default time can be setted to `now`.
+* Registered as a bower package.
+
+0.0.5
+
+* Functional operations.
+
 ## License
 
 MIT

bower.json

@@ -0,0 +1,29 @@
+{
+  "name": "clockpicker",
+  "description": "A clock-style timepicker for Bootstrap (or jQuery)",
+  "version": "0.0.6",
+  "main": [
+	  "dist/jquery-clockpicker.js",
+	  "dist/jquery-clockpicker.css"],
+  "license": "MIT",
+  "ignore": [
+  	"*",
+  	"!dist/*"
+  ],
+  "keywords": ["timepicker", "jquery"],
+  "authors": [
+	  {
+	    "name": "Wang Shenwei",
+	    "email": "[email protected]",
+	    "homepage": "http://wangshenwei.com/"
+	  }
+  ],
+  "homepage": "http://weareoutman.github.io/clockpicker/",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/weareoutman/clockpicker.git"
+  },
+  "dependencies": {
+    "jquery" : ">=1.7"
+  }
+}

dist/bootstrap-clockpicker.css

@@ -1,5 +1,5 @@
 /*!
- * ClockPicker v0.0.5 for Bootstrap (http://weareoutman.github.io/clockpicker/)
+ * ClockPicker v0.0.6 for Bootstrap (http://weareoutman.github.io/clockpicker/)
  * Copyright 2014 Wang Shenwei.
  * Licensed under MIT (https://github.com/weareoutman/clockpicker/blob/master/LICENSE)
  */

dist/bootstrap-clockpicker.js

@@ -1,5 +1,5 @@
 /*!
- * ClockPicker v0.0.5 (http://weareoutman.github.io/clockpicker/)
+ * ClockPicker v0.0.6 (http://weareoutman.github.io/clockpicker/)
  * Copyright 2014 Wang Shenwei.
  * Licensed under MIT (https://github.com/weareoutman/clockpicker/blob/master/LICENSE)
  */
@@ -284,10 +284,11 @@
 
 	// Default options
 	ClockPicker.DEFAULTS = {
-		'default': '',       // default value, '13:14' e.g.
+		'default': '',       // default time, 'now' or '13:14' e.g.
+		fromnow: 0,          // set default time to * milliseconds from now (using with default = 'now')
 		placement: 'bottom', // clock popover placement
 		align: 'left',       // popover arrow align
-		donetext: '完成',     // done button text
+		donetext: '完成',    // done button text
 		autoclose: false,    // auto close when minute is selected
 		vibrate: true        // vibrate the device when dragging clock hand
 	};
@@ -372,6 +373,13 @@
 
 		// Get the time
 		var value = ((this.input.prop('value') || this.options['default'] || '') + '').split(':');
+		if (value[0] === 'now') {
+			var now = new Date(+ new Date() + this.options.fromnow);
+			value = [
+				now.getHours(),
+				now.getMinutes()
+			];
+		}
 		this.hours = + value[0] || 0;
 		this.minutes = + value[1] || 0;
 		this.spanHours.html(leadingZero(this.hours));
@@ -500,7 +508,7 @@
 
 		// Once hours or minutes changed, vibrate the device
 		if (this[this.currentView] !== value) {
-			if (vibrate) {
+			if (vibrate && this.options.vibrate) {
 				// Do not vibrate too frequently
 				if (! this.vibrateTimer) {
 					navigator[vibrate](10);

dist/jquery-clockpicker.css

@@ -1,5 +1,5 @@
 /*!
- * ClockPicker v0.0.5 for jQuery (http://weareoutman.github.io/clockpicker/)
+ * ClockPicker v0.0.6 for jQuery (http://weareoutman.github.io/clockpicker/)
  * Copyright 2014 Wang Shenwei.
  * Licensed under MIT (https://github.com/weareoutman/clockpicker/blob/master/LICENSE)
  * 

dist/jquery-clockpicker.js

@@ -1,5 +1,5 @@
 /*!
- * ClockPicker v0.0.5 (http://weareoutman.github.io/clockpicker/)
+ * ClockPicker v0.0.6 (http://weareoutman.github.io/clockpicker/)
  * Copyright 2014 Wang Shenwei.
  * Licensed under MIT (https://github.com/weareoutman/clockpicker/blob/master/LICENSE)
  */
@@ -284,10 +284,11 @@
 
 	// Default options
 	ClockPicker.DEFAULTS = {
-		'default': '',       // default value, '13:14' e.g.
+		'default': '',       // default time, 'now' or '13:14' e.g.
+		fromnow: 0,          // set default time to * milliseconds from now (using with default = 'now')
 		placement: 'bottom', // clock popover placement
 		align: 'left',       // popover arrow align
-		donetext: '完成',     // done button text
+		donetext: '完成',    // done button text
 		autoclose: false,    // auto close when minute is selected
 		vibrate: true        // vibrate the device when dragging clock hand
 	};
@@ -372,6 +373,13 @@
 
 		// Get the time
 		var value = ((this.input.prop('value') || this.options['default'] || '') + '').split(':');
+		if (value[0] === 'now') {
+			var now = new Date(+ new Date() + this.options.fromnow);
+			value = [
+				now.getHours(),
+				now.getMinutes()
+			];
+		}
 		this.hours = + value[0] || 0;
 		this.minutes = + value[1] || 0;
 		this.spanHours.html(leadingZero(this.hours));
@@ -500,7 +508,7 @@
 
 		// Once hours or minutes changed, vibrate the device
 		if (this[this.currentView] !== value) {
-			if (vibrate) {
+			if (vibrate && this.options.vibrate) {
 				// Do not vibrate too frequently
 				if (! this.vibrateTimer) {
 					navigator[vibrate](10);

index.html

@@ -160,18 +160,18 @@ <h4>Set default value, input without addon, and manual operations:</h4>
 		<div class="clearfix">
 			<div class="pull-center clearfix" style="margin-bottom:10px;">
 				<button type="button" class="btn btn-default pull-right" id="check-minutes">Check the minutes</button>
-				<input class="form-control pull-right" id="single-input" value="" placeholder="现在" style="width:80px;margin-right:20px;">
+				<input class="form-control pull-right" id="single-input" value="" placeholder="Now" style="width:80px;margin-right:20px;">
 			</div>
 		</div>
-		<pre class="hljs-pre"><code class="html">&lt;input class="form-control" id="single-input" value="" placeholder="现在"&gt;
+		<pre class="hljs-pre"><code class="html">&lt;input class="form-control" id="single-input" value="" placeholder="Now"&gt;
 &lt;button type="button" id="check-minutes"&gt;Check the minutes&lt;/button&gt;
 
 &lt;script type="text/javascript"&gt;
 var input = $('#single-input').clockpicker({
 	placement: 'bottom',
 	align: 'left',
 	autoclose: true,
-	'default': '20:48'
+	'default': 'now'
 });
 
 // Manually toggle to the minutes view
@@ -195,7 +195,7 @@ <h3>Options</h3>
 	<tr>
 	<td>default</td>
 	<td>''</td>
-	<td>default time, '13:14' e.g.</td>
+	<td>default time, 'now' or '13:14' e.g.</td>
 	</tr>
 	<tr>
 	<td>placement</td>
@@ -222,6 +222,11 @@ <h3>Options</h3>
 	<td>true</td>
 	<td>vibrate the device when dragging clock hand</td>
 	</tr>
+	<tr>
+	<td>fromnow</td>
+	<td>0</td>
+	<td>set default time to * milliseconds from now (using with default = 'now')</td>
+	</tr>
 	</tbody>
 	</table>
 
@@ -297,7 +302,7 @@ <h3>License</h3>
 	placement: 'bottom',
 	align: 'left',
 	autoclose: true,
-	'default': '20:48'
+	'default': 'now'
 });
 
 // Manually toggle to the minutes view

package.json

@@ -1,7 +1,7 @@
 {
   "name": "clockpicker",
   "description": "A clock-style timepicker for Bootstrap (or jQuery)",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "author": {
     "name": "Wang Shenwei",
     "email": "[email protected]",

src/clockpicker.js

@@ -284,10 +284,11 @@
 
 	// Default options
 	ClockPicker.DEFAULTS = {
-		'default': '',       // default value, '13:14' e.g.
+		'default': '',       // default time, 'now' or '13:14' e.g.
+		fromnow: 0,          // set default time to * milliseconds from now (using with default = 'now')
 		placement: 'bottom', // clock popover placement
 		align: 'left',       // popover arrow align
-		donetext: '完成',     // done button text
+		donetext: '完成',    // done button text
 		autoclose: false,    // auto close when minute is selected
 		vibrate: true        // vibrate the device when dragging clock hand
 	};
@@ -372,6 +373,13 @@
 
 		// Get the time
 		var value = ((this.input.prop('value') || this.options['default'] || '') + '').split(':');
+		if (value[0] === 'now') {
+			var now = new Date(+ new Date() + this.options.fromnow);
+			value = [
+				now.getHours(),
+				now.getMinutes()
+			];
+		}
 		this.hours = + value[0] || 0;
 		this.minutes = + value[1] || 0;
 		this.spanHours.html(leadingZero(this.hours));
@@ -500,7 +508,7 @@
 
 		// Once hours or minutes changed, vibrate the device
 		if (this[this.currentView] !== value) {
-			if (vibrate) {
+			if (vibrate && this.options.vibrate) {
 				// Do not vibrate too frequently
 				if (! this.vibrateTimer) {
 					navigator[vibrate](10);

test/suites/basic.js

@@ -154,3 +154,32 @@ test('clockpicker manual operations', function(){
     ok(picker.popover.parent().length === 0, 'clockpicker popover is removed');
     ok(! input.data('clockpicker'), 'clockpicker is removed manually');
 });
+
+test('clockpicker default time is now', function(){
+    var input = $('<input />')
+            .appendTo('#qunit-fixture');
+
+    input.clockpicker({
+        'default': 'now'
+    });
+    var now = new Date();
+    var picker = input.data('clockpicker');
+    input.clockpicker('show');
+    strictEqual(picker.hours, now.getHours(), 'hours is setted to now');
+    strictEqual(picker.minutes, now.getMinutes(), 'minutes is setted to now');
+
+    input.remove();
+    input = $('<input />')
+            .appendTo('#qunit-fixture');
+
+    var fromnow = 9e4;
+    input.clockpicker({
+        'default': 'now',
+        fromnow: fromnow
+    });
+    now = new Date(+ new Date() + fromnow);
+    picker = input.data('clockpicker');
+    input.clockpicker('show');
+    strictEqual(picker.hours, now.getHours(), 'hours is setted to now');
+    strictEqual(picker.minutes, now.getMinutes(), 'minutes is setted to now');
+});