时间选择器jquerry特效-CSDN博客

  1 double-date.js代码
  2 
  3 $(function() {
  4     var dateStr = '<div class="date-list"><div class="header clearfix"><div class="header-left fl">&lt;</div><div class="fl"><select class="year"></select></div><div class="fl"><select class="month"><option value="1">1月</option><option value="2">2月</option><option value="3">3月</option><option value="4">4月</option><option value="5">5月</option><option value="6">6月</option><option value="7">7月</option><option value="8">8月</option><option value="9">9月</option><option value="10">10月</option><option value="11">11月</option><option value="12">12月</option></select></div><div class="header-right fl">&gt;</div><div class="fr today">今日</div><div class="fl cls">清空</div></div><table class="dateTable"><thead><tr><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th><th>日</th></tr></thead><tbody><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></tbody></table></div>'
  5     $(dateStr).appendTo($(".date"));
  6     var $date0 = $(".date:first"),
  7         $date1 = $(".date:eq(1)"),
  8         $date_check0 = $(".date-check:first"),
  9         $date_check1 = $(".date-check:eq(1)"),
 10         $date_list0 = $(".date-list:first"),
 11         $date_list1 = $(".date-list:eq(1)"),
 12         $y0 = $(".year:first"),
 13         $y1 = $(".year:eq(1)"),
 14         $m0 = $(".month:first"),
 15         $m1 = $(".month:eq(1)"),
 16         today = new Date(),
 17         today_year = today.getFullYear() + "",
 18         today_month = (today.getMonth() + 1) + "",
 19         today_date = today.getDate() + "",
 20         today_str = today_year + "-" + zero(today_month) + "-" + zero(today_date);
 21     flag0 = 1,
 22     flag1 = 1;
 23     for (var i = 1917; i < 2118; i++) {
 24         var opt = "<option>" + i + "</option>";
 25         $(opt).appendTo($y0);
 26         $(opt).appendTo($y1);
 27     }
 28 
 29     function clearTDcss($td) {
 30         $td.unbind("mouseenter").unbind("mouseleave");
 31         var td = $td[0];
 32         td.style.background = "#FED";
 33         td.style.color = "#000";
 34     }
 35     function clearTDcss_($td) {
 36         clearTDcss($td);
 37 
 38         $td.hover(function() {
 39             $(this).css({
 40                 "background" : "#ccc",
 41                 "color" : "#fff"
 42             });
 43         }, function() {
 44             $(this).css({
 45                 "background" : "#FED",
 46                 "color" : "black"
 47             });
 48         });
 49     }
 50     function setTDcss($td, c) {
 51         var td = $td[0];
 52         td.style.color = "#fff";
 53         if (c == 'now')
 54             td.style.background = "#00cdec";
 55         else if (c == 'current') {
 56             td.style.background = "#66ff00";
 57             $td.unbind("mouseenter").unbind("mouseleave");
 58         }
 59     }
 60     //月份和日期小于10的补0
 61     function zero(num) {
 62         return num >= 10 ? num : "0" + num;
 63     }
 64     function check() {
 65         var from = $date_check0.val(),
 66             to = $date_check1.val();
 67         var from_seconds = from == '' ? 0 : new Date(from.replace("-", "/").replace("-", "/")).getTime(),
 68             to_seconds = to == '' ? 0 : new Date(to.replace("-", "/").replace("-", "/")).getTime();
 69 
 70         var maxDateSpan = $date0.attr("maxDateSpan");
 71         if (!isNaN(maxDateSpan))
 72             maxDateSpan = parseInt(maxDateSpan);
 73         else
 74             maxDateSpan = 0;
 75 
 76         var errMsg = null;
 77         if (from != "" && to != "" && from_seconds > to_seconds)
 78             errMsg = "截止日期不能早于起始日期！";
 79         else if (maxDateSpan > 0 && (from == '' || to == ''))
 80             errMsg = "如果限定了时间间隔的最大天数，则起始日期和截止日期都不能为空！";
 81         else if (maxDateSpan > 0 && to_seconds - from_seconds > 1000 * 60 * 60 * 24 * (maxDateSpan - 1))
 82             errMsg = "时间间隔不能超过 " + maxDateSpan + " 天！";
 83 
 84         if (errMsg == null) {
 85             $date0.removeClass("date-error");
 86             $date1.removeClass("date-error");
 87         } else {
 88             $date0.addClass("date-error");
 89             $date1.addClass("date-error");
 90             alert(errMsg);
 91         }
 92     }
 93     function updateDateTds($date_list, year, month, curYear, curMonth, curDate) {
 94         var lastDay = new Date(year, month, 0).getDate();
 95         var firstDate = new Date(year, month - 1, 1);
 96         var firstDay = firstDate.getDay();
 97         if (firstDay == 0)
 98             firstDay = 7;
 99 
100         var num = 1;
101         $date_list.find("td").each(function() {
102             var $eq = $(this).index() + 1;
103             //给td赋值
104             if ($eq < firstDay && $(this).parent("tr").index() === 0)
105                 $(this).html("");
106             else if (num <= lastDay)
107                 $(this).html(num++);
108             else
109                 $(this).html("")
110 
111             var d = $(this).html();
112             //去掉内容为空的tr
113             if (d == "" && $(this).siblings().html() == "")
114                 $(this).parents("tr").css("display", "none");
115             else
116                 $(this).parents("tr").css("display", "table-row")
117 
118             clearTDcss($(this));
119             if (year == today_year && month == today_month && d == today_date)
120                 setTDcss($(this), "now");
121             else if (year == curYear && month == curMonth && d == curDate)
122                 setTDcss($(this), "current");
123 
124             $(this).hover(function() {
125                 if (d != '' && (year != today_year || month != today_month || d != today_date) && (year != curYear || month != curMonth || d != curDate))
126                     $(this).css({
127                         "background" : "#ccc",
128                         "color" : "#fff"
129                     });
130             }, function() {
131                 if (d != '' && (year != today_year || month != today_month || d != today_date) && (year != curYear || month != curMonth || d != curDate))
132                     $(this).css({
133                         "background" : "#FED",
134                         "color" : "black"
135                     });
136             });
137         });
138     }
139 
140     document.onclick = function() {
141         var ev = window.event || event;
142         var $obj = $(ev.target || ev.srcElement);
143         if (!$obj.is('.date-check')) {
144             if (flag0 == 1)
145                 $date_list0.css("display", "none");
146             if (flag1 == 1)
147                 $date_list1.css("display", "none");
148         }
149     }
150     $date_list0.hover(function() {
151         flag0 = 0;
152     }, function() {
153         flag0 = 1;
154     });
155     $date_list1.hover(function() {
156         flag1 = 0;
157     }, function() {
158         flag1 = 1;
159     });
160 
161     $(".date-check").each(function(i, obj) {
162         $(this).attr("readonly", "readonly");
163         var $date_list = i == 0 ? $date_list0 : $date_list1,
164             $y = i == 0 ? $y0 : $y1,
165             $m = i == 0 ? $m0 : $m1;
166         if ($(this).val() == '' || $(this).val() == today_str) {
167             $y.val(today_year);
168             $m.val(today_month);
169             updateDateTds($date_list, today_year, today_month, '', '', '');
170         } else {
171             var select_year = $(this).val().substring(0, 4),
172                 select_month = $(this).val().substring(5, 7),
173                 select_date = $(this).val().substring(8);
174             if (select_month.charAt(0) == '0')
175                 select_month = select_month.substring(1);
176             if (select_date.charAt(0) == '0')
177                 select_date = select_date.substring(1);
178 
179             $y.val(select_year);
180             $m.val(select_month);
181             updateDateTds($date_list, select_year, select_month, select_year, select_month, select_date);
182         }
183 
184         $(this).on("focus", function() {
185             // 显示前重新获取当前日期，解决跨日问题
186             today = new Date();
187             today_year = today.getFullYear() + "";
188             today_month = (today.getMonth() + 1) + "";
189             today_date = today.getDate() + "";
190             today_str = today_year + "-" + zero(today_month) + "-" + zero(today_date);
191 
192             if ($(this).val() != '') {
193                 var select_year = $(this).val().substring(0, 4),
194                     select_month = $(this).val().substring(5, 7),
195                     select_date = $(this).val().substring(8);
196                 if (select_month.charAt(0) == '0')
197                     select_month = select_month.substring(1);
198                 if (select_date.charAt(0) == '0')
199                     select_date = select_date.substring(1);
200 
201                 if (select_year != $y.val() || select_month != $m.val()) {
202                     $y.val(select_year);
203                     $m.val(select_month);
204                     updateDateTds($date_list, select_year, select_month, select_year, select_month, select_date);
205                 }
206             } else if (today_year != $y.val() || today_month != $m.val()) {
207                 $y.val(today_year);
208                 $m.val(today_month);
209                 updateDateTds($date_list, today_year, today_month, '', '', '');
210             }
211             if (i == 0) {
212                 $date_list0.css("display", "block");
213                 $date_list1.css("display", "none");
214             } else {
215                 $date_list1.css("display", "block");
216                 $date_list0.css("display", "none");
217             }
218         });
219         $(this).on("blur", function() {
220             if (i == 0 && flag0 == 1)
221                 $date_list0.css("display", "none");
222             else if (i == 1 && flag1 == 1)
223                 $date_list1.css("display", "none");
224         })
225     });
226 
227     $(".header-left").each(function(i, obj) {
228         $(this).on("click", function() {
229             var $y = i == 0 ? $y0 : $y1,
230                 $m = i == 0 ? $m0 : $m1;
231             var year = parseInt($y.val());
232             var mon = parseInt($m.val());
233             if (mon >= 2)
234                 mon -= 1;else {
235                 year -= 1;
236                 mon = 12;
237                 $y.val(year)
238             }
239             $m.val(mon);
240             var $date_list = i == 0 ? $date_list0 : $date_list1,
241                 $date_check = i == 0 ? $date_check0 : $date_check1;
242             if ($date_check.val() == '')
243                 updateDateTds($date_list, year, mon, '', '', '');else {
244                 var select_year = $date_check.val().substring(0, 4),
245                     select_month = $date_check.val().substring(5, 7),
246                     select_date = $date_check.val().substring(8);
247                 if (select_month.charAt(0) == '0')
248                     select_month = select_month.substring(1);
249                 if (select_date.charAt(0) == '0')
250                     select_date = select_date.substring(1);
251                 updateDateTds($date_list, year, mon, select_year, select_month, select_date);
252             }
253         })
254     });
255     $(".header-right").each(function(i, obj) {
256         $(this).on("click", function() {
257             var $y = i == 0 ? $y0 : $y1,
258                 $m = i == 0 ? $m0 : $m1;
259             var year = parseInt($y.val());
260             var mon = parseInt($m.val());
261             if (mon < 12)
262                 mon += 1;else {
263                 year += 1;
264                 mon = 1;
265                 $y.val(year)
266             }
267             $m.val(mon);
268             var $date_list = i == 0 ? $date_list0 : $date_list1,
269                 $date_check = i == 0 ? $date_check0 : $date_check1;
270             if ($date_check.val() == '')
271                 updateDateTds($date_list, year, mon, '', '', '');else {
272                 var select_year = $date_check.val().substring(0, 4),
273                     select_month = $date_check.val().substring(5, 7),
274                     select_date = $date_check.val().substring(8);
275                 if (select_month.charAt(0) == '0')
276                     select_month = select_month.substring(1);
277                 if (select_date.charAt(0) == '0')
278                     select_date = select_date.substring(1);
279                 updateDateTds($date_list, year, mon, select_year, select_month, select_date);
280             }
281         })
282     });
283     $(".header select").each(function(j, obj) {
284         $(this).on("change", function() {
285             var i = j < 2 ? 0 : 1;
286             if (i == 0)
287                 flag0 = 0;
288             else
289                 flag1 = 0;
290 
291             var $date_check = i == 0 ? $date_check0 : $date_check1,
292                 $date_list = i == 0 ? $date_list0 : $date_list1,
293                 $y = i == 0 ? $y0 : $y1,
294                 $m = i == 0 ? $m0 : $m1;
295             if ($date_check.val() == '')
296                 updateDateTds($date_list, $y.val(), $m.val(), '', '', '');else {
297                 var select_year = $date_check.val().substring(0, 4),
298                     select_month = $date_check.val().substring(5, 7),
299                     select_date = $date_check.val().substring(8);
300                 if (select_month.charAt(0) == '0')
301                     select_month = select_month.substring(1);
302                 if (select_date.charAt(0) == '0')
303                     select_date = select_date.substring(1);
304                 updateDateTds($date_list, $y.val(), $m.val(), select_year, select_month, select_date);
305             }
306         })
307     });
308     $(".today").each(function(i, obj) {
309         $(this).on("click", function() {
310             var $date_check = i == 0 ? $date_check0 : $date_check1,
311                 $date_list = i == 0 ? $date_list0 : $date_list1;
312             $date_list.css("display", "none");
313             var select_str = $date_check.val();
314             if (today_str != select_str) {
315                 if ('' != select_str) {
316                     var select_year = select_str.substring(0, 4),
317                         select_month = select_str.substring(5, 7),
318                         select_date = select_str.substring(8);
319                     if (select_month.charAt(0) == '0')
320                         select_month = select_month.substring(1);
321                     if (select_date.charAt(0) == '0')
322                         select_date = select_date.substring(1);
323 
324                     if (select_year == today_year && select_month == today_month) {
325                         $date_list.find("td").each(function() {
326                             if ($(this).html() == select_date) {
327                                 clearTDcss_($(this));
328                                 return false;
329                             }
330                         });
331                     }
332                 }
333 
334                 $date_check.val(today_str);
335                 check();
336             }
337         })
338     });
339     //点击清空则把日期清空
340     $(".cls").each(function(i, obj) {
341         $(this).on("click", function() {
342             var $date_check = i == 0 ? $date_check0 : $date_check1,
343                 $date_list = i == 0 ? $date_list0 : $date_list1;
344             $date_list.css("display", "none");
345             var select_str = $date_check.val();
346             if ('' != select_str) {
347                 var select_year = select_str.substring(0, 4),
348                     select_month = select_str.substring(5, 7),
349                     select_date = select_str.substring(8);
350                 if (select_month.charAt(0) == '0')
351                     select_month = select_month.substring(1);
352                 if (select_date.charAt(0) == '0')
353                     select_date = select_date.substring(1);
354 
355                 if (select_year == today_year && select_month == today_month) {
356                     $date_list.find("td").each(function() {
357                         if ($(this).html() == select_date) {
358                             clearTDcss_($(this));
359                             return false;
360                         }
361                     });
362                 }
363 
364                 $date_check.val('');
365                 check();
366             }
367         })
368     });
369     $(".date td").on("click", function() {
370         if ($(this).html() == "")
371             return;
372 
373         var d0 = $(this).parents(".date").is('.date0');
374         var $date_check = d0 ? $date_check0 : $date_check1,
375             $date_list = d0 ? $date_list0 : $date_list1,
376             $y = d0 ? $y0 : $y1,
377             $m = d0 ? $m0 : $m1;
378         $date_list.css("display", "none");
379         var str = $y.val() + "-" + zero($m.val()) + "-" + zero($(this).html());
380         var select_str = $date_check.val();
381         if (str != select_str) {
382             if (select_str == '') {
383                 if (str != today_str)
384                     setTDcss($(this), "current");
385             } else {
386                 var select_year = select_str.substring(0, 4),
387                     select_month = select_str.substring(5, 7),
388                     select_date = select_str.substring(8);
389                 if (select_month.charAt(0) == '0')
390                     select_month = select_month.substring(1);
391                 if (select_date.charAt(0) == '0')
392                     select_date = select_date.substring(1);
393 
394                 var cur_year = str.substring(0, 4),
395                     cur_month = str.substring(5, 7),
396                     cur_date = str.substring(8);
397                 if (cur_month.charAt(0) == '0')
398                     cur_month = cur_month.substring(1);
399                 if (cur_date.charAt(0) == '0')
400                     cur_date = cur_date.substring(1);
401 
402                 if (select_year != cur_year || select_month != cur_month) { // 不同框，不用清除以前的选择TD样式
403                     if (str != today_str)
404                         setTDcss($(this), "current");
405                 } else {
406                     var k = 0;
407                     $date_list.find("td").each(function() {
408                         if ($(this).html() != '') {
409                             if ($(this).html() == select_date) {
410                                 if (select_str != today_str)
411                                     clearTDcss_($(this));
412                                 if (++k == 2)
413                                     return false;
414                             } else if ($(this).html() == cur_date) {
415                                 if (str != today_str) {
416                                     $(this).unbind("mouseenter").unbind("mouseleave");
417                                     setTDcss($(this), "current");
418                                 }
419                                 if (++k == 2)
420                                     return false;
421                             }
422                         }
423                     });
424                 }
425             }
426 
427             $date_check.val(str);
428 
429             check();
430 
431         }
432     });
433 
434 
435     document.body.onselectstart = document.body.ondrag = function() {
436         return false;
437     }
438 })

  1 double-date.css代码
  2 
  3 * {
  4     margin: 0;
  5     padding: 0;
  6     box-sizing: border-box;
  7 }
  8 
  9 .date {
 10     position: relative;
 11     display: inline;
 12 }
 13 
 14 /* .date0 {
 15 
 16 } */
 17 
 18 .date-check{
 19     width:150px;
 20     height:20px;
 21     /* line-height:30px; */
 22     border: 1px solid #ccc;
 23     /* padding: 0 5px; */
 24 }
 25 
 26 .dateTable {
 27     border-collapse: collapse;
 28     /* table-layout: fixed; */
 29 }
 30 
 31 .clearfix {
 32     zoom: 1;
 33 }
 34 .clearfix:after {
 35     content: ".";
 36     display: block;
 37     width: 0;
 38     height: 0;
 39     visibility: hidden;
 40     clear: both;
 41 }
 42 
 43 .fl {
 44     float: left;
 45 }
 46 
 47 .fr {
 48     float: right;
 49 }
 50 
 51 .date-list {
 52     display: none;
 53     position: absolute;
 54     top: 16px !important;
 55     *top: 11px;
 56     _top: 23px;
 57     left: 0;
 58     padding-top: 6px;
 59     background: #FED;
 60     border-radius: 5px;
 61     -webkit-border-radius: 5px;
 62     overflow: hidden;
 63     border: 1px solid;
 64     border-color: #ccc #ccc transparent #ccc;
 65     /* z-index: 999; */
 66 }
 67 
 68 .header {
 69     margin-bottom: 4px;
 70     padding: 0 5px;
 71 }
 72 
 73 .header .fl {
 74     margin-right: 5px;
 75 }
 76 
 77 .header .fl, .header .fr {
 78     cursor: pointer;
 79 }
 80 
 81 .header select {
 82     vertical-align: top;
 83 }
 84 
 85 .header-left, .header-right {
 86     border-radius: 50%;
 87     width: 20px;
 88     height: 20px;
 89     text-align: center;
 90     vertical-align: middle;
 91     padding: 2px 0px 0px 2px;
 92     border: 1px solid #ccc;
 93 }
 94 
 95 .today, .cls {
 96     padding: 2px 5px;
 97     border: 1px solid #ccc;
 98     border-radius: 5px;
 99     background: #ccc;
100     color: #fff;
101     font-size: 12px;
102     width: 36px;
103 }
104 
105 .date-list, .date-list table {
106     width: 260px;
107 }
108 
109 .date-list thead {
110     background: #00cdec;
111 }
112 
113 .date-list th {
114     padding: 2px;
115     color: #fff;
116     border: 1px solid #ccc;
117     font-size: 14px;
118     font-weight: normal;
119 }
120 
121 .date-list td {
122     border: 1px solid #ccc;
123     padding: 2px 0;
124     text-align: center;
125     font-size: 12px;
126 }
127 
128 .date-list td.now {
129     background: #00cdec;
130     color: #fff;
131 }
132 
133 .date-list td.current {
134     background: #66ff00;
135     color: #fff;
136 }
137 
138 .date-error .date-check {
139     border: 1px solid red;
140 }

 1 jsp代码
 2 
 3 <script type="text/javascript" src="<c:url value="/js/double-date.js"/>"></script>
 4 
 5 <link rel="StyleSheet" href="<c:url value="/styles/double-date.css"/>"
 6     type="text/css" />
 7 
 8 .imgButtonDefault {
 9     border: 1px solid #EBF2EB;
10 }
11 
12 .imgButtonDown {
13     border-top: 1px solid #CACAFF;
14     border-left: 1px solid #CACAFF;
15     border-right: 1px solid #FFFFFF;
16     border-bottom: 1px solid #FFFFFF;
17     cursor: hand;
18 }
19 
20 .imgButtonOver {
21     border-top: 1px solid #FFFFFF;
22     border-left: 1px solid #FFFFFF;
23     border-right: 1px solid #CACAFF;
24     border-bottom: 1px solid #CACAFF;
25     cursor: hand;
26 }
27 
28 $(function() {
29         $(".imgButtonDefault").each(function(i, obj) {
30             $(this).bind(
31                 {
32                     mouseover : function() {
33                         this.className = "imgButtonOver";
34                     },
35                     mouseout : function() {
36                         this.className = "imgButtonDefault";
37                     },
38                     mousedown : function() {
39                         this.className = "imgButtonDown";
40                     },
41                     mouseup : function() {
42                         this.className = "imgButtonOver";
43                     },
44                     click : function() {
45                         query(i);
46                     }
47                 });
48         });
49 
50 <span>&nbsp;&nbsp;&nbsp;&nbsp;邮寄起始日期：</span>
51         <div class="date date0" maxDateSpan=7>
52             <input id="from1" type="text"
53                 value="<fmt:formatDate value='${requestScope.beginTime}' pattern='yyyy-MM-dd'/>"
54                 class="date-check" />
55         </div>
56         <span>&nbsp;&nbsp;&nbsp;&nbsp;邮寄截止日期：</span>
57         <div class="date">
58             <input id="to1" type="text"
59                 value="<fmt:formatDate value='${requestScope.endTime}' pattern='yyyy-MM-dd'/>"
60                 class="date-check" />
61         </div>