diff --git a/README.md b/README.md
index d109a07..6b76b7b 100644
--- a/README.md
+++ b/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
diff --git a/bower.json b/bower.json
new file mode 100644
index 0000000..413d6ca
--- /dev/null
+++ b/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": "wangshenwei@qq.com",
+ "homepage": "http://wangshenwei.com/"
+ }
+ ],
+ "homepage": "http://weareoutman.github.io/clockpicker/",
+ "repository": {
+ "type": "git",
+ "url": "git://github.com/weareoutman/clockpicker.git"
+ },
+ "dependencies": {
+ "jquery" : ">=1.7"
+ }
+}
\ No newline at end of file
diff --git a/dist/bootstrap-clockpicker.css b/dist/bootstrap-clockpicker.css
index bbd5ac2..339cebe 100644
--- a/dist/bootstrap-clockpicker.css
+++ b/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)
*/
diff --git a/dist/bootstrap-clockpicker.js b/dist/bootstrap-clockpicker.js
index 0047046..c288372 100644
--- a/dist/bootstrap-clockpicker.js
+++ b/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);
diff --git a/dist/bootstrap-clockpicker.min.css b/dist/bootstrap-clockpicker.min.css
index 966c92c..0c62a66 100644
--- a/dist/bootstrap-clockpicker.min.css
+++ b/dist/bootstrap-clockpicker.min.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)
*/.clockpicker .input-group-addon{cursor:pointer}.clockpicker-moving{cursor:move}.clockpicker-align-left.popover>.arrow{left:25px}.clockpicker-align-top.popover>.arrow{top:17px}.clockpicker-align-right.popover>.arrow{left:auto;right:25px}.clockpicker-align-bottom.popover>.arrow{top:auto;bottom:6px}.clockpicker-popover .popover-title{background-color:#fff;color:#999;font-size:24px;font-weight:700;line-height:30px;text-align:center}.clockpicker-popover .popover-title span{cursor:pointer}.clockpicker-popover .popover-content{background-color:#f8f8f8;padding:12px}.popover-content:last-child{border-bottom-left-radius:5px;border-bottom-right-radius:5px}.clockpicker-plate{background-color:#fff;border:1px solid #ccc;border-radius:50%;width:200px;height:200px;overflow:visible;position:relative;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.clockpicker-canvas,.clockpicker-dial{width:200px;height:200px;position:absolute;left:-1px;top:-1px}.clockpicker-minutes{visibility:hidden}.clockpicker-tick{border-radius:50%;color:#666;line-height:26px;text-align:center;width:26px;height:26px;position:absolute;cursor:pointer}.clockpicker-tick.active,.clockpicker-tick:hover{background-color:#c0e5f7;background-color:rgba(0,149,221,.25)}.clockpicker-button{background-image:none;background-color:#fff;border-width:1px 0 0;border-top-left-radius:0;border-top-right-radius:0;margin:0;padding:10px 0}.clockpicker-button:hover{background-image:none;background-color:#ebebeb}.clockpicker-button:focus{outline:0!important}.clockpicker-dial{-webkit-transition:-webkit-transform 350ms,opacity 350ms;-moz-transition:-moz-transform 350ms,opacity 350ms;-ms-transition:-ms-transform 350ms,opacity 350ms;-o-transition:-o-transform 350ms,opacity 350ms;transition:transform 350ms,opacity 350ms}.clockpicker-dial-out{opacity:0}.clockpicker-hours.clockpicker-dial-out{-webkit-transform:scale(1.2,1.2);-moz-transform:scale(1.2,1.2);-ms-transform:scale(1.2,1.2);-o-transform:scale(1.2,1.2);transform:scale(1.2,1.2)}.clockpicker-minutes.clockpicker-dial-out{-webkit-transform:scale(.8,.8);-moz-transform:scale(.8,.8);-ms-transform:scale(.8,.8);-o-transform:scale(.8,.8);transform:scale(.8,.8)}.clockpicker-canvas{-webkit-transition:opacity 175ms;-moz-transition:opacity 175ms;-ms-transition:opacity 175ms;-o-transition:opacity 175ms;transition:opacity 175ms}.clockpicker-canvas-out{opacity:.25}.clockpicker-canvas-bearing,.clockpicker-canvas-fg{stroke:none;fill:#0095dd}.clockpicker-canvas-bg{stroke:none;fill:#c0e5f7}.clockpicker-canvas-bg-trans{fill:rgba(0,149,221,.25)}.clockpicker-canvas line{stroke:#0095dd;stroke-width:1;stroke-linecap:round}
\ No newline at end of file
diff --git a/dist/bootstrap-clockpicker.min.js b/dist/bootstrap-clockpicker.min.js
index 4795e1d..6d892a9 100644
--- a/dist/bootstrap-clockpicker.min.js
+++ b/dist/bootstrap-clockpicker.min.js
@@ -1,6 +1,6 @@
/*!
- * 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)
*/
-!function(){function t(t){return document.createElementNS(a,t)}function i(t){return(10>t?"0":"")+t}function e(t){var i=++f+"";return t?t+i:i}function s(s,n){function a(t,i){var e=l.offset(),s=/^touch/.test(t.type),c=e.left+g,a=e.top+g,p=(s?t.originalEvent.touches[0]:t).pageX-c,u=(s?t.originalEvent.touches[0]:t).pageY-a,v=Math.sqrt(p*p+u*u),f=!1;if(!i||!(m-w>v||v>m+w)){t.preventDefault();var b=setTimeout(function(){o.addClass("clockpicker-moving")},200);h&&l.append(x.canvas),x.setHand(p,u,!i,!0),r.off(d+".clockpicker").on(d+".clockpicker",function(t){t.preventDefault();var i=(s?t.originalEvent.touches[0]:t).pageX-c,e=(s?t.originalEvent.touches[0]:t).pageY-a;(f||i!==p||e!==u)&&(f=!0,x.setHand(i,e,!1,!0))}),r.off(k+".clockpicker").one(k+".clockpicker",function(t){t.preventDefault();var e=(s?t.originalEvent.changedTouches[0]:t).pageX-c,h=(s?t.originalEvent.changedTouches[0]:t).pageY-a;(i||f)&&e===p&&h===u&&x.setHand(e,h),"hours"===x.currentView?x.toggleView("minutes",A/2):n.autoclose&&(x.minutesView.addClass("clockpicker-dial-out"),setTimeout(function(){x.done()},A/2)),l.prepend(z),clearTimeout(b),o.removeClass("clockpicker-moving"),r.off(d+".clockpicker")})}}var p=c(V),l=p.find(".clockpicker-plate"),v=p.find(".clockpicker-hours"),f=p.find(".clockpicker-minutes"),M="INPUT"===s.prop("tagName"),T=M?s:s.find("input"),C=s.find(".input-group-addon"),x=this;this.id=e("cp"),this.element=s,this.options=n,this.isAppended=!1,this.isShown=!1,this.currentView="hours",this.isInput=M,this.input=T,this.addon=C,this.popover=p,this.plate=l,this.hoursView=v,this.minutesView=f,this.spanHours=p.find(".clockpicker-span-hours"),this.spanMinutes=p.find(".clockpicker-span-minutes"),n.autoclose||c('").click(c.proxy(this.done,this)).appendTo(p),p.addClass(n.placement),p.addClass("clockpicker-align-"+n.align),this.spanHours.click(c.proxy(this.toggleView,this,"hours")),this.spanMinutes.click(c.proxy(this.toggleView,this,"minutes")),T.on("focus.clockpicker",c.proxy(this.show,this)),C.on("click.clockpicker",c.proxy(this.toggle,this));var H,E,S,I=c('');for(H=0;24>H;H+=1){E=I.clone(),S=H/6*Math.PI;var D=H>0&&13>H,P=D?b:m;E.css({left:g+Math.sin(S)*P-w,top:g-Math.cos(S)*P-w}),D&&E.css("font-size","120%"),E.html(0===H?"00":H),v.append(E),E.on(u,a)}for(H=0;60>H;H+=5)E=I.clone(),S=H/30*Math.PI,E.css({left:g+Math.sin(S)*m-w,top:g-Math.cos(S)*m-w}),E.css("font-size","120%"),E.html(i(H)),f.append(E),E.on(u,a);if(l.on(u,function(t){0===c(t.target).closest(".clockpicker-tick").length&&a(t,!0)}),h){var z=p.find(".clockpicker-canvas"),B=t("svg");B.setAttribute("class","clockpicker-svg"),B.setAttribute("width",y),B.setAttribute("height",y);var L=t("g");L.setAttribute("transform","translate("+g+","+g+")");var U=t("circle");U.setAttribute("class","clockpicker-canvas-bearing"),U.setAttribute("cx",0),U.setAttribute("cy",0),U.setAttribute("r",2);var W=t("line");W.setAttribute("x1",0),W.setAttribute("y1",0);var N=t("circle");N.setAttribute("class","clockpicker-canvas-bg"),N.setAttribute("r",w);var X=t("circle");X.setAttribute("class","clockpicker-canvas-fg"),X.setAttribute("r",3.5),L.appendChild(W),L.appendChild(N),L.appendChild(X),L.appendChild(U),B.appendChild(L),z.append(B),this.hand=W,this.bg=N,this.fg=X,this.bearing=U,this.g=L,this.canvas=z}}var o,c=window.$,n=c(window),r=c(document),a="http://www.w3.org/2000/svg",h="SVGAngle"in window&&function(){var t,i=document.createElement("div");return i.innerHTML="",t=(i.firstChild&&i.firstChild.namespaceURI)==a,i.innerHTML="",t}(),p=function(){var t=document.createElement("div").style;return"transition"in t||"WebkitTransition"in t||"MozTransition"in t||"msTransition"in t||"OTransition"in t}(),l="ontouchstart"in window,u=l?"touchstart":"mousedown",d=l?"touchmove":"mousemove",k=l?"touchend":"mouseup",v=navigator.vibrate?"vibrate":navigator.webkitVibrate?"webkitVibrate":null,f=0,g=100,m=80,b=54,w=13,y=2*g,A=p?350:1,V=['','
','
',''," : ",'',"
",'
","
','
','
',''," : ",'',"
",'
","
','
','
',''," : ",'',"
",'
","
','
','
',''," : ",'',"
",'
","
Set default value, input without addon, and manual operations:
- <input class="form-control" id="single-input" value="" placeholder="现在">
+ <input class="form-control" id="single-input" value="" placeholder="Now">
<button type="button" id="check-minutes">Check the minutes</button>
<script type="text/javascript">
@@ -171,7 +171,7 @@ Set default value, input without addon, and manual operations:
placement: 'bottom',
align: 'left',
autoclose: true,
- 'default': '20:48'
+ 'default': 'now'
});
// Manually toggle to the minutes view
@@ -195,7 +195,7 @@ Options
| default |
'' |
- default time, '13:14' e.g. |
+ default time, 'now' or '13:14' e.g. |
| placement |
@@ -222,6 +222,11 @@ Options
true |
vibrate the device when dragging clock hand |
+
+ | fromnow |
+ 0 |
+ set default time to * milliseconds from now (using with default = 'now') |
+
@@ -297,7 +302,7 @@ License
placement: 'bottom',
align: 'left',
autoclose: true,
- 'default': '20:48'
+ 'default': 'now'
});
// Manually toggle to the minutes view
diff --git a/package.json b/package.json
index 2ce41b8..de92c4d 100644
--- a/package.json
+++ b/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": "wangshenwei@qq.com",
diff --git a/src/clockpicker.js b/src/clockpicker.js
index ca66da9..d5fcbd3 100644
--- a/src/clockpicker.js
+++ b/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);
diff --git a/test/suites/basic.js b/test/suites/basic.js
index c9570bc..70ec0f1 100644
--- a/test/suites/basic.js
+++ b/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 = $('')
+ .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 = $('')
+ .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');
+});