css/datepicker.css

   1 /*!
   2  * Datepicker for Bootstrap
   3  *
   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
   8  *
   9  */
  10 .datepicker {
  11   padding: 4px;
  12   -webkit-border-radius: 4px;
  13   -moz-border-radius: 4px;
  14   border-radius: 4px;
  15   direction: ltr;
  16   /*.dow {
  17                 border-top: 1px solid #ddd !important;
  18         }*/
  19 }
  20 .datepicker-inline {
  21   width: 220px;
  22 }
  23 .datepicker.datepicker-rtl {
  24   direction: rtl;
  25 }
  26 .datepicker.datepicker-rtl table tr td span {
  27   float: right;
  28 }
  29 .datepicker-dropdown {
  30   top: 0;
  31   left: 0;
  32 }
  33 .datepicker-dropdown:before {
  34   content: '';
  35   display: inline-block;
  36   border-left: 7px solid transparent;
  37   border-right: 7px solid transparent;
  38   border-bottom: 7px solid #ccc;
  39   border-top: 0;
  40   border-bottom-color: rgba(0, 0, 0, 0.2);
  41   position: absolute;
  42 }
  43 .datepicker-dropdown:after {
  44   content: '';
  45   display: inline-block;
  46   border-left: 6px solid transparent;
  47   border-right: 6px solid transparent;
  48   border-bottom: 6px solid #ffffff;
  49   border-top: 0;
  50   position: absolute;
  51 }
  52 .datepicker-dropdown.datepicker-orient-left:before {
  53   left: 6px;
  54 }
  55 .datepicker-dropdown.datepicker-orient-left:after {
  56   left: 7px;
  57 }
  58 .datepicker-dropdown.datepicker-orient-right:before {
  59   right: 6px;
  60 }
  61 .datepicker-dropdown.datepicker-orient-right:after {
  62   right: 7px;
  63 }
  64 .datepicker-dropdown.datepicker-orient-top:before {
  65   top: -7px;
  66 }
  67 .datepicker-dropdown.datepicker-orient-top:after {
  68   top: -6px;
  69 }
  70 .datepicker-dropdown.datepicker-orient-bottom:before {
  71   bottom: -7px;
  72   border-bottom: 0;
  73   border-top: 7px solid #999;
  74 }
  75 .datepicker-dropdown.datepicker-orient-bottom:after {
  76   bottom: -6px;
  77   border-bottom: 0;
  78   border-top: 6px solid #ffffff;
  79 }
  80 .datepicker > div {
  81   display: none;
  82 }
  83 .datepicker.days div.datepicker-days {
  84   display: block;
  85 }
  86 .datepicker.months div.datepicker-months {
  87   display: block;
  88 }
  89 .datepicker.years div.datepicker-years {
  90   display: block;
  91 }
  92 .datepicker table {
  93   margin: 0;
  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;
  99   user-select: none;
 100 }
 101 .datepicker td,
 102 .datepicker th {
 103   text-align: center;
 104   width: 20px;
 105   height: 20px;
 106   -webkit-border-radius: 4px;
 107   -moz-border-radius: 4px;
 108   border-radius: 4px;
 109   border: none;
 110 }
 111 .table-striped .datepicker table tr td,
 112 .table-striped .datepicker table tr th {
 113   background-color: transparent;
 114 }
 115 .datepicker table tr td.day:hover,
 116 .datepicker table tr td.day.focused {
 117   background: #eeeeee;
 118   cursor: pointer;
 119 }
 120 .datepicker table tr td.old,
 121 .datepicker table tr td.new {
 122   color: #999999;
 123 }
 124 .datepicker table tr td.disabled,
 125 .datepicker table tr td.disabled:hover {
 126   background: none;
 127   color: #999999;
 128   cursor: default;
 129 }
 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);
 146   color: #000;
 147 }
 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;
 169 }
 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;
 179 }
 180 .datepicker table tr td.today:hover:hover {
 181   color: #000;
 182 }
 183 .datepicker table tr td.today.active:hover {
 184   color: #fff;
 185 }
 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 {
 190   background: #eeeeee;
 191   -webkit-border-radius: 0;
 192   -moz-border-radius: 0;
 193   border-radius: 0;
 194 }
 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;
 213   border-radius: 0;
 214 }
 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;
 236 }
 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;
 246 }
 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);
 263   color: #fff;
 264   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
 265 }
 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;
 287 }
 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;
 297 }
 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);
 314   color: #fff;
 315   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
 316 }
 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;
 338 }
 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;
 348 }
 349 .datepicker table tr td span {
 350   display: block;
 351   width: 23%;
 352   height: 54px;
 353   line-height: 54px;
 354   float: left;
 355   margin: 1%;
 356   cursor: pointer;
 357   -webkit-border-radius: 4px;
 358   -moz-border-radius: 4px;
 359   border-radius: 4px;
 360 }
 361 .datepicker table tr td span:hover {
 362   background: #eeeeee;
 363 }
 364 .datepicker table tr td span.disabled,
 365 .datepicker table tr td span.disabled:hover {
 366   background: none;
 367   color: #999999;
 368   cursor: default;
 369 }
 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);
 386   color: #fff;
 387   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
 388 }
 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;
 410 }
 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;
 420 }
 421 .datepicker table tr td span.old,
 422 .datepicker table tr td span.new {
 423   color: #999999;
 424 }
 425 .datepicker th.datepicker-switch {
 426   width: 145px;
 427 }
 428 .datepicker thead tr:first-child th,
 429 .datepicker tfoot tr th {
 430   cursor: pointer;
 431 }
 432 .datepicker thead tr:first-child th:hover,
 433 .datepicker tfoot tr th:hover {
 434   background: #eeeeee;
 435 }
 436 .datepicker .cw {
 437   font-size: 10px;
 438   width: 12px;
 439   padding: 0 2px 0 5px;
 440   vertical-align: middle;
 441 }
 442 .datepicker thead tr:first-child th.cw {
 443   cursor: default;
 444   background-color: transparent;
 445 }
 446 .input-append.date .add-on i,
 447 .input-prepend.date .add-on i {
 448   cursor: pointer;
 449   width: 16px;
 450   height: 16px;
 451 }
 452 .input-daterange input {
 453   text-align: center;
 454 }
 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;
 459 }
 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;
 464 }
 465 .input-daterange .add-on {
 466   display: inline-block;
 467   width: auto;
 468   min-width: 16px;
 469   height: 20px;
 470   padding: 4px 5px;
 471   font-weight: normal;
 472   line-height: 20px;
 473   text-align: center;
 474   text-shadow: 0 1px 0 #ffffff;
 475   vertical-align: middle;
 476   background-color: #eeeeee;
 477   border: 1px solid #ccc;
 478   margin-left: -5px;
 479   margin-right: -5px;
 480 }
 481 .datepicker.dropdown-menu {
 482   position: absolute;
 483   top: 100%;
 484   left: 0;
 485   z-index: 1000;
 486   float: left;
 487   display: none;
 488   min-width: 160px;
 489   list-style: none;
 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;
 495   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;
 504   color: #333333;
 505   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 506   font-size: 13px;
 507   line-height: 20px;
 508 }
 509 .datepicker.dropdown-menu th,
 510 .datepicker.dropdown-menu td {
 511   padding: 4px 5px;
 512 }