Skip to content

Commit 4e6a259

Browse files
sshwsfcsshwsfc
committed
Add Clock Picker widget for timepicker
1 parent dde9d74 commit 4e6a259

7 files changed

Lines changed: 936 additions & 3 deletions

File tree

‎xadmin/static/xadmin/js/xadmin.widget.datetime.js‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,23 @@
5353
dp.update(new Date());
5454
})
5555
})
56+
if($.fn.clockpicker){
57+
f.find('.input-group.bootstrap-clockpicker').each(function(e){
58+
var el = $(this).find('input');
59+
var tp = el.clockpicker({
60+
autoclose: true,
61+
'default': 'now'
62+
});
63+
64+
$(this).find('button').click(function(e){
65+
var now = new Date()
66+
, value = now.getHours() + ':' + now.getMinutes();
67+
el.attr('value', value);
68+
})
69+
})
70+
}
5671
if($.fn.timepicker){
57-
f.find('.input-group.time').each(function(e){
72+
f.find('.input-group.bootstrap-timepicker').each(function(e){
5873
var el = $(this).find('input');
5974
var value = el.val();
6075
var tp = el.timepicker({

‎xadmin/static/xadmin/vendor/bootstrap-clockpicker/bootstrap-clockpicker.css‎

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
/*!
2+
* ClockPicker v0.0.7 for Bootstrap (http://weareoutman.github.io/clockpicker/)
3+
* Copyright 2014 Wang Shenwei.
4+
* Licensed under MIT (https://github.com/weareoutman/clockpicker/blob/gh-pages/LICENSE)
5+
*/
6+
7+
.clockpicker .input-group-addon {
8+
cursor: pointer;
9+
}
10+
.clockpicker-moving {
11+
cursor: move;
12+
}
13+
.clockpicker-align-left.popover > .arrow {
14+
left: 25px;
15+
}
16+
.clockpicker-align-top.popover > .arrow {
17+
top: 17px;
18+
}
19+
.clockpicker-align-right.popover > .arrow {
20+
left: auto;
21+
right: 25px;
22+
}
23+
.clockpicker-align-bottom.popover > .arrow {
24+
top: auto;
25+
bottom: 6px;
26+
}
27+
.clockpicker-popover .popover-title {
28+
background-color: #fff;
29+
color: #999;
30+
font-size: 24px;
31+
font-weight: bold;
32+
line-height: 30px;
33+
text-align: center;
34+
}
35+
.clockpicker-popover .popover-title span {
36+
cursor: pointer;
37+
}
38+
.clockpicker-popover .popover-content {
39+
background-color: #f8f8f8;
40+
padding: 12px;
41+
}
42+
.popover-content:last-child {
43+
border-bottom-left-radius: 5px;
44+
border-bottom-right-radius: 5px;
45+
}
46+
.clockpicker-plate {
47+
background-color: #fff;
48+
border: 1px solid #ccc;
49+
border-radius: 50%;
50+
width: 200px;
51+
height: 200px;
52+
overflow: visible;
53+
position: relative;
54+
/* Disable text selection highlighting. Thanks to Hermanya */
55+
-webkit-touch-callout: none;
56+
-webkit-user-select: none;
57+
-khtml-user-select: none;
58+
-moz-user-select: none;
59+
-ms-user-select: none;
60+
user-select: none;
61+
}
62+
.clockpicker-canvas,
63+
.clockpicker-dial {
64+
width: 200px;
65+
height: 200px;
66+
position: absolute;
67+
left: -1px;
68+
top: -1px;
69+
}
70+
.clockpicker-minutes {
71+
visibility: hidden;
72+
}
73+
.clockpicker-tick {
74+
border-radius: 50%;
75+
color: #666;
76+
line-height: 26px;
77+
text-align: center;
78+
width: 26px;
79+
height: 26px;
80+
position: absolute;
81+
cursor: pointer;
82+
}
83+
.clockpicker-tick.active,
84+
.clockpicker-tick:hover {
85+
background-color: rgb(192, 229, 247);
86+
background-color: rgba(0, 149, 221, .25);
87+
}
88+
.clockpicker-button {
89+
background-image: none;
90+
background-color: #fff;
91+
border-width: 1px 0 0;
92+
border-top-left-radius: 0;
93+
border-top-right-radius: 0;
94+
margin: 0;
95+
padding: 10px 0;
96+
}
97+
.clockpicker-button:hover {
98+
background-image: none;
99+
background-color: #ebebeb;
100+
}
101+
.clockpicker-button:focus {
102+
outline: none!important;
103+
}
104+
.clockpicker-dial {
105+
-webkit-transition: -webkit-transform 350ms, opacity 350ms;
106+
-moz-transition: -moz-transform 350ms, opacity 350ms;
107+
-ms-transition: -ms-transform 350ms, opacity 350ms;
108+
-o-transition: -o-transform 350ms, opacity 350ms;
109+
transition: transform 350ms, opacity 350ms;
110+
}
111+
.clockpicker-dial-out {
112+
opacity: 0;
113+
}
114+
.clockpicker-hours.clockpicker-dial-out {
115+
-webkit-transform: scale(1.2, 1.2);
116+
-moz-transform: scale(1.2, 1.2);
117+
-ms-transform: scale(1.2, 1.2);
118+
-o-transform: scale(1.2, 1.2);
119+
transform: scale(1.2, 1.2);
120+
}
121+
.clockpicker-minutes.clockpicker-dial-out {
122+
-webkit-transform: scale(.8, .8);
123+
-moz-transform: scale(.8, .8);
124+
-ms-transform: scale(.8, .8);
125+
-o-transform: scale(.8, .8);
126+
transform: scale(.8, .8);
127+
}
128+
.clockpicker-canvas {
129+
-webkit-transition: opacity 175ms;
130+
-moz-transition: opacity 175ms;
131+
-ms-transition: opacity 175ms;
132+
-o-transition: opacity 175ms;
133+
transition: opacity 175ms;
134+
}
135+
.clockpicker-canvas-out {
136+
opacity: 0.25;
137+
}
138+
.clockpicker-canvas-bearing,
139+
.clockpicker-canvas-fg {
140+
stroke: none;
141+
fill: rgb(0, 149, 221);
142+
}
143+
.clockpicker-canvas-bg {
144+
stroke: none;
145+
fill: rgb(192, 229, 247);
146+
}
147+
.clockpicker-canvas-bg-trans {
148+
fill: rgba(0, 149, 221, .25);
149+
}
150+
.clockpicker-canvas line {
151+
stroke: rgb(0, 149, 221);
152+
stroke-width: 1;
153+
stroke-linecap: round;
154+
/*shape-rendering: crispEdges;*/
155+
}
156+
.clockpicker-button.am-button {
157+
margin: 1px;
158+
padding: 5px;
159+
border: 1px solid rgba(0, 0, 0, .2);
160+
border-radius: 4px;
161+
162+
}
163+
.clockpicker-button.pm-button {
164+
margin: 1px 1px 1px 136px;
165+
padding: 5px;
166+
border: 1px solid rgba(0, 0, 0, .2);
167+
border-radius: 4px;
168+
}

0 commit comments

Comments
 (0)