1 double-
date.js代码
2
3 $(
function() {
4 var dateStr = '<div class="date-list"><div class="header clearfix"><div class="header-left fl"><</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">></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> 邮寄起始日期：</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> 邮寄截止日期：</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>
转载于:https://www.cnblogs.com/jinhuan/p/6812146.html
