首页 > 代码库 > 时间选择器jquerry特效
时间选择器jquerry特效
double-date.js代码
$(function() {
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="http://www.mamicode.com/1">1月</option><option value="http://www.mamicode.com/2">2月</option><option value="http://www.mamicode.com/3">3月</option><option value="http://www.mamicode.com/4">4月</option><option value="http://www.mamicode.com/5">5月</option><option value="http://www.mamicode.com/6">6月</option><option value="http://www.mamicode.com/7">7月</option><option value="http://www.mamicode.com/8">8月</option><option value="http://www.mamicode.com/9">9月</option><option value="http://www.mamicode.com/10">10月</option><option value="http://www.mamicode.com/11">11月</option><option value="http://www.mamicode.com/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>‘
$(dateStr).appendTo($(".date"));
var $date0 = $(".date:first"),
$date1 = $(".date:eq(1)"),
$date_check0 = $(".date-check:first"),
$date_check1 = $(".date-check:eq(1)"),
$date_list0 = $(".date-list:first"),
$date_list1 = $(".date-list:eq(1)"),
$y0 = $(".year:first"),
$y1 = $(".year:eq(1)"),
$m0 = $(".month:first"),
$m1 = $(".month:eq(1)"),
today = new Date(),
today_year = today.getFullYear() + "",
today_month = (today.getMonth() + 1) + "",
today_date = today.getDate() + "",
today_str = today_year + "-" + zero(today_month) + "-" + zero(today_date);
flag0 = 1,
flag1 = 1;
for (var i = 1917; i < 2118; i++) {
var opt = "<option>" + i + "</option>";
$(opt).appendTo($y0);
$(opt).appendTo($y1);
}
function clearTDcss($td) {
$td.unbind("mouseenter").unbind("mouseleave");
var td = $td[0];
td.style.background = "#FED";
td.style.color = "#000";
}
function clearTDcss_($td) {
clearTDcss($td);
$td.hover(function() {
$(this).css({
"background" : "#ccc",
"color" : "#fff"
});
}, function() {
$(this).css({
"background" : "#FED",
"color" : "black"
});
});
}
function setTDcss($td, c) {
var td = $td[0];
td.style.color = "#fff";
if (c == ‘now‘)
td.style.background = "#00cdec";
else if (c == ‘current‘) {
td.style.background = "#66ff00";
$td.unbind("mouseenter").unbind("mouseleave");
}
}
//月份和日期小于10的补0
function zero(num) {
return num >= 10 ? num : "0" + num;
}
function check() {
var from = $date_check0.val(),
to = $date_check1.val();
var from_seconds = from == ‘‘ ? 0 : new Date(from.replace("-", "/").replace("-", "/")).getTime(),
to_seconds = to == ‘‘ ? 0 : new Date(to.replace("-", "/").replace("-", "/")).getTime();
var maxDateSpan = $date0.attr("maxDateSpan");
if (!isNaN(maxDateSpan))
maxDateSpan = parseInt(maxDateSpan);
else
maxDateSpan = 0;
var errMsg = null;
if (from != "" && to != "" && from_seconds > to_seconds)
errMsg = "截止日期不能早于起始日期！";
else if (maxDateSpan > 0 && (from == ‘‘ || to == ‘‘))
errMsg = "如果限定了时间间隔的最大天数，则起始日期和截止日期都不能为空！";
else if (maxDateSpan > 0 && to_seconds - from_seconds > 1000 * 60 * 60 * 24 * (maxDateSpan - 1))
errMsg = "时间间隔不能超过 " + maxDateSpan + " 天！";
if (errMsg == null) {
$date0.removeClass("date-error");
$date1.removeClass("date-error");
} else {
$date0.addClass("date-error");
$date1.addClass("date-error");
alert(errMsg);
}
}
function updateDateTds($date_list, year, month, curYear, curMonth, curDate) {
var lastDay = new Date(year, month, 0).getDate();
var firstDate = new Date(year, month - 1, 1);
var firstDay = firstDate.getDay();
if (firstDay == 0)
firstDay = 7;
var num = 1;
$date_list.find("td").each(function() {
var $eq = $(this).index() + 1;
//给td赋值
if ($eq < firstDay && $(this).parent("tr").index() === 0)
$(this).html("");
else if (num <= lastDay)
$(this).html(num++);
else
$(this).html("")
var d = $(this).html();
//去掉内容为空的tr
if (d == "" && $(this).siblings().html() == "")
$(this).parents("tr").css("display", "none");
else
$(this).parents("tr").css("display", "table-row")
clearTDcss($(this));
if (year == today_year && month == today_month && d == today_date)
setTDcss($(this), "now");
else if (year == curYear && month == curMonth && d == curDate)
setTDcss($(this), "current");
$(this).hover(function() {
if (d != ‘‘ && (year != today_year || month != today_month || d != today_date) && (year != curYear || month != curMonth || d != curDate))
$(this).css({
"background" : "#ccc",
"color" : "#fff"
});
}, function() {
if (d != ‘‘ && (year != today_year || month != today_month || d != today_date) && (year != curYear || month != curMonth || d != curDate))
$(this).css({
"background" : "#FED",
"color" : "black"
});
});
});
}
document.onclick = function() {
var ev = window.event || event;
var $obj = $(ev.target || ev.srcElement);
if (!$obj.is(‘.date-check‘)) {
if (flag0 == 1)
$date_list0.css("display", "none");
if (flag1 == 1)
$date_list1.css("display", "none");
}
}
$date_list0.hover(function() {
flag0 = 0;
}, function() {
flag0 = 1;
});
$date_list1.hover(function() {
flag1 = 0;
}, function() {
flag1 = 1;
});
$(".date-check").each(function(i, obj) {
$(this).attr("readonly", "readonly");
var $date_list = i == 0 ? $date_list0 : $date_list1,
$y = i == 0 ? $y0 : $y1,
$m = i == 0 ? $m0 : $m1;
if ($(this).val() == ‘‘ || $(this).val() == today_str) {
$y.val(today_year);
$m.val(today_month);
updateDateTds($date_list, today_year, today_month, ‘‘, ‘‘, ‘‘);
} else {
var select_year = $(this).val().substring(0, 4),
select_month = $(this).val().substring(5, 7),
select_date = $(this).val().substring(8);
if (select_month.charAt(0) == ‘0‘)
select_month = select_month.substring(1);
if (select_date.charAt(0) == ‘0‘)
select_date = select_date.substring(1);
$y.val(select_year);
$m.val(select_month);
updateDateTds($date_list, select_year, select_month, select_year, select_month, select_date);
}
$(this).on("focus", function() {
// 显示前重新获取当前日期，解决跨日问题
today = new Date();
today_year = today.getFullYear() + "";
today_month = (today.getMonth() + 1) + "";
today_date = today.getDate() + "";
today_str = today_year + "-" + zero(today_month) + "-" + zero(today_date);
if ($(this).val() != ‘‘) {
var select_year = $(this).val().substring(0, 4),
select_month = $(this).val().substring(5, 7),
select_date = $(this).val().substring(8);
if (select_month.charAt(0) == ‘0‘)
select_month = select_month.substring(1);
if (select_date.charAt(0) == ‘0‘)
select_date = select_date.substring(1);
if (select_year != $y.val() || select_month != $m.val()) {
$y.val(select_year);
$m.val(select_month);
updateDateTds($date_list, select_year, select_month, select_year, select_month, select_date);
}
} else if (today_year != $y.val() || today_month != $m.val()) {
$y.val(today_year);
$m.val(today_month);
updateDateTds($date_list, today_year, today_month, ‘‘, ‘‘, ‘‘);
}
if (i == 0) {
$date_list0.css("display", "block");
$date_list1.css("display", "none");
} else {
$date_list1.css("display", "block");
$date_list0.css("display", "none");
}
});
$(this).on("blur", function() {
if (i == 0 && flag0 == 1)
$date_list0.css("display", "none");
else if (i == 1 && flag1 == 1)
$date_list1.css("display", "none");
})
});
$(".header-left").each(function(i, obj) {
$(this).on("click", function() {
var $y = i == 0 ? $y0 : $y1,
$m = i == 0 ? $m0 : $m1;
var year = parseInt($y.val());
var mon = parseInt($m.val());
if (mon >= 2)
mon -= 1;else {
year -= 1;
mon = 12;
$y.val(year)
}
$m.val(mon);
var $date_list = i == 0 ? $date_list0 : $date_list1,
$date_check = i == 0 ? $date_check0 : $date_check1;
if ($date_check.val() == ‘‘)
updateDateTds($date_list, year, mon, ‘‘, ‘‘, ‘‘);else {
var select_year = $date_check.val().substring(0, 4),
select_month = $date_check.val().substring(5, 7),
select_date = $date_check.val().substring(8);
if (select_month.charAt(0) == ‘0‘)
select_month = select_month.substring(1);
if (select_date.charAt(0) == ‘0‘)
select_date = select_date.substring(1);
updateDateTds($date_list, year, mon, select_year, select_month, select_date);
}
})
});
$(".header-right").each(function(i, obj) {
$(this).on("click", function() {
var $y = i == 0 ? $y0 : $y1,
$m = i == 0 ? $m0 : $m1;
var year = parseInt($y.val());
var mon = parseInt($m.val());
if (mon < 12)
mon += 1;else {
year += 1;
mon = 1;
$y.val(year)
}
$m.val(mon);
var $date_list = i == 0 ? $date_list0 : $date_list1,
$date_check = i == 0 ? $date_check0 : $date_check1;
if ($date_check.val() == ‘‘)
updateDateTds($date_list, year, mon, ‘‘, ‘‘, ‘‘);else {
var select_year = $date_check.val().substring(0, 4),
select_month = $date_check.val().substring(5, 7),
select_date = $date_check.val().substring(8);
if (select_month.charAt(0) == ‘0‘)
select_month = select_month.substring(1);
if (select_date.charAt(0) == ‘0‘)
select_date = select_date.substring(1);
updateDateTds($date_list, year, mon, select_year, select_month, select_date);
}
})
});
$(".header select").each(function(j, obj) {
$(this).on("change", function() {
var i = j < 2 ? 0 : 1;
if (i == 0)
flag0 = 0;
else
flag1 = 0;
var $date_check = i == 0 ? $date_check0 : $date_check1,
$date_list = i == 0 ? $date_list0 : $date_list1,
$y = i == 0 ? $y0 : $y1,
$m = i == 0 ? $m0 : $m1;
if ($date_check.val() == ‘‘)
updateDateTds($date_list, $y.val(), $m.val(), ‘‘, ‘‘, ‘‘);else {
var select_year = $date_check.val().substring(0, 4),
select_month = $date_check.val().substring(5, 7),
select_date = $date_check.val().substring(8);
if (select_month.charAt(0) == ‘0‘)
select_month = select_month.substring(1);
if (select_date.charAt(0) == ‘0‘)
select_date = select_date.substring(1);
updateDateTds($date_list, $y.val(), $m.val(), select_year, select_month, select_date);
}
})
});
$(".today").each(function(i, obj) {
$(this).on("click", function() {
var $date_check = i == 0 ? $date_check0 : $date_check1,
$date_list = i == 0 ? $date_list0 : $date_list1;
$date_list.css("display", "none");
var select_str = $date_check.val();
if (today_str != select_str) {
if (‘‘ != select_str) {
var select_year = select_str.substring(0, 4),
select_month = select_str.substring(5, 7),
select_date = select_str.substring(8);
if (select_month.charAt(0) == ‘0‘)
select_month = select_month.substring(1);
if (select_date.charAt(0) == ‘0‘)
select_date = select_date.substring(1);
if (select_year == today_year && select_month == today_month) {
$date_list.find("td").each(function() {
if ($(this).html() == select_date) {
clearTDcss_($(this));
return false;
}
});
}
}
$date_check.val(today_str);
check();
}
})
});
//点击清空则把日期清空
$(".cls").each(function(i, obj) {
$(this).on("click", function() {
var $date_check = i == 0 ? $date_check0 : $date_check1,
$date_list = i == 0 ? $date_list0 : $date_list1;
$date_list.css("display", "none");
var select_str = $date_check.val();
if (‘‘ != select_str) {
var select_year = select_str.substring(0, 4),
select_month = select_str.substring(5, 7),
select_date = select_str.substring(8);
if (select_month.charAt(0) == ‘0‘)
select_month = select_month.substring(1);
if (select_date.charAt(0) == ‘0‘)
select_date = select_date.substring(1);
if (select_year == today_year && select_month == today_month) {
$date_list.find("td").each(function() {
if ($(this).html() == select_date) {
clearTDcss_($(this));
return false;
}
});
}
$date_check.val(‘‘);
check();
}
})
});
$(".date td").on("click", function() {
if ($(this).html() == "")
return;
var d0 = $(this).parents(".date").is(‘.date0‘);
var $date_check = d0 ? $date_check0 : $date_check1,
$date_list = d0 ? $date_list0 : $date_list1,
$y = d0 ? $y0 : $y1,
$m = d0 ? $m0 : $m1;
$date_list.css("display", "none");
var str = $y.val() + "-" + zero($m.val()) + "-" + zero($(this).html());
var select_str = $date_check.val();
if (str != select_str) {
if (select_str == ‘‘) {
if (str != today_str)
setTDcss($(this), "current");
} else {
var select_year = select_str.substring(0, 4),
select_month = select_str.substring(5, 7),
select_date = select_str.substring(8);
if (select_month.charAt(0) == ‘0‘)
select_month = select_month.substring(1);
if (select_date.charAt(0) == ‘0‘)
select_date = select_date.substring(1);
var cur_year = str.substring(0, 4),
cur_month = str.substring(5, 7),
cur_date = str.substring(8);
if (cur_month.charAt(0) == ‘0‘)
cur_month = cur_month.substring(1);
if (cur_date.charAt(0) == ‘0‘)
cur_date = cur_date.substring(1);
if (select_year != cur_year || select_month != cur_month) { // 不同框，不用清除以前的选择TD样式
if (str != today_str)
setTDcss($(this), "current");
} else {
var k = 0;
$date_list.find("td").each(function() {
if ($(this).html() != ‘‘) {
if ($(this).html() == select_date) {
if (select_str != today_str)
clearTDcss_($(this));
if (++k == 2)
return false;
} else if ($(this).html() == cur_date) {
if (str != today_str) {
$(this).unbind("mouseenter").unbind("mouseleave");
setTDcss($(this), "current");
}
if (++k == 2)
return false;
}
}
});
}
}
$date_check.val(str);
check();
}
});
document.body.onselectstart = document.body.ondrag = function() {
return false;
}
})
double-date.css代码
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.date {
position: relative;
display: inline;
}
/* .date0 {
} */
.date-check{
width:150px;
height:20px;
/* line-height:30px; */
border: 1px solid #ccc;
/* padding: 0 5px; */
}
.dateTable {
border-collapse: collapse;
/* table-layout: fixed; */
}
.clearfix {
zoom: 1;
}
.clearfix:after {
content: ".";
display: block;
width: 0;
height: 0;
visibility: hidden;
clear: both;
}
.fl {
float: left;
}
.fr {
float: right;
}
.date-list {
display: none;
position: absolute;
top: 16px !important;
*top: 11px;
_top: 23px;
left: 0;
padding-top: 6px;
background: #FED;
border-radius: 5px;
-webkit-border-radius: 5px;
overflow: hidden;
border: 1px solid;
border-color: #ccc #ccc transparent #ccc;
/* z-index: 999; */
}
.header {
margin-bottom: 4px;
padding: 0 5px;
}
.header .fl {
margin-right: 5px;
}
.header .fl, .header .fr {
cursor: pointer;
}
.header select {
vertical-align: top;
}
.header-left, .header-right {
border-radius: 50%;
width: 20px;
height: 20px;
text-align: center;
vertical-align: middle;
padding: 2px 0px 0px 2px;
border: 1px solid #ccc;
}
.today, .cls {
padding: 2px 5px;
border: 1px solid #ccc;
border-radius: 5px;
background: #ccc;
color: #fff;
font-size: 12px;
width: 36px;
}
.date-list, .date-list table {
width: 260px;
}
.date-list thead {
background: #00cdec;
}
.date-list th {
padding: 2px;
color: #fff;
border: 1px solid #ccc;
font-size: 14px;
font-weight: normal;
}
.date-list td {
border: 1px solid #ccc;
padding: 2px 0;
text-align: center;
font-size: 12px;
}
.date-list td.now {
background: #00cdec;
color: #fff;
}
.date-list td.current {
background: #66ff00;
color: #fff;
}
.date-error .date-check {
border: 1px solid red;
}
jsp代码
<script type="text/javascript" src="http://www.mamicode.com/ <link rel="StyleSheet" href="http://www.mamicode.com/ .imgButtonDefault { $(function() { <span> 邮寄起始日期：</span> 时间选择器jquerry特效
border: 1px solid #EBF2EB;
}
.imgButtonDown {
border-top: 1px solid #CACAFF;
border-left: 1px solid #CACAFF;
border-right: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
cursor: hand;
}
.imgButtonOver {
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #CACAFF;
border-bottom: 1px solid #CACAFF;
cursor: hand;
}
$(".imgButtonDefault").each(function(i, obj) {
$(this).bind(
{
mouseover : function() {
this.className = "imgButtonOver";
},
mouseout : function() {
this.className = "imgButtonDefault";
},
mousedown : function() {
this.className = "imgButtonDown";
},
mouseup : function() {
this.className = "imgButtonOver";
},
click : function() {
query(i);
}
});
});
<div class="date date0" maxDateSpan=7>
<input id="from1" type="text"
value="http://www.mamicode.com/
class="date-check" />
</div>
<span> 邮寄截止日期：</span>
<div class="date">
<input id="to1" type="text"
value="http://www.mamicode.com/
class="date-check" />
</div>