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;
85 border-top-color: rgba(0, 0, 0, 0.2);
91 .datepicker-dropdown.top:after {
93 display: inline-block;
94 border-left: 6px solid transparent;
95 border-right: 6px solid transparent;
96 border-top: 6px solid white;
102 .datepicker-dropdown.bottom-right:before {
104 display: inline-block;
105 border-left: 7px solid transparent;
106 border-right: 7px solid transparent;
107 border-bottom: 7px solid #ccc;
108 border-bottom-color: rgba(0, 0, 0, 0.2);
113 .datepicker-dropdown.bottom-right:after {
115 display: inline-block;
116 border-left: 6px solid transparent;
117 border-right: 6px solid transparent;
118 border-bottom: 6px solid white;
124 .datepicker-dropdown.bottom-left:before {
126 display: inline-block;
127 border-left: 7px solid transparent;
128 border-right: 7px solid transparent;
129 border-bottom: 7px solid #ccc;
130 border-bottom-color: rgba(0, 0, 0, 0.2);
135 .datepicker-dropdown.bottom-left:after {
137 display: inline-block;
138 border-left: 6px solid transparent;
139 border-right: 6px solid transparent;
140 border-bottom: 6px solid white;
146 .datepicker-dropdown.top-right:before {
148 display: inline-block;
149 border-left: 7px solid transparent;
150 border-right: 7px solid transparent;
151 border-top: 7px solid #ccc;
152 border-top-color: rgba(0, 0, 0, 0.2);
158 .datepicker-dropdown.top-right:after {
160 display: inline-block;
161 border-left: 6px solid transparent;
162 border-right: 6px solid transparent;
163 border-top: 6px solid white;
169 .datepicker-dropdown.top-left:before {
171 display: inline-block;
172 border-left: 7px solid transparent;
173 border-right: 7px solid transparent;
174 border-top: 7px solid #ccc;
175 border-top-color: rgba(0, 0, 0, 0.2);
181 .datepicker-dropdown.top-left:after {
183 display: inline-block;
184 border-left: 6px solid transparent;
185 border-right: 6px solid transparent;
186 border-top: 6px solid white;
195 .datepicker.days div.datepicker-days {
198 .datepicker.months div.datepicker-months {
201 .datepicker.years div.datepicker-years {
212 -webkit-border-radius: 4px;
213 -moz-border-radius: 4px;
217 .table-striped .datepicker table tr td,
218 .table-striped .datepicker table tr th {
219 background-color: transparent;
221 .datepicker table tr td.day:hover {
225 .datepicker table tr td.old,
226 .datepicker table tr td.new {
229 .datepicker table tr td.disabled,
230 .datepicker table tr td.disabled:hover {
235 .datepicker table tr td.today,
236 .datepicker table tr td.today:hover,
237 .datepicker table tr td.today.disabled,
238 .datepicker table tr td.today.disabled:hover {
239 background-color: #fde19a;
240 background-image: -moz-linear-gradient(top, #fdd49a, #fdf59a);
241 background-image: -ms-linear-gradient(top, #fdd49a, #fdf59a);
242 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fdd49a), to(#fdf59a));
243 background-image: -webkit-linear-gradient(top, #fdd49a, #fdf59a);
244 background-image: -o-linear-gradient(top, #fdd49a, #fdf59a);
245 background-image: linear-gradient(top, #fdd49a, #fdf59a);
246 background-repeat: repeat-x;
247 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdd49a', endColorstr='#fdf59a', GradientType=0);
248 border-color: #fdf59a #fdf59a #fbed50;
249 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
250 filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
252 .datepicker table tr td.today:hover,
253 .datepicker table tr td.today:hover:hover,
254 .datepicker table tr td.today.disabled:hover,
255 .datepicker table tr td.today.disabled:hover:hover,
256 .datepicker table tr td.today:active,
257 .datepicker table tr td.today:hover:active,
258 .datepicker table tr td.today.disabled:active,
259 .datepicker table tr td.today.disabled:hover:active,
260 .datepicker table tr td.today.active,
261 .datepicker table tr td.today:hover.active,
262 .datepicker table tr td.today.disabled.active,
263 .datepicker table tr td.today.disabled:hover.active,
264 .datepicker table tr td.today.disabled,
265 .datepicker table tr td.today:hover.disabled,
266 .datepicker table tr td.today.disabled.disabled,
267 .datepicker table tr td.today.disabled:hover.disabled,
268 .datepicker table tr td.today[disabled],
269 .datepicker table tr td.today:hover[disabled],
270 .datepicker table tr td.today.disabled[disabled],
271 .datepicker table tr td.today.disabled:hover[disabled] {
272 background-color: #fdf59a;
274 .datepicker table tr td.today:active,
275 .datepicker table tr td.today:hover:active,
276 .datepicker table tr td.today.disabled:active,
277 .datepicker table tr td.today.disabled:hover:active,
278 .datepicker table tr td.today.active,
279 .datepicker table tr td.today:hover.active,
280 .datepicker table tr td.today.disabled.active,
281 .datepicker table tr td.today.disabled:hover.active {
282 background-color: #fbf069 \9;
284 .datepicker table tr td.active,
285 .datepicker table tr td.active:hover,
286 .datepicker table tr td.active.disabled,
287 .datepicker table tr td.active.disabled:hover {
288 background-color: #006dcc;
289 background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
290 background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
291 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
292 background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
293 background-image: -o-linear-gradient(top, #0088cc, #0044cc);
294 background-image: linear-gradient(top, #0088cc, #0044cc);
295 background-repeat: repeat-x;
296 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
297 border-color: #0044cc #0044cc #002a80;
298 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
299 filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
301 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
303 .datepicker table tr td.active:hover,
304 .datepicker table tr td.active:hover:hover,
305 .datepicker table tr td.active.disabled:hover,
306 .datepicker table tr td.active.disabled:hover:hover,
307 .datepicker table tr td.active:active,
308 .datepicker table tr td.active:hover:active,
309 .datepicker table tr td.active.disabled:active,
310 .datepicker table tr td.active.disabled:hover:active,
311 .datepicker table tr td.active.active,
312 .datepicker table tr td.active:hover.active,
313 .datepicker table tr td.active.disabled.active,
314 .datepicker table tr td.active.disabled:hover.active,
315 .datepicker table tr td.active.disabled,
316 .datepicker table tr td.active:hover.disabled,
317 .datepicker table tr td.active.disabled.disabled,
318 .datepicker table tr td.active.disabled:hover.disabled,
319 .datepicker table tr td.active[disabled],
320 .datepicker table tr td.active:hover[disabled],
321 .datepicker table tr td.active.disabled[disabled],
322 .datepicker table tr td.active.disabled:hover[disabled] {
323 background-color: #0044cc;
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.active,
330 .datepicker table tr td.active:hover.active,
331 .datepicker table tr td.active.disabled.active,
332 .datepicker table tr td.active.disabled:hover.active {
333 background-color: #003399 \9;
335 .datepicker table tr td span {
343 -webkit-border-radius: 4px;
344 -moz-border-radius: 4px;
347 .datepicker table tr td span:hover {
350 .datepicker table tr td span.disabled,
351 .datepicker table tr td span.disabled:hover {
356 .datepicker table tr td span.active,
357 .datepicker table tr td span.active:hover,
358 .datepicker table tr td span.active.disabled,
359 .datepicker table tr td span.active.disabled:hover {
360 background-color: #006dcc;
361 background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
362 background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
363 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
364 background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
365 background-image: -o-linear-gradient(top, #0088cc, #0044cc);
366 background-image: linear-gradient(top, #0088cc, #0044cc);
367 background-repeat: repeat-x;
368 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
369 border-color: #0044cc #0044cc #002a80;
370 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
371 filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
373 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
375 .datepicker table tr td span.active:hover,
376 .datepicker table tr td span.active:hover:hover,
377 .datepicker table tr td span.active.disabled:hover,
378 .datepicker table tr td span.active.disabled:hover:hover,
379 .datepicker table tr td span.active:active,
380 .datepicker table tr td span.active:hover:active,
381 .datepicker table tr td span.active.disabled:active,
382 .datepicker table tr td span.active.disabled:hover:active,
383 .datepicker table tr td span.active.active,
384 .datepicker table tr td span.active:hover.active,
385 .datepicker table tr td span.active.disabled.active,
386 .datepicker table tr td span.active.disabled:hover.active,
387 .datepicker table tr td span.active.disabled,
388 .datepicker table tr td span.active:hover.disabled,
389 .datepicker table tr td span.active.disabled.disabled,
390 .datepicker table tr td span.active.disabled:hover.disabled,
391 .datepicker table tr td span.active[disabled],
392 .datepicker table tr td span.active:hover[disabled],
393 .datepicker table tr td span.active.disabled[disabled],
394 .datepicker table tr td span.active.disabled:hover[disabled] {
395 background-color: #0044cc;
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.active,
402 .datepicker table tr td span.active:hover.active,
403 .datepicker table tr td span.active.disabled.active,
404 .datepicker table tr td span.active.disabled:hover.active {
405 background-color: #003399 \9;
407 .datepicker table tr td span.old {
410 .datepicker th.switch {
413 .datepicker thead tr:first-child th,
414 .datepicker tfoot tr:first-child th {
417 .datepicker thead tr:first-child th:hover,
418 .datepicker tfoot tr:first-child th:hover {
424 padding: 0 2px 0 5px;
425 vertical-align: middle;
427 .datepicker thead tr:first-child th.cw {
429 background-color: transparent;
431 .input-append.date .add-on i,
432 .input-prepend.date .add-on i {
439 .datepicker .datepicker-time td span {
450 .datepicker .datepicker-time td span.timepicker-hour,
451 .datepicker .datepicker-time td span.timepicker-minute {