datepicker.css 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
  1. div.datepicker {
  2. position: relative;
  3. font-family: Arial, Helvetica, sans-serif;
  4. font-size: 12px;
  5. width: 196px;
  6. height: 147px;
  7. position: absolute;
  8. cursor: default;
  9. top: 0;
  10. left: 0;
  11. display: none;
  12. }
  13. .datepickerContainer {
  14. background: #121212;
  15. position: absolute;
  16. top: 10px;
  17. left: 10px;
  18. }
  19. .datepickerBorderT {
  20. position: absolute;
  21. left: 10px;
  22. top: 0;
  23. right: 10px;
  24. height: 10px;
  25. background: url(./images/datepicker_t.png);
  26. }
  27. .datepickerBorderB {
  28. position: absolute;
  29. left: 10px;
  30. bottom: 0;
  31. right: 10px;
  32. height: 10px;
  33. background: url(./images/datepicker_b.png);
  34. }
  35. .datepickerBorderL {
  36. position: absolute;
  37. left: 0;
  38. bottom: 10px;
  39. top: 10px;
  40. width: 10px;
  41. background: url(./images/datepicker_l.png);
  42. }
  43. .datepickerBorderR {
  44. position: absolute;
  45. right: 0;
  46. bottom: 10px;
  47. top: 10px;
  48. width: 10px;
  49. background: url(./images/datepicker_r.png);
  50. }
  51. .datepickerBorderTL {
  52. position: absolute;
  53. top: 0;
  54. left: 0;
  55. width: 10px;
  56. height: 10px;
  57. background: url(./images/datepicker_tl.png);
  58. }
  59. .datepickerBorderTR {
  60. position: absolute;
  61. top: 0;
  62. right: 0;
  63. width: 10px;
  64. height: 10px;
  65. background: url(./images/datepicker_tr.png);
  66. }
  67. .datepickerBorderBL {
  68. position: absolute;
  69. bottom: 0;
  70. left: 0;
  71. width: 10px;
  72. height: 10px;
  73. background: url(./images/datepicker_bl.png);
  74. }
  75. .datepickerBorderBR {
  76. position: absolute;
  77. bottom: 0;
  78. right: 0;
  79. width: 10px;
  80. height: 10px;
  81. background: url(./images/datepicker_br.png);
  82. }
  83. .datepickerHidden {
  84. display: none;
  85. }
  86. div.datepicker table {
  87. border-collapse:collapse;
  88. }
  89. div.datepicker a {
  90. color: #eee;
  91. text-decoration: none;
  92. cursor: default;
  93. outline: none;
  94. }
  95. div.datepicker table td {
  96. text-align: right;
  97. padding: 0;
  98. margin: 0;
  99. }
  100. div.datepicker th {
  101. text-align: center;
  102. color: #999;
  103. font-weight: normal;
  104. }
  105. div.datepicker tbody th {
  106. text-align: left;
  107. }
  108. div.datepicker tbody a {
  109. display: block;
  110. }
  111. .datepickerDays a {
  112. width: 20px;
  113. line-height: 16px;
  114. height: 16px;
  115. padding-right: 2px;
  116. }
  117. .datepickerYears a,
  118. .datepickerMonths a{
  119. width: 44px;
  120. line-height: 36px;
  121. height: 36px;
  122. text-align: center;
  123. }
  124. td.datepickerNotInMonth a {
  125. color: #666;
  126. }
  127. tbody.datepickerDays td.datepickerSelected{
  128. background: #136A9F;
  129. }
  130. tbody.datepickerDays td.datepickerNotInMonth.datepickerSelected {
  131. background: #17384d;
  132. }
  133. tbody.datepickerYears td.datepickerSelected,
  134. tbody.datepickerMonths td.datepickerSelected{
  135. background: #17384d;
  136. }
  137. div.datepicker a:hover,
  138. div.datepicker a:hover {
  139. color: #88c5eb;
  140. }
  141. div.datepicker td.datepickerNotInMonth a:hover {
  142. color: #999;
  143. }
  144. div.datepicker tbody th {
  145. text-align: left;
  146. }
  147. .datepickerSpace div {
  148. width: 20px;
  149. }
  150. .datepickerGoNext a,
  151. .datepickerGoPrev a,
  152. .datepickerMonth a {
  153. text-align: center;
  154. height: 20px;
  155. line-height: 20px;
  156. }
  157. .datepickerGoNext a {
  158. float: right;
  159. width: 20px;
  160. }
  161. .datepickerGoPrev a {
  162. float: left;
  163. width: 20px;
  164. }
  165. table.datepickerViewDays tbody.datepickerMonths,
  166. table.datepickerViewDays tbody.datepickerYears {
  167. display: none;
  168. }
  169. table.datepickerViewMonths tbody.datepickerDays,
  170. table.datepickerViewMonths tbody.datepickerYears,
  171. table.datepickerViewMonths tr.datepickerDoW {
  172. display: none;
  173. }
  174. table.datepickerViewYears tbody.datepickerDays,
  175. table.datepickerViewYears tbody.datepickerMonths,
  176. table.datepickerViewYears tr.datepickerDoW {
  177. display: none;
  178. }
  179. td.datepickerDisabled a,
  180. td.datepickerDisabled.datepickerNotInMonth a{
  181. color: #333;
  182. }
  183. td.datepickerDisabled a:hover {
  184. color: #333;
  185. }
  186. td.datepickerSpecial a {
  187. background: #700;
  188. }
  189. /* www.codefans.net */
  190. td.datepickerSpecial.datepickerSelected a {
  191. background: #a00;
  192. }