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 {
80 content: 'fffffffffff';
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;
105 .datepicker.days div.datepicker-days {
108 .datepicker.months div.datepicker-months {
111 .datepicker.years div.datepicker-years {
122 -webkit-border-radius: 4px;
123 -moz-border-radius: 4px;
127 .table-striped .datepicker table tr td,
128 .table-striped .datepicker table tr th {
129 background-color: transparent;
131 .datepicker table tr td.day:hover {
135 .datepicker table tr td.old,
136 .datepicker table tr td.new {
139 .datepicker table tr td.disabled,
140 .datepicker table tr td.disabled:hover {
145 .datepicker table tr td.today,
146 .datepicker table tr td.today:hover,
147 .datepicker table tr td.today.disabled,
148 .datepicker table tr td.today.disabled:hover {
149 background-color: #fde19a;
150 background-image: -moz-linear-gradient(top, #fdd49a, #fdf59a);
151 background-image: -ms-linear-gradient(top, #fdd49a, #fdf59a);
152 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fdd49a), to(#fdf59a));
153 background-image: -webkit-linear-gradient(top, #fdd49a, #fdf59a);
154 background-image: -o-linear-gradient(top, #fdd49a, #fdf59a);
155 background-image: linear-gradient(top, #fdd49a, #fdf59a);
156 background-repeat: repeat-x;
157 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdd49a', endColorstr='#fdf59a', GradientType=0);
158 border-color: #fdf59a #fdf59a #fbed50;
159 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
160 filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
162 .datepicker table tr td.today:hover,
163 .datepicker table tr td.today:hover:hover,
164 .datepicker table tr td.today.disabled:hover,
165 .datepicker table tr td.today.disabled:hover:hover,
166 .datepicker table tr td.today:active,
167 .datepicker table tr td.today:hover:active,
168 .datepicker table tr td.today.disabled:active,
169 .datepicker table tr td.today.disabled:hover:active,
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.disabled,
175 .datepicker table tr td.today:hover.disabled,
176 .datepicker table tr td.today.disabled.disabled,
177 .datepicker table tr td.today.disabled:hover.disabled,
178 .datepicker table tr td.today[disabled],
179 .datepicker table tr td.today:hover[disabled],
180 .datepicker table tr td.today.disabled[disabled],
181 .datepicker table tr td.today.disabled:hover[disabled] {
182 background-color: #fdf59a;
184 .datepicker table tr td.today:active,
185 .datepicker table tr td.today:hover:active,
186 .datepicker table tr td.today.disabled:active,
187 .datepicker table tr td.today.disabled:hover:active,
188 .datepicker table tr td.today.active,
189 .datepicker table tr td.today:hover.active,
190 .datepicker table tr td.today.disabled.active,
191 .datepicker table tr td.today.disabled:hover.active {
192 background-color: #fbf069 \9;
194 .datepicker table tr td.active,
195 .datepicker table tr td.active:hover,
196 .datepicker table tr td.active.disabled,
197 .datepicker table tr td.active.disabled:hover {
198 background-color: #006dcc;
199 background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
200 background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
201 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
202 background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
203 background-image: -o-linear-gradient(top, #0088cc, #0044cc);
204 background-image: linear-gradient(top, #0088cc, #0044cc);
205 background-repeat: repeat-x;
206 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
207 border-color: #0044cc #0044cc #002a80;
208 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
209 filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
211 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
213 .datepicker table tr td.active:hover,
214 .datepicker table tr td.active:hover:hover,
215 .datepicker table tr td.active.disabled:hover,
216 .datepicker table tr td.active.disabled:hover:hover,
217 .datepicker table tr td.active:active,
218 .datepicker table tr td.active:hover:active,
219 .datepicker table tr td.active.disabled:active,
220 .datepicker table tr td.active.disabled:hover:active,
221 .datepicker table tr td.active.active,
222 .datepicker table tr td.active:hover.active,
223 .datepicker table tr td.active.disabled.active,
224 .datepicker table tr td.active.disabled:hover.active,
225 .datepicker table tr td.active.disabled,
226 .datepicker table tr td.active:hover.disabled,
227 .datepicker table tr td.active.disabled.disabled,
228 .datepicker table tr td.active.disabled:hover.disabled,
229 .datepicker table tr td.active[disabled],
230 .datepicker table tr td.active:hover[disabled],
231 .datepicker table tr td.active.disabled[disabled],
232 .datepicker table tr td.active.disabled:hover[disabled] {
233 background-color: #0044cc;
235 .datepicker table tr td.active:active,
236 .datepicker table tr td.active:hover:active,
237 .datepicker table tr td.active.disabled:active,
238 .datepicker table tr td.active.disabled:hover:active,
239 .datepicker table tr td.active.active,
240 .datepicker table tr td.active:hover.active,
241 .datepicker table tr td.active.disabled.active,
242 .datepicker table tr td.active.disabled:hover.active {
243 background-color: #003399 \9;
245 .datepicker table tr td span {
253 -webkit-border-radius: 4px;
254 -moz-border-radius: 4px;
257 .datepicker table tr td span:hover {
260 .datepicker table tr td span.disabled,
261 .datepicker table tr td span.disabled:hover {
266 .datepicker table tr td span.active,
267 .datepicker table tr td span.active:hover,
268 .datepicker table tr td span.active.disabled,
269 .datepicker table tr td span.active.disabled:hover {
270 background-color: #006dcc;
271 background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
272 background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
273 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
274 background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
275 background-image: -o-linear-gradient(top, #0088cc, #0044cc);
276 background-image: linear-gradient(top, #0088cc, #0044cc);
277 background-repeat: repeat-x;
278 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
279 border-color: #0044cc #0044cc #002a80;
280 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
281 filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
283 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
285 .datepicker table tr td span.active:hover,
286 .datepicker table tr td span.active:hover:hover,
287 .datepicker table tr td span.active.disabled:hover,
288 .datepicker table tr td span.active.disabled:hover:hover,
289 .datepicker table tr td span.active:active,
290 .datepicker table tr td span.active:hover:active,
291 .datepicker table tr td span.active.disabled:active,
292 .datepicker table tr td span.active.disabled:hover:active,
293 .datepicker table tr td span.active.active,
294 .datepicker table tr td span.active:hover.active,
295 .datepicker table tr td span.active.disabled.active,
296 .datepicker table tr td span.active.disabled:hover.active,
297 .datepicker table tr td span.active.disabled,
298 .datepicker table tr td span.active:hover.disabled,
299 .datepicker table tr td span.active.disabled.disabled,
300 .datepicker table tr td span.active.disabled:hover.disabled,
301 .datepicker table tr td span.active[disabled],
302 .datepicker table tr td span.active:hover[disabled],
303 .datepicker table tr td span.active.disabled[disabled],
304 .datepicker table tr td span.active.disabled:hover[disabled] {
305 background-color: #0044cc;
307 .datepicker table tr td span.active:active,
308 .datepicker table tr td span.active:hover:active,
309 .datepicker table tr td span.active.disabled:active,
310 .datepicker table tr td span.active.disabled:hover:active,
311 .datepicker table tr td span.active.active,
312 .datepicker table tr td span.active:hover.active,
313 .datepicker table tr td span.active.disabled.active,
314 .datepicker table tr td span.active.disabled:hover.active {
315 background-color: #003399 \9;
317 .datepicker table tr td span.old {
320 .datepicker th.switch {
323 .datepicker thead tr:first-child th,
324 .datepicker tfoot tr:first-child th {
327 .datepicker thead tr:first-child th:hover,
328 .datepicker tfoot tr:first-child th:hover {
334 padding: 0 2px 0 5px;
335 vertical-align: middle;
337 .datepicker thead tr:first-child th.cw {
339 background-color: transparent;
341 .input-append.date .add-on i,
342 .input-prepend.date .add-on i {
349 .datepicker .datepicker-time td span {
360 .datepicker .datepicker-time td span.timepicker-hour,
361 .datepicker .datepicker-time td span.timepicker-minute {