datepicker.css 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358
  1. /*
  2. * My97 DatePicker 4.6
  3. * 皮肤名称:blue
  4. */
  5. /* 日期选择容器 DIV */
  6. .WdateDiv{
  7. /* width:180px; */
  8. /* background-color:#fff; */
  9. /* border:#87B3DA 1px solid; */
  10. /* padding:2px; */
  11. position: absolute;
  12. padding: 0px;
  13. overflow: hidden;
  14. border: 1px solid rgba(0,0,0,0.2);
  15. background: white;
  16. width: 220px;
  17. margin-top: 1px;
  18. z-index: 9999;
  19. border-radius: 6px;
  20. box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  21. border-top-color: #ccc;
  22. border-bottom-color: #ccc;
  23. border-left-color: #ccc;
  24. border-right-color: #ccc;
  25. border-top-width: 1px;
  26. border-bottom-width: 1px;
  27. border-left-width: 1px;
  28. border-right-width: 1px;
  29. border-top-style: solid;
  30. border-bottom-style: solid;
  31. border-left-style: solid;
  32. border-right-style: solid;
  33. }
  34. /* 双月日历的宽度 */
  35. .WdateDiv2{
  36. width:360px;
  37. }
  38. .WdateDiv *{font-size:9pt;}
  39. /****************************
  40. * 导航图标 全部是A标签
  41. ***************************/
  42. .WdateDiv .NavImg a{
  43. cursor:pointer;
  44. display:block;
  45. width:23px;
  46. height:25px;
  47. }
  48. .NavImgll{
  49. top: 0;
  50. left:4px;
  51. width: 23px;
  52. height: 25px;
  53. position: absolute;
  54. cursor: pointer;
  55. }
  56. .NavImgl{
  57. left:24px;
  58. top: 0;
  59. width: 23px;
  60. height: 25px;
  61. position: absolute;
  62. cursor: pointer;
  63. }
  64. .WdateDiv .NavImgll a{
  65. width: 20px;
  66. height: 20px;
  67. display: block;
  68. position: absolute;
  69. top: 2px;
  70. left: 2px;
  71. float:left;
  72. background: url(navLeft.gif) no-repeat center;
  73. }
  74. .WdateDiv .NavImgl a{
  75. background:url(left.gif) no-repeat center;
  76. }
  77. .NavImgr{right:24px;position:absolute;}
  78. .WdateDiv .NavImgr a{
  79. background:url(right.gif) no-repeat center;
  80. }
  81. .NavImgrr{right:4px; position:absolute;}
  82. .WdateDiv .NavImgrr a{
  83. background:url(navRight.gif) no-repeat center;
  84. }
  85. /****************************
  86. * 年份月份相关
  87. ***************************/
  88. /* 年份月份栏 DIV */
  89. .WdateDiv #dpTitle{
  90. /* height:24px; */
  91. /* background:url(bg.jpg); */
  92. /* padding-top:2px; */
  93. /* margin-bottom:2px; */
  94. width: 100%;
  95. height: 25px;
  96. text-align: center;
  97. position: relative;
  98. text-align: center;
  99. }
  100. /* 年份月份输入框 INPUT */
  101. .WdateDiv .yminput{
  102. margin-left: 35px;
  103. font-weight: bold;
  104. margin-top:2px;
  105. text-align:center;
  106. border:0px;
  107. height:16px;
  108. width:50px;
  109. color:#333;
  110. background-color:transparent;
  111. cursor:pointer;
  112. }
  113. /* 年份月份输入框获得焦点时的样式 INPUT */
  114. .WdateDiv .yminputfocus{
  115. margin-left: 35px;
  116. margin-top:2px;
  117. text-align:center;
  118. font-weight:bold;
  119. color:#195184;
  120. border:#939393 1px solid;
  121. height:16px;
  122. width:50px;
  123. }
  124. /* 菜单选择框 DIV */
  125. .WdateDiv .menuSel{
  126. z-index:1;
  127. position:absolute;
  128. background-color:#FFFFFF;
  129. border:#A3C6C8 1px solid;
  130. display:none;
  131. left:40px;
  132. width:30px;
  133. }
  134. /* 菜单的样式 TD */
  135. .WdateDiv .menu{
  136. cursor:pointer;
  137. background-color:#fff;
  138. color:#333;
  139. }
  140. /* 菜单的mouseover样式 TD */
  141. .WdateDiv .menuOn{
  142. cursor:pointer;
  143. background-color:#dbdbdb;
  144. }
  145. /* 菜单无效时的样式 TD */
  146. .WdateDiv .invalidMenu{
  147. color:#aaa;
  148. }
  149. /* 年选择框的偏移 DIV */
  150. .WdateDiv .YMenu{
  151. margin-top:16px;
  152. }
  153. /* 月选择框的偏移 DIV */
  154. .WdateDiv .MMenu{
  155. margin-top:16px;
  156. *width:62px;
  157. }
  158. /* 时选择框的位置 DIV */
  159. .WdateDiv .hhMenu{
  160. margin-top:-86px;
  161. margin-left:26px;
  162. }
  163. /* 分选择框的位置 DIV */
  164. .WdateDiv .mmMenu{
  165. margin-top:-44px;
  166. margin-left:26px;
  167. }
  168. /* 秒选择框的位置 DIV */
  169. .WdateDiv .ssMenu{
  170. margin-top:-23px;
  171. margin-left:26px;
  172. }
  173. /****************************
  174. * 周相关
  175. ***************************/
  176. .WdateDiv .Wweek {
  177. text-align:center;
  178. background:#B7C9FD;
  179. border-right:#BDEBEE 1px solid;
  180. }
  181. /****************************
  182. * 星期,日期相关
  183. ***************************/
  184. /* 星期栏 TR */
  185. .WdateDiv .MTitle{
  186. color:#fff;
  187. background-color:#ccc;
  188. height:25px;
  189. line-height:25px;
  190. }
  191. /* 日期栏表格 TABLE */
  192. .WdateDiv .WdayTable{
  193. padding: 0px 3px;
  194. line-height:20px;
  195. color:#3C82C0;
  196. }
  197. /* 日期格的样式 TD */
  198. .WdateDiv .Wday{
  199. color:#3f4040;
  200. text-align: center;
  201. cursor:pointer;
  202. }
  203. /* 日期格的mouseover样式 TD */
  204. .WdateDiv .WdayOn{
  205. color:#3f4040;
  206. background-color: #dddddd;
  207. -webkit-border-radius: 4px;
  208. text-align:center;
  209. }
  210. /* 周末日期格的样式 TD */
  211. .WdateDiv .Wwday{
  212. text-align: center;
  213. cursor:pointer;
  214. color:#D01214;
  215. }
  216. /* 周末日期格的mouseover样式 TD */
  217. .WdateDiv .WwdayOn{
  218. background-color: #dddddd;
  219. -webkit-border-radius: 4px;
  220. text-align:center;
  221. }
  222. .WdateDiv .Wtoday{
  223. cursor:pointer;
  224. color:#65933C;
  225. }
  226. .WdateDiv .Wselday{
  227. text-align:center;
  228. color: #fff;
  229. background: -moz-linear-gradient(top, #0088cc, #0044cc);
  230. background: -webkit-gradient(linear, 0 0, 0 100%, from(#08C), to(#04C));
  231. background: -o-linear-gradient(top, #0088cc, #0044cc);
  232. background-color: rgb(0, 109, 204);
  233. border-radius: 4px;
  234. }
  235. .WdateDiv .WspecialDay{
  236. background-color:#66F4DF;
  237. }
  238. /* 其他月份的日期 */
  239. .WdateDiv .WotherDay{
  240. text-align:center;
  241. cursor:pointer;
  242. color:#888888;
  243. }
  244. /* 其他月份的日期mouseover样式 */
  245. .WdateDiv .WotherDayOn{
  246. background-color: #dddddd;
  247. -webkit-border-radius: 4px;
  248. text-align:center;
  249. }
  250. /* 无效日期的样式,即在日期范围以外日期格的样式,不能选择的日期 */
  251. .WdateDiv .WinvalidDay{
  252. color:#aaa;
  253. }
  254. /****************************
  255. * 时间相关
  256. ***************************/
  257. /* 时间栏 DIV */
  258. .WdateDiv #dpTime{
  259. }
  260. /* 时间文字 SPAN */
  261. .WdateDiv #dpTime #dpTimeStr{
  262. margin-left:1px;
  263. color:#3C81C2;
  264. }
  265. /* 时间输入框 INPUT */
  266. .WdateDiv #dpTime input{
  267. height:16px;
  268. width:18px;
  269. text-align:center;
  270. color:#333;
  271. border:#3C81C2 1px solid;
  272. }
  273. /* 时间 时 INPUT */
  274. .WdateDiv #dpTime .tB{
  275. border-right:0px;
  276. }
  277. /* 时间 分和间隔符 ':' INPUT */
  278. .WdateDiv #dpTime .tE{
  279. border-left:0;
  280. border-right:0;
  281. }
  282. /* 时间 秒 INPUT */
  283. .WdateDiv #dpTime .tm{
  284. width:7px;
  285. border-left:0;
  286. border-right:0;
  287. }
  288. /* 时间右边的向上按钮 BUTTON */
  289. .WdateDiv #dpTime #dpTimeUp{
  290. height:10px;
  291. width:13px;
  292. border:0px;
  293. background-image:url(up.jpg);
  294. }
  295. /* 时间右边的向下按钮 BUTTON */
  296. .WdateDiv #dpTime #dpTimeDown{
  297. height:10px;
  298. width:13px;
  299. border:0px;
  300. background-image:url(down.jpg);
  301. }
  302. /****************************
  303. * 其他
  304. ***************************/
  305. .WdateDiv #dpQS {
  306. float:left;
  307. margin-right:3px;
  308. margin-top:3px;
  309. background-image:url(qs.jpg);
  310. width:20px;
  311. height:20px;
  312. cursor:pointer;
  313. }
  314. .WdateDiv #dpControl {
  315. width: 100%;
  316. height: 25px;
  317. background: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#e6e6e6));
  318. text-align: right;
  319. position: relative;
  320. }
  321. .WdateDiv .dpButton{
  322. margin-left: 5px;
  323. margin-top: 4px;
  324. width: 50px;
  325. height: 19px;
  326. line-height: 19px;
  327. padding: 0px;
  328. overflow: hidden;
  329. text-align: center;
  330. text-decoration: none;
  331. cursor: pointer;
  332. color: #333333;
  333. text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  334. background-color: #f5f5f5;
  335. background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
  336. background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
  337. background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
  338. background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
  339. background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
  340. background-repeat: repeat-x;
  341. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
  342. border-color: #e6e6e6 #e6e6e6 #bfbfbf;
  343. border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  344. filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  345. border: 1px solid #cccccc;
  346. border-bottom-color: #b3b3b3;
  347. -webkit-border-radius: 4px;
  348. -moz-border-radius: 4px;
  349. border-radius: 4px;
  350. -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
  351. -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
  352. box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
  353. }