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
13 -webkit-border-radius: 4px;
14 -moz-border-radius: 4px;
19 border-top: 1px solid #ddd !important;
26 .datepicker.datepicker-rtl {
29 .datepicker.datepicker-rtl table tr td span {
32 .datepicker-dropdown {
36 /*.datepicker-dropdown:before {
38 display: inline-block;
39 border-left: 7px solid transparent;
40 border-right: 7px solid transparent;
41 border-bottom: 7px solid #ccc;
42 border-bottom-color: rgba(0, 0, 0, 0.2);
47 .datepicker-dropdown:after {
49 display: inline-block;
50 border-left: 6px solid transparent;
51 border-right: 6px solid transparent;
52 border-bottom: 6px solid #ffffff;
58 .datepicker-dropdown.bottom:before {
60 display: inline-block;
61 border-left: 7px solid transparent;
62 border-right: 7px solid transparent;
63 border-bottom: 7px solid #ccc;
64 border-bottom-color: rgba(0, 0, 0, 0.2);
69 .datepicker-dropdown.bottom:after {
71 display: inline-block;
72 border-left: 6px solid transparent;
73 border-right: 6px solid transparent;
74 border-bottom: 6px solid white;
79 .datepicker-dropdown.top:before {
81 display: inline-block;
82 border-left: 7px solid transparent;
83 border-right: 7px solid transparent;
84 border-top: 7px solid #ccc;
86 border-top-color: rgba(0, 0, 0, 0.2);
92 .datepicker-dropdown.top:after {
94 display: inline-block;
95 border-left: 6px solid transparent;
96 border-right: 6px solid transparent;
97 border-top: 6px solid white;
104 .datepicker-dropdown.bottom-right:before {
106 display: inline-block;
107 border-left: 7px solid transparent;
108 border-right: 7px solid transparent;
109 border-bottom: 7px solid #ccc;
110 border-bottom-color: rgba(0, 0, 0, 0.2);
115 .datepicker-dropdown.bottom-right:after {
117 display: inline-block;
118 border-left: 6px solid transparent;
119 border-right: 6px solid transparent;
120 border-bottom: 6px solid white;
126 .datepicker-dropdown.bottom-left:before {
128 display: inline-block;
129 border-left: 7px solid transparent;
130 border-right: 7px solid transparent;
131 border-bottom: 7px solid #ccc;
132 border-bottom-color: rgba(0, 0, 0, 0.2);
137 .datepicker-dropdown.bottom-left:after {
139 display: inline-block;
140 border-left: 6px solid transparent;
141 border-right: 6px solid transparent;
142 border-bottom: 6px solid white;
148 .datepicker-dropdown.top-right:before {
150 display: inline-block;
151 border-left: 7px solid transparent;
152 border-right: 7px solid transparent;
153 border-top: 7px solid #ccc;
154 border-top-color: rgba(0, 0, 0, 0.2);
160 .datepicker-dropdown.top-right:after {
162 display: inline-block;
163 border-left: 6px solid transparent;
164 border-right: 6px solid transparent;
165 border-top: 6px solid white;
171 .datepicker-dropdown.top-left:before {
173 display: inline-block;
174 border-left: 7px solid transparent;
175 border-right: 7px solid transparent;
176 border-top: 7px solid #ccc;
177 border-top-color: rgba(0, 0, 0, 0.2);
183 .datepicker-dropdown.top-left:after {
185 display: inline-block;
186 border-left: 6px solid transparent;
187 border-right: 6px solid transparent;
188 border-top: 6px solid white;
197 .datepicker.days div.datepicker-days {
200 .datepicker.months div.datepicker-months {
203 .datepicker.years div.datepicker-years {
214 -webkit-border-radius: 4px;
215 -moz-border-radius: 4px;
219 .table-striped .datepicker table tr td,
220 .table-striped .datepicker table tr th {
221 background-color: transparent;
223 .datepicker table tr td.day:hover {
227 .datepicker table tr td.old,
228 .datepicker table tr td.new {
231 .datepicker table tr td.disabled,
232 .datepicker table tr td.disabled:hover {
237 .datepicker table tr td.today,
238 .datepicker table tr td.today:hover,
239 .datepicker table tr td.today.disabled,
240 .datepicker table tr td.today.disabled:hover {
241 background-color: #fde19a;
242 background-image: -moz-linear-gradient(top, #fdd49a, #fdf59a);
243 background-image: -ms-linear-gradient(top, #fdd49a, #fdf59a);
244 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fdd49a), to(#fdf59a));
245 background-image: -webkit-linear-gradient(top, #fdd49a, #fdf59a);
246 background-image: -o-linear-gradient(top, #fdd49a, #fdf59a);
247 background-image: linear-gradient(top, #fdd49a, #fdf59a);
248 background-repeat: repeat-x;
249 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdd49a', endColorstr='#fdf59a', GradientType=0);
250 border-color: #fdf59a #fdf59a #fbed50;
251 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
252 filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
254 .datepicker table tr td.today:hover,
255 .datepicker table tr td.today:hover:hover,
256 .datepicker table tr td.today.disabled:hover,
257 .datepicker table tr td.today.disabled:hover:hover,
258 .datepicker table tr td.today:active,
259 .datepicker table tr td.today:hover:active,
260 .datepicker table tr td.today.disabled:active,
261 .datepicker table tr td.today.disabled:hover:active,
262 .datepicker table tr td.today.active,
263 .datepicker table tr td.today:hover.active,
264 .datepicker table tr td.today.disabled.active,
265 .datepicker table tr td.today.disabled:hover.active,
266 .datepicker table tr td.today.disabled,
267 .datepicker table tr td.today:hover.disabled,
268 .datepicker table tr td.today.disabled.disabled,
269 .datepicker table tr td.today.disabled:hover.disabled,
270 .datepicker table tr td.today[disabled],
271 .datepicker table tr td.today:hover[disabled],
272 .datepicker table tr td.today.disabled[disabled],
273 .datepicker table tr td.today.disabled:hover[disabled] {
274 background-color: #fdf59a;
276 .datepicker table tr td.today:active,
277 .datepicker table tr td.today:hover:active,
278 .datepicker table tr td.today.disabled:active,
279 .datepicker table tr td.today.disabled:hover:active,
280 .datepicker table tr td.today.active,
281 .datepicker table tr td.today:hover.active,
282 .datepicker table tr td.today.disabled.active,
283 .datepicker table tr td.today.disabled:hover.active {
284 background-color: #fbf069 \9;
286 .datepicker table tr td.active,
287 .datepicker table tr td.active:hover,
288 .datepicker table tr td.active.disabled,
289 .datepicker table tr td.active.disabled:hover {
290 background-color: #006dcc;
291 background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
292 background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
293 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
294 background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
295 background-image: -o-linear-gradient(top, #0088cc, #0044cc);
296 background-image: linear-gradient(top, #0088cc, #0044cc);
297 background-repeat: repeat-x;
298 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
299 border-color: #0044cc #0044cc #002a80;
300 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
301 filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
303 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
305 .datepicker table tr td.active:hover,
306 .datepicker table tr td.active:hover:hover,
307 .datepicker table tr td.active.disabled:hover,
308 .datepicker table tr td.active.disabled:hover:hover,
309 .datepicker table tr td.active:active,
310 .datepicker table tr td.active:hover:active,
311 .datepicker table tr td.active.disabled:active,
312 .datepicker table tr td.active.disabled:hover:active,
313 .datepicker table tr td.active.active,
314 .datepicker table tr td.active:hover.active,
315 .datepicker table tr td.active.disabled.active,
316 .datepicker table tr td.active.disabled:hover.active,
317 .datepicker table tr td.active.disabled,
318 .datepicker table tr td.active:hover.disabled,
319 .datepicker table tr td.active.disabled.disabled,
320 .datepicker table tr td.active.disabled:hover.disabled,
321 .datepicker table tr td.active[disabled],
322 .datepicker table tr td.active:hover[disabled],
323 .datepicker table tr td.active.disabled[disabled],
324 .datepicker table tr td.active.disabled:hover[disabled] {
325 background-color: #0044cc;
327 .datepicker table tr td.active:active,
328 .datepicker table tr td.active:hover:active,
329 .datepicker table tr td.active.disabled:active,
330 .datepicker table tr td.active.disabled:hover:active,
331 .datepicker table tr td.active.active,
332 .datepicker table tr td.active:hover.active,
333 .datepicker table tr td.active.disabled.active,
334 .datepicker table tr td.active.disabled:hover.active {
335 background-color: #003399 \9;
337 .datepicker table tr td span {
345 -webkit-border-radius: 4px;
346 -moz-border-radius: 4px;
349 .datepicker table tr td span:hover {
352 .datepicker table tr td span.disabled,
353 .datepicker table tr td span.disabled:hover {
358 .datepicker table tr td span.active,
359 .datepicker table tr td span.active:hover,
360 .datepicker table tr td span.active.disabled,
361 .datepicker table tr td span.active.disabled:hover {
362 background-color: #006dcc;
363 background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
364 background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
365 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
366 background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
367 background-image: -o-linear-gradient(top, #0088cc, #0044cc);
368 background-image: linear-gradient(top, #0088cc, #0044cc);
369 background-repeat: repeat-x;
370 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
371 border-color: #0044cc #0044cc #002a80;
372 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
373 filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
375 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
377 .datepicker table tr td span.active:hover,
378 .datepicker table tr td span.active:hover:hover,
379 .datepicker table tr td span.active.disabled:hover,
380 .datepicker table tr td span.active.disabled:hover:hover,
381 .datepicker table tr td span.active:active,
382 .datepicker table tr td span.active:hover:active,
383 .datepicker table tr td span.active.disabled:active,
384 .datepicker table tr td span.active.disabled:hover:active,
385 .datepicker table tr td span.active.active,
386 .datepicker table tr td span.active:hover.active,
387 .datepicker table tr td span.active.disabled.active,
388 .datepicker table tr td span.active.disabled:hover.active,
389 .datepicker table tr td span.active.disabled,
390 .datepicker table tr td span.active:hover.disabled,
391 .datepicker table tr td span.active.disabled.disabled,
392 .datepicker table tr td span.active.disabled:hover.disabled,
393 .datepicker table tr td span.active[disabled],
394 .datepicker table tr td span.active:hover[disabled],
395 .datepicker table tr td span.active.disabled[disabled],
396 .datepicker table tr td span.active.disabled:hover[disabled] {
397 background-color: #0044cc;
399 .datepicker table tr td span.active:active,
400 .datepicker table tr td span.active:hover:active,
401 .datepicker table tr td span.active.disabled:active,
402 .datepicker table tr td span.active.disabled:hover:active,
403 .datepicker table tr td span.active.active,
404 .datepicker table tr td span.active:hover.active,
405 .datepicker table tr td span.active.disabled.active,
406 .datepicker table tr td span.active.disabled:hover.active {
407 background-color: #003399 \9;
409 .datepicker table tr td span.old {
412 .datepicker th.switch {
415 .datepicker thead tr:first-child th,
416 .datepicker tfoot tr:first-child th {
419 .datepicker thead tr:first-child th:hover,
420 .datepicker tfoot tr:first-child th:hover {
426 padding: 0 2px 0 5px;
427 vertical-align: middle;
429 .datepicker thead tr:first-child th.cw {
431 background-color: transparent;
433 .input-append.date .add-on i,
434 .input-prepend.date .add-on i {
441 .datepicker .datepicker-time td span {
452 .datepicker .datepicker-time td span.timepicker-hour,
453 .datepicker .datepicker-time td span.timepicker-minute {