Skip to content

Commit 140bb7a

Browse files
eternicodeeternicode
committed
Merge in inline datepicker from vitalets/master
Closes uxsolutions#166
2 parents 6d3c4db + 0775267 commit 140bb7a

File tree

6 files changed

+253
-150
lines changed

6 files changed

+253
-150
lines changed

‎README.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,12 @@ Attached to non-field element, using events to work with the date values.
8585
});
8686
});
8787

88+
As inline datepicker:
89+
90+
<div id="datepicker"></div>
91+
######
92+
$('#datepicker').datepicker();
93+
8894

8995
# Using bootstrap-datepicker.js
9096

‎css/datepicker.css

Lines changed: 124 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,6 @@
88
*
99
*/
1010
.datepicker {
11-
top: 0;
12-
left: 0;
1311
padding: 4px;
1412
margin-top: 1px;
1513
-webkit-border-radius: 4px;
@@ -20,7 +18,14 @@
2018
}*/
2119

2220
}
23-
.datepicker:before {
21+
.datepicker-inline {
22+
width: 220px;
23+
}
24+
.datepicker-dropdown {
25+
top: 0;
26+
left: 0;
27+
}
28+
.datepicker-dropdown:before {
2429
content: '';
2530
display: inline-block;
2631
border-left: 7px solid transparent;
@@ -31,7 +36,7 @@
3136
top: -7px;
3237
left: 6px;
3338
}
34-
.datepicker:after {
39+
.datepicker-dropdown:after {
3540
content: '';
3641
display: inline-block;
3742
border-left: 6px solid transparent;
@@ -64,25 +69,30 @@
6469
-webkit-border-radius: 4px;
6570
-moz-border-radius: 4px;
6671
border-radius: 4px;
72+
border: none;
6773
}
68-
.datepicker td.day:hover {
74+
.table-striped .datepicker table tr td,
75+
.table-striped .datepicker table tr th {
76+
background-color: transparent;
77+
}
78+
.datepicker table tr td.day:hover {
6979
background: #eeeeee;
7080
cursor: pointer;
7181
}
72-
.datepicker td.old,
73-
.datepicker td.new {
82+
.datepicker table tr td.old,
83+
.datepicker table tr td.new {
7484
color: #999999;
7585
}
76-
.datepicker td.disabled,
77-
.datepicker td.disabled:hover {
86+
.datepicker table tr td.disabled,
87+
.datepicker table tr td.disabled:hover {
7888
background: none;
7989
color: #999999;
8090
cursor: default;
8191
}
82-
.datepicker td.today,
83-
.datepicker td.today:hover,
84-
.datepicker td.today.disabled,
85-
.datepicker td.today.disabled:hover {
92+
.datepicker table tr td.today,
93+
.datepicker table tr td.today:hover,
94+
.datepicker table tr td.today.disabled,
95+
.datepicker table tr td.today.disabled:hover {
8696
background-color: #fde19a;
8797
background-image: -moz-linear-gradient(top, #fdd49a, #fdf59a);
8898
background-image: -ms-linear-gradient(top, #fdd49a, #fdf59a);
@@ -94,44 +104,44 @@
94104
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdd49a', endColorstr='#fdf59a', GradientType=0);
95105
border-color: #fdf59a #fdf59a #fbed50;
96106
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
97-
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
98-
}
99-
.datepicker td.today:hover,
100-
.datepicker td.today:hover:hover,
101-
.datepicker td.today.disabled:hover,
102-
.datepicker td.today.disabled:hover:hover,
103-
.datepicker td.today:active,
104-
.datepicker td.today:hover:active,
105-
.datepicker td.today.disabled:active,
106-
.datepicker td.today.disabled:hover:active,
107-
.datepicker td.today.active,
108-
.datepicker td.today:hover.active,
109-
.datepicker td.today.disabled.active,
110-
.datepicker td.today.disabled:hover.active,
111-
.datepicker td.today.disabled,
112-
.datepicker td.today:hover.disabled,
113-
.datepicker td.today.disabled.disabled,
114-
.datepicker td.today.disabled:hover.disabled,
115-
.datepicker td.today[disabled],
116-
.datepicker td.today:hover[disabled],
117-
.datepicker td.today.disabled[disabled],
118-
.datepicker td.today.disabled:hover[disabled] {
107+
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
108+
}
109+
.datepicker table tr td.today:hover,
110+
.datepicker table tr td.today:hover:hover,
111+
.datepicker table tr td.today.disabled:hover,
112+
.datepicker table tr td.today.disabled:hover:hover,
113+
.datepicker table tr td.today:active,
114+
.datepicker table tr td.today:hover:active,
115+
.datepicker table tr td.today.disabled:active,
116+
.datepicker table tr td.today.disabled:hover:active,
117+
.datepicker table tr td.today.active,
118+
.datepicker table tr td.today:hover.active,
119+
.datepicker table tr td.today.disabled.active,
120+
.datepicker table tr td.today.disabled:hover.active,
121+
.datepicker table tr td.today.disabled,
122+
.datepicker table tr td.today:hover.disabled,
123+
.datepicker table tr td.today.disabled.disabled,
124+
.datepicker table tr td.today.disabled:hover.disabled,
125+
.datepicker table tr td.today[disabled],
126+
.datepicker table tr td.today:hover[disabled],
127+
.datepicker table tr td.today.disabled[disabled],
128+
.datepicker table tr td.today.disabled:hover[disabled] {
119129
background-color: #fdf59a;
120130
}
121-
.datepicker td.today:active,
122-
.datepicker td.today:hover:active,
123-
.datepicker td.today.disabled:active,
124-
.datepicker td.today.disabled:hover:active,
125-
.datepicker td.today.active,
126-
.datepicker td.today:hover.active,
127-
.datepicker td.today.disabled.active,
128-
.datepicker td.today.disabled:hover.active {
131+
.datepicker table tr td.today:active,
132+
.datepicker table tr td.today:hover:active,
133+
.datepicker table tr td.today.disabled:active,
134+
.datepicker table tr td.today.disabled:hover:active,
135+
.datepicker table tr td.today.active,
136+
.datepicker table tr td.today:hover.active,
137+
.datepicker table tr td.today.disabled.active,
138+
.datepicker table tr td.today.disabled:hover.active {
129139
background-color: #fbf069 \9;
130140
}
131-
.datepicker td.active,
132-
.datepicker td.active:hover,
133-
.datepicker td.active.disabled,
134-
.datepicker td.active.disabled:hover {
141+
.datepicker table tr td.active,
142+
.datepicker table tr td.active:hover,
143+
.datepicker table tr td.active.disabled,
144+
.datepicker table tr td.active.disabled:hover {
135145
background-color: #006dcc;
136146
background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
137147
background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
@@ -143,43 +153,43 @@
143153
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
144154
border-color: #0044cc #0044cc #002a80;
145155
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
146-
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
156+
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
147157
color: #fff;
148158
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
149159
}
150-
.datepicker td.active:hover,
151-
.datepicker td.active:hover:hover,
152-
.datepicker td.active.disabled:hover,
153-
.datepicker td.active.disabled:hover:hover,
154-
.datepicker td.active:active,
155-
.datepicker td.active:hover:active,
156-
.datepicker td.active.disabled:active,
157-
.datepicker td.active.disabled:hover:active,
158-
.datepicker td.active.active,
159-
.datepicker td.active:hover.active,
160-
.datepicker td.active.disabled.active,
161-
.datepicker td.active.disabled:hover.active,
162-
.datepicker td.active.disabled,
163-
.datepicker td.active:hover.disabled,
164-
.datepicker td.active.disabled.disabled,
165-
.datepicker td.active.disabled:hover.disabled,
166-
.datepicker td.active[disabled],
167-
.datepicker td.active:hover[disabled],
168-
.datepicker td.active.disabled[disabled],
169-
.datepicker td.active.disabled:hover[disabled] {
160+
.datepicker table tr td.active:hover,
161+
.datepicker table tr td.active:hover:hover,
162+
.datepicker table tr td.active.disabled:hover,
163+
.datepicker table tr td.active.disabled:hover:hover,
164+
.datepicker table tr td.active:active,
165+
.datepicker table tr td.active:hover:active,
166+
.datepicker table tr td.active.disabled:active,
167+
.datepicker table tr td.active.disabled:hover:active,
168+
.datepicker table tr td.active.active,
169+
.datepicker table tr td.active:hover.active,
170+
.datepicker table tr td.active.disabled.active,
171+
.datepicker table tr td.active.disabled:hover.active,
172+
.datepicker table tr td.active.disabled,
173+
.datepicker table tr td.active:hover.disabled,
174+
.datepicker table tr td.active.disabled.disabled,
175+
.datepicker table tr td.active.disabled:hover.disabled,
176+
.datepicker table tr td.active[disabled],
177+
.datepicker table tr td.active:hover[disabled],
178+
.datepicker table tr td.active.disabled[disabled],
179+
.datepicker table tr td.active.disabled:hover[disabled] {
170180
background-color: #0044cc;
171181
}
172-
.datepicker td.active:active,
173-
.datepicker td.active:hover:active,
174-
.datepicker td.active.disabled:active,
175-
.datepicker td.active.disabled:hover:active,
176-
.datepicker td.active.active,
177-
.datepicker td.active:hover.active,
178-
.datepicker td.active.disabled.active,
179-
.datepicker td.active.disabled:hover.active {
182+
.datepicker table tr td.active:active,
183+
.datepicker table tr td.active:hover:active,
184+
.datepicker table tr td.active.disabled:active,
185+
.datepicker table tr td.active.disabled:hover:active,
186+
.datepicker table tr td.active.active,
187+
.datepicker table tr td.active:hover.active,
188+
.datepicker table tr td.active.disabled.active,
189+
.datepicker table tr td.active.disabled:hover.active {
180190
background-color: #003399 \9;
181191
}
182-
.datepicker td span {
192+
.datepicker table tr td span {
183193
display: block;
184194
width: 23%;
185195
height: 54px;
@@ -191,19 +201,19 @@
191201
-moz-border-radius: 4px;
192202
border-radius: 4px;
193203
}
194-
.datepicker td span:hover {
204+
.datepicker table tr td span:hover {
195205
background: #eeeeee;
196206
}
197-
.datepicker td span.disabled,
198-
.datepicker td span.disabled:hover {
207+
.datepicker table tr td span.disabled,
208+
.datepicker table tr td span.disabled:hover {
199209
background: none;
200210
color: #999999;
201211
cursor: default;
202212
}
203-
.datepicker td span.active,
204-
.datepicker td span.active:hover,
205-
.datepicker td span.active.disabled,
206-
.datepicker td span.active.disabled:hover {
213+
.datepicker table tr td span.active,
214+
.datepicker table tr td span.active:hover,
215+
.datepicker table tr td span.active.disabled,
216+
.datepicker table tr td span.active.disabled:hover {
207217
background-color: #006dcc;
208218
background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
209219
background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
@@ -215,43 +225,43 @@
215225
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
216226
border-color: #0044cc #0044cc #002a80;
217227
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
218-
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
228+
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
219229
color: #fff;
220230
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
221231
}
222-
.datepicker td span.active:hover,
223-
.datepicker td span.active:hover:hover,
224-
.datepicker td span.active.disabled:hover,
225-
.datepicker td span.active.disabled:hover:hover,
226-
.datepicker td span.active:active,
227-
.datepicker td span.active:hover:active,
228-
.datepicker td span.active.disabled:active,
229-
.datepicker td span.active.disabled:hover:active,
230-
.datepicker td span.active.active,
231-
.datepicker td span.active:hover.active,
232-
.datepicker td span.active.disabled.active,
233-
.datepicker td span.active.disabled:hover.active,
234-
.datepicker td span.active.disabled,
235-
.datepicker td span.active:hover.disabled,
236-
.datepicker td span.active.disabled.disabled,
237-
.datepicker td span.active.disabled:hover.disabled,
238-
.datepicker td span.active[disabled],
239-
.datepicker td span.active:hover[disabled],
240-
.datepicker td span.active.disabled[disabled],
241-
.datepicker td span.active.disabled:hover[disabled] {
232+
.datepicker table tr td span.active:hover,
233+
.datepicker table tr td span.active:hover:hover,
234+
.datepicker table tr td span.active.disabled:hover,
235+
.datepicker table tr td span.active.disabled:hover:hover,
236+
.datepicker table tr td span.active:active,
237+
.datepicker table tr td span.active:hover:active,
238+
.datepicker table tr td span.active.disabled:active,
239+
.datepicker table tr td span.active.disabled:hover:active,
240+
.datepicker table tr td span.active.active,
241+
.datepicker table tr td span.active:hover.active,
242+
.datepicker table tr td span.active.disabled.active,
243+
.datepicker table tr td span.active.disabled:hover.active,
244+
.datepicker table tr td span.active.disabled,
245+
.datepicker table tr td span.active:hover.disabled,
246+
.datepicker table tr td span.active.disabled.disabled,
247+
.datepicker table tr td span.active.disabled:hover.disabled,
248+
.datepicker table tr td span.active[disabled],
249+
.datepicker table tr td span.active:hover[disabled],
250+
.datepicker table tr td span.active.disabled[disabled],
251+
.datepicker table tr td span.active.disabled:hover[disabled] {
242252
background-color: #0044cc;
243253
}
244-
.datepicker td span.active:active,
245-
.datepicker td span.active:hover:active,
246-
.datepicker td span.active.disabled:active,
247-
.datepicker td span.active.disabled:hover:active,
248-
.datepicker td span.active.active,
249-
.datepicker td span.active:hover.active,
250-
.datepicker td span.active.disabled.active,
251-
.datepicker td span.active.disabled:hover.active {
254+
.datepicker table tr td span.active:active,
255+
.datepicker table tr td span.active:hover:active,
256+
.datepicker table tr td span.active.disabled:active,
257+
.datepicker table tr td span.active.disabled:hover:active,
258+
.datepicker table tr td span.active.active,
259+
.datepicker table tr td span.active:hover.active,
260+
.datepicker table tr td span.active.disabled.active,
261+
.datepicker table tr td span.active.disabled:hover.active {
252262
background-color: #003399 \9;
253263
}
254-
.datepicker td span.old {
264+
.datepicker table tr td span.old {
255265
color: #999999;
256266
}
257267
.datepicker th.switch {

0 commit comments

Comments
 (0)