2 * Datepicker for Bootstrap
4 * Copyright 2012 Stefan Petre
5 * Improvements by Andrew Rowls
6 * Licensed under the Apache License v2.0
7 * http://www.apache.org/licenses/LICENSE-2.0
12 -webkit-border-radius: 4px;
13 -moz-border-radius: 4px;
17 border-top: 1px solid #ddd !important;
23 .datepicker.datepicker-rtl {
26 .datepicker.datepicker-rtl table tr td span {
29 .datepicker-dropdown {
33 .datepicker-dropdown:before {
35 display: inline-block;
36 border-left: 7px solid transparent;
37 border-right: 7px solid transparent;
38 border-bottom: 7px solid #ccc;
40 border-bottom-color: rgba(0, 0, 0, 0.2);
43 .datepicker-dropdown:after {
45 display: inline-block;
46 border-left: 6px solid transparent;
47 border-right: 6px solid transparent;
48 border-bottom: 6px solid #ffffff;
52 .datepicker-dropdown.datepicker-orient-left:before {
55 .datepicker-dropdown.datepicker-orient-left:after {
58 .datepicker-dropdown.datepicker-orient-right:before {
61 .datepicker-dropdown.datepicker-orient-right:after {
64 .datepicker-dropdown.datepicker-orient-top:before {
67 .datepicker-dropdown.datepicker-orient-top:after {
70 .datepicker-dropdown.datepicker-orient-bottom:before {
73 border-top: 7px solid #999;
75 .datepicker-dropdown.datepicker-orient-bottom:after {
78 border-top: 6px solid #ffffff;
83 .datepicker.days div.datepicker-days {
86 .datepicker.months div.datepicker-months {
89 .datepicker.years div.datepicker-years {
94 -webkit-touch-callout: none;
95 -webkit-user-select: none;
96 -khtml-user-select: none;
97 -moz-user-select: none;
98 -ms-user-select: none;
106 -webkit-border-radius: 4px;
107 -moz-border-radius: 4px;
111 .table-striped .datepicker table tr td,
112 .table-striped .datepicker table tr th {
113 background-color: transparent;
115 .datepicker table tr td.day:hover,
116 .datepicker table tr td.day.focused {
120 .datepicker table tr td.old,
121 .datepicker table tr td.new {
124 .datepicker table tr td.disabled,
125 .datepicker table tr td.disabled:hover {
130 .datepicker table tr td.today,
131 .datepicker table tr td.today:hover,
132 .datepicker table tr td.today.disabled,
133 .datepicker table tr td.today.disabled:hover {
134 background-color: #fde19a;
135 background-image: -moz-linear-gradient(top, #fdd49a, #fdf59a);
136 background-image: -ms-linear-gradient(top, #fdd49a, #fdf59a);
137 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fdd49a), to(#fdf59a));
138 background-image: -webkit-linear-gradient(top, #fdd49a, #fdf59a);
139 background-image: -o-linear-gradient(top, #fdd49a, #fdf59a);
140 background-image: linear-gradient(top, #fdd49a, #fdf59a);
141 background-repeat: repeat-x;
142 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdd49a', endColorstr='#fdf59a', GradientType=0);
143 border-color: #fdf59a #fdf59a #fbed50;
144 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
145 filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
148 .datepicker table tr td.today:hover,
149 .datepicker table tr td.today:hover:hover,
150 .datepicker table tr td.today.disabled:hover,
151 .datepicker table tr td.today.disabled:hover:hover,
152 .datepicker table tr td.today:active,
153 .datepicker table tr td.today:hover:active,
154 .datepicker table tr td.today.disabled:active,
155 .datepicker table tr td.today.disabled:hover:active,
156 .datepicker table tr td.today.active,
157 .datepicker table tr td.today:hover.active,
158 .datepicker table tr td.today.disabled.active,
159 .datepicker table tr td.today.disabled:hover.active,
160 .datepicker table tr td.today.disabled,
161 .datepicker table tr td.today:hover.disabled,
162 .datepicker table tr td.today.disabled.disabled,
163 .datepicker table tr td.today.disabled:hover.disabled,
164 .datepicker table tr td.today[disabled],
165 .datepicker table tr td.today:hover[disabled],
166 .datepicker table tr td.today.disabled[disabled],
167 .datepicker table tr td.today.disabled:hover[disabled] {
168 background-color: #fdf59a;
170 .datepicker table tr td.today:active,
171 .datepicker table tr td.today:hover:active,
172 .datepicker table tr td.today.disabled:active,
173 .datepicker table tr td.today.disabled:hover:active,
174 .datepicker table tr td.today.active,
175 .datepicker table tr td.today:hover.active,
176 .datepicker table tr td.today.disabled.active,
177 .datepicker table tr td.today.disabled:hover.active {
178 background-color: #fbf069 \9;
180 .datepicker table tr td.today:hover:hover {
183 .datepicker table tr td.today.active:hover {
186 .datepicker table tr td.range,
187 .datepicker table tr td.range:hover,
188 .datepicker table tr td.range.disabled,
189 .datepicker table tr td.range.disabled:hover {
191 -webkit-border-radius: 0;
192 -moz-border-radius: 0;
195 .datepicker table tr td.range.today,
196 .datepicker table tr td.range.today:hover,
197 .datepicker table tr td.range.today.disabled,
198 .datepicker table tr td.range.today.disabled:hover {
199 background-color: #f3d17a;
200 background-image: -moz-linear-gradient(top, #f3c17a, #f3e97a);
201 background-image: -ms-linear-gradient(top, #f3c17a, #f3e97a);
202 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f3c17a), to(#f3e97a));
203 background-image: -webkit-linear-gradient(top, #f3c17a, #f3e97a);
204 background-image: -o-linear-gradient(top, #f3c17a, #f3e97a);
205 background-image: linear-gradient(top, #f3c17a, #f3e97a);
206 background-repeat: repeat-x;
207 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3c17a', endColorstr='#f3e97a', GradientType=0);
208 border-color: #f3e97a #f3e97a #edde34;
209 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
210 filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
211 -webkit-border-radius: 0;
212 -moz-border-radius: 0;
215 .datepicker table tr td.range.today:hover,
216 .datepicker table tr td.range.today:hover:hover,
217 .datepicker table tr td.range.today.disabled:hover,
218 .datepicker table tr td.range.today.disabled:hover:hover,
219 .datepicker table tr td.range.today:active,
220 .datepicker table tr td.range.today:hover:active,
221 .datepicker table tr td.range.today.disabled:active,
222 .datepicker table tr td.range.today.disabled:hover:active,
223 .datepicker table tr td.range.today.active,
224 .datepicker table tr td.range.today:hover.active,
225 .datepicker table tr td.range.today.disabled.active,
226 .datepicker table tr td.range.today.disabled:hover.active,
227 .datepicker table tr td.range.today.disabled,
228 .datepicker table tr td.range.today:hover.disabled,
229 .datepicker table tr td.range.today.disabled.disabled,
230 .datepicker table tr td.range.today.disabled:hover.disabled,
231 .datepicker table tr td.range.today[disabled],
232 .datepicker table tr td.range.today:hover[disabled],
233 .datepicker table tr td.range.today.disabled[disabled],
234 .datepicker table tr td.range.today.disabled:hover[disabled] {
235 background-color: #f3e97a;
237 .datepicker table tr td.range.today:active,
238 .datepicker table tr td.range.today:hover:active,
239 .datepicker table tr td.range.today.disabled:active,
240 .datepicker table tr td.range.today.disabled:hover:active,
241 .datepicker table tr td.range.today.active,
242 .datepicker table tr td.range.today:hover.active,
243 .datepicker table tr td.range.today.disabled.active,
244 .datepicker table tr td.range.today.disabled:hover.active {
245 background-color: #efe24b \9;
247 .datepicker table tr td.selected,
248 .datepicker table tr td.selected:hover,
249 .datepicker table tr td.selected.disabled,
250 .datepicker table tr td.selected.disabled:hover {
251 background-color: #9e9e9e;
252 background-image: -moz-linear-gradient(top, #b3b3b3, #808080);
253 background-image: -ms-linear-gradient(top, #b3b3b3, #808080);
254 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b3b3b3), to(#808080));
255 background-image: -webkit-linear-gradient(top, #b3b3b3, #808080);
256 background-image: -o-linear-gradient(top, #b3b3b3, #808080);
257 background-image: linear-gradient(top, #b3b3b3, #808080);
258 background-repeat: repeat-x;
259 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3b3b3', endColorstr='#808080', GradientType=0);
260 border-color: #808080 #808080 #595959;
261 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
262 filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
264 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
266 .datepicker table tr td.selected:hover,
267 .datepicker table tr td.selected:hover:hover,
268 .datepicker table tr td.selected.disabled:hover,
269 .datepicker table tr td.selected.disabled:hover:hover,
270 .datepicker table tr td.selected:active,
271 .datepicker table tr td.selected:hover:active,
272 .datepicker table tr td.selected.disabled:active,
273 .datepicker table tr td.selected.disabled:hover:active,
274 .datepicker table tr td.selected.active,
275 .datepicker table tr td.selected:hover.active,
276 .datepicker table tr td.selected.disabled.active,
277 .datepicker table tr td.selected.disabled:hover.active,
278 .datepicker table tr td.selected.disabled,
279 .datepicker table tr td.selected:hover.disabled,
280 .datepicker table tr td.selected.disabled.disabled,
281 .datepicker table tr td.selected.disabled:hover.disabled,
282 .datepicker table tr td.selected[disabled],
283 .datepicker table tr td.selected:hover[disabled],
284 .datepicker table tr td.selected.disabled[disabled],
285 .datepicker table tr td.selected.disabled:hover[disabled] {
286 background-color: #808080;
288 .datepicker table tr td.selected:active,
289 .datepicker table tr td.selected:hover:active,
290 .datepicker table tr td.selected.disabled:active,
291 .datepicker table tr td.selected.disabled:hover:active,
292 .datepicker table tr td.selected.active,
293 .datepicker table tr td.selected:hover.active,
294 .datepicker table tr td.selected.disabled.active,
295 .datepicker table tr td.selected.disabled:hover.active {
296 background-color: #666666 \9;
298 .datepicker table tr td.active,
299 .datepicker table tr td.active:hover,
300 .datepicker table tr td.active.disabled,
301 .datepicker table tr td.active.disabled:hover {
302 background-color: #006dcc;
303 background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
304 background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
305 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
306 background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
307 background-image: -o-linear-gradient(top, #0088cc, #0044cc);
308 background-image: linear-gradient(top, #0088cc, #0044cc);
309 background-repeat: repeat-x;
310 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
311 border-color: #0044cc #0044cc #002a80;
312 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
313 filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
315 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
317 .datepicker table tr td.active:hover,
318 .datepicker table tr td.active:hover:hover,
319 .datepicker table tr td.active.disabled:hover,
320 .datepicker table tr td.active.disabled:hover:hover,
321 .datepicker table tr td.active:active,
322 .datepicker table tr td.active:hover:active,
323 .datepicker table tr td.active.disabled:active,
324 .datepicker table tr td.active.disabled:hover:active,
325 .datepicker table tr td.active.active,
326 .datepicker table tr td.active:hover.active,
327 .datepicker table tr td.active.disabled.active,
328 .datepicker table tr td.active.disabled:hover.active,
329 .datepicker table tr td.active.disabled,
330 .datepicker table tr td.active:hover.disabled,
331 .datepicker table tr td.active.disabled.disabled,
332 .datepicker table tr td.active.disabled:hover.disabled,
333 .datepicker table tr td.active[disabled],
334 .datepicker table tr td.active:hover[disabled],
335 .datepicker table tr td.active.disabled[disabled],
336 .datepicker table tr td.active.disabled:hover[disabled] {
337 background-color: #0044cc;
339 .datepicker table tr td.active:active,
340 .datepicker table tr td.active:hover:active,
341 .datepicker table tr td.active.disabled:active,
342 .datepicker table tr td.active.disabled:hover:active,
343 .datepicker table tr td.active.active,
344 .datepicker table tr td.active:hover.active,
345 .datepicker table tr td.active.disabled.active,
346 .datepicker table tr td.active.disabled:hover.active {
347 background-color: #003399 \9;
349 .datepicker table tr td span {
357 -webkit-border-radius: 4px;
358 -moz-border-radius: 4px;
361 .datepicker table tr td span:hover {
364 .datepicker table tr td span.disabled,
365 .datepicker table tr td span.disabled:hover {
370 .datepicker table tr td span.active,
371 .datepicker table tr td span.active:hover,
372 .datepicker table tr td span.active.disabled,
373 .datepicker table tr td span.active.disabled:hover {
374 background-color: #006dcc;
375 background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
376 background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
377 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
378 background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
379 background-image: -o-linear-gradient(top, #0088cc, #0044cc);
380 background-image: linear-gradient(top, #0088cc, #0044cc);
381 background-repeat: repeat-x;
382 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
383 border-color: #0044cc #0044cc #002a80;
384 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
385 filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
387 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
389 .datepicker table tr td span.active:hover,
390 .datepicker table tr td span.active:hover:hover,
391 .datepicker table tr td span.active.disabled:hover,
392 .datepicker table tr td span.active.disabled:hover:hover,
393 .datepicker table tr td span.active:active,
394 .datepicker table tr td span.active:hover:active,
395 .datepicker table tr td span.active.disabled:active,
396 .datepicker table tr td span.active.disabled:hover:active,
397 .datepicker table tr td span.active.active,
398 .datepicker table tr td span.active:hover.active,
399 .datepicker table tr td span.active.disabled.active,
400 .datepicker table tr td span.active.disabled:hover.active,
401 .datepicker table tr td span.active.disabled,
402 .datepicker table tr td span.active:hover.disabled,
403 .datepicker table tr td span.active.disabled.disabled,
404 .datepicker table tr td span.active.disabled:hover.disabled,
405 .datepicker table tr td span.active[disabled],
406 .datepicker table tr td span.active:hover[disabled],
407 .datepicker table tr td span.active.disabled[disabled],
408 .datepicker table tr td span.active.disabled:hover[disabled] {
409 background-color: #0044cc;
411 .datepicker table tr td span.active:active,
412 .datepicker table tr td span.active:hover:active,
413 .datepicker table tr td span.active.disabled:active,
414 .datepicker table tr td span.active.disabled:hover:active,
415 .datepicker table tr td span.active.active,
416 .datepicker table tr td span.active:hover.active,
417 .datepicker table tr td span.active.disabled.active,
418 .datepicker table tr td span.active.disabled:hover.active {
419 background-color: #003399 \9;
421 .datepicker table tr td span.old,
422 .datepicker table tr td span.new {
425 .datepicker th.datepicker-switch {
428 .datepicker thead tr:first-child th,
429 .datepicker tfoot tr th {
432 .datepicker thead tr:first-child th:hover,
433 .datepicker tfoot tr th:hover {
439 padding: 0 2px 0 5px;
440 vertical-align: middle;
442 .datepicker thead tr:first-child th.cw {
444 background-color: transparent;
446 .input-append.date .add-on i,
447 .input-prepend.date .add-on i {
452 .input-daterange input {
455 .input-daterange input:first-child {
456 -webkit-border-radius: 3px 0 0 3px;
457 -moz-border-radius: 3px 0 0 3px;
458 border-radius: 3px 0 0 3px;
460 .input-daterange input:last-child {
461 -webkit-border-radius: 0 3px 3px 0;
462 -moz-border-radius: 0 3px 3px 0;
463 border-radius: 0 3px 3px 0;
465 .input-daterange .add-on {
466 display: inline-block;
474 text-shadow: 0 1px 0 #ffffff;
475 vertical-align: middle;
476 background-color: #eeeeee;
477 border: 1px solid #ccc;
481 .datepicker.dropdown-menu {
490 background-color: #ffffff;
491 border: 1px solid #ccc;
492 border: 1px solid rgba(0, 0, 0, 0.2);
493 -webkit-border-radius: 5px;
494 -moz-border-radius: 5px;
496 -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
497 -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
498 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
499 -webkit-background-clip: padding-box;
500 -moz-background-clip: padding;
501 background-clip: padding-box;
502 *border-right-width: 2px;
503 *border-bottom-width: 2px;
505 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
509 .datepicker.dropdown-menu th,
510 .datepicker.datepicker-inline th,
511 .datepicker.dropdown-menu td,
512 .datepicker.datepicker-inline td {