由于项目中使用My97DatePicker作为日期控件,额外不用其它日期组件。但是项目需要用到双选日期,一方面放两个空间有限,另一方面看起也不太美观,所以就简单的自己封装一个。
一、准备工作
My97DatePicker下载:http://www.my97.net/down.asp
Jquery下载:https://jquery.com/download/
日期图标:
二、编码
1、引入所需的依赖
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/My97DatePicker/WdatePicker.js"></script>
2、css样式
<style>
.llgkdatepicker{ width:170px; height: 14px; line-height: 14px; font-size: 14px; padding: 23px 20px 23px 18px; float: left; color: #2E80F1; background-image: url("themes/default/images/date.png"); background-repeat: no-repeat; background-position: 0px 23px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer;}
.datechoose{position:absolute;width:660px;height:246px;margin-top:50px;z-index:10;box-shadow:0px 0px 6px #cfcfcf}
.datechoose .maindiv{float:left;width:450px;height:100%;background-color:#fff}
.filterdiv{float:left;width:210px;height:246px;background-color:#EBF0F4}
.maindiv .timespan{padding:13px 10px;height:14px}
.datachoosetsp{width:86px;height:14px;line-height:14px;font-size:12px;color:#737373;float:left;text-align:center;cursor:pointer}
.datachoosetsp.on{color:#1180F3}
.datediv{float:left;width:210px;height:196px;padding-left: 12px}
.chosendate{width:210px;height:36px;line-height:36px;font-size:12px;text-align:center;color:#656668;margin-top: 40px;font-size: 14px}
.chosendate.on{color:#1180F3;background-color:#fff}
.filterbtnarea{padding:136px 50px 10px;height:24px}
.btn3.dateconfirm{color:#fff;background-color:#F54434;border:1px solid #F54434;width:48px;float:left}
.btn3.datecancle{color:#F54434;background-color:#fff; border:1px solid #ffffff;width:48px;float:left; margin-left: 10px}
.datediv iframe{width:210px;height:196px}
.btn3{width:54px;height:22px;border:1px solid #51C0ED;color:#51C0ED;cursor:pointer;text-align:center;border-radius:3px;;line-height:22px;font-size:14px}
</style>
3、HTML代码
<div class="llgkdatepicker" onclick="showDate()"></div>
<div class="datechoose">
<div class="maindiv">
<div class="timespan">
<div id="data7" class="datachoosetsp on" value="7">近7天</div>
<div id="data30" class="datachoosetsp" value="30">近30天</div>
<div id="data60" class="datachoosetsp" value="60">近60天</div>
<div id="data1" class="datachoosetsp" value="1">今年</div>
<div id="data2" class="datachoosetsp" value="2">去年</div>
</div>
<div id="date1" class="datediv"></div>
<div id="date2" class="datediv"></div>
</div>
<div class="filterdiv">
<div class="chosendate on">
<span id="startDate"></span>-<span id="endDate"></span>
</div>
<div class="filterbtnarea">
<div class="floatR">
<div class="btn3 dateconfirm" onclick="dateconfirm()">确定</div>
<div class="btn3 datecancle m10" onclick="datecancle()">取消</div>
</div>
</div>
</div>
</div>
4、JS代码
<script>
$(function () {
// 初始化
wdatePicker(getDate(6), getDate(0));
// 头部时间段选择选择
$(".datachoosetsp").click(function(){
var startDate, endDate;
$(".datachoosetsp").removeClass("on");
$(this).addClass("on");
if($(this).attr("value") == 7){
startDate = getDate(6);
endDate = getDate(0);
} else if($(this).attr("value") == 30){
startDate = getDate(30);
endDate = getDate(0);
} else if($(this).attr("value") == 60){
startDate = getDate(60);
endDate = getDate(0);
} else if($(this).attr("value") == 1){
startDate = (new Date().getFullYear()) + "-01-01";
endDate = getDate(0);
} else if($(this).attr("value") == 2){
startDate = (new Date().getFullYear()-1) + "-01-01";
endDate = (new Date().getFullYear()-1) + "-12-31";
}
wdatePicker(startDate, endDate);
$(".datechoose").show();
});
});
function showDate(){
$(".datechoose").toggle();
}
function wdatePicker(start,end){
$(".datechoose").hide();
WdatePicker({startDate:start,alwaysUseStartDate:true,isShowWeek:true,maxDate:'%y-%M-%d',eCont:'date1',
onpicked:function(dp){
$("#startDate").text(dp.cal.getDateStr());
$(".datachoosetsp").removeClass("on");
}
});
WdatePicker({startDate:end,alwaysUseStartDate:true,isShowWeek:true,maxDate:'%y-%M-%d',eCont:'date2',
onpicked:function(dp){
$("#endDate").text(dp.cal.getDateStr());
$(".datachoosetsp").removeClass("on");
}
});
// 初始化日期
if($(".llgkdatepicker").text() == ""){
$(".llgkdatepicker").html(start + "-" + end);
}
$("#startDate").text(start);
$("#endDate").text(end);
}
// 确认按钮
function dateconfirm(){
var startDate = $("#startDate").text();
var endDate = $("#endDate").text();
if(startDate>endDate){
alert("结束日期不能小于开始日期!");
return false;
} else{
$(".llgkdatepicker").html(startDate+"-"+endDate);
$(".datechoose").hide();
}
}
// 取消按钮
function datecancle(){
$(".datechoose").hide();
}
// 日期格式化
function getDate(count) {
var date = new Date();
date.setDate(date.getDate()-count);
var year = date.getFullYear();
var month = (date.getMonth()+1) < 10 ? "0"+(date.getMonth()+1) : (date.getMonth()+1);
var day = date.getDate() < 10 ? "0"+date.getDate() : date.getDate();
var dateStr = year + "-" + month + "-" + day;
return dateStr;
}
</script>
三、完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/My97DatePicker/WdatePicker.js"></script>
<style>
.llgkdatepicker{ width:170px; height: 14px; line-height: 14px; font-size: 14px; padding: 23px 20px 23px 18px; float: left; color: #2E80F1; background-image: url("themes/default/images/date.png"); background-repeat: no-repeat; background-position: 0px 23px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer;}
.datechoose{position:absolute;width:660px;height:246px;margin-top:50px;z-index:10;box-shadow:0px 0px 6px #cfcfcf}
.datechoose .maindiv{float:left;width:450px;height:100%;background-color:#fff}
.filterdiv{float:left;width:210px;height:246px;background-color:#EBF0F4}
.maindiv .timespan{padding:13px 10px;height:14px}
.datachoosetsp{width:86px;height:14px;line-height:14px;font-size:12px;color:#737373;float:left;text-align:center;cursor:pointer}
.datachoosetsp.on{color:#1180F3}
.datediv{float:left;width:210px;height:196px;padding-left: 12px}
.chosendate{width:210px;height:36px;line-height:36px;font-size:12px;text-align:center;color:#656668;margin-top: 40px;font-size: 14px}
.chosendate.on{color:#1180F3;background-color:#fff}
.filterbtnarea{padding:136px 50px 10px;height:24px}
.btn3.dateconfirm{color:#fff;background-color:#F54434;border:1px solid #F54434;width:48px;float:left}
.btn3.datecancle{color:#F54434;background-color:#fff; border:1px solid #ffffff;width:48px;float:left; margin-left: 10px}
.datediv iframe{width:210px;height:196px}
.btn3{width:54px;height:22px;border:1px solid #51C0ED;color:#51C0ED;cursor:pointer;text-align:center;border-radius:3px;;line-height:22px;font-size:14px}
</style>
</head>
<body>
<div style="padding-left: 500px">
<div class="llgkdatepicker" onclick="showDate()"></div>
<div class="datechoose">
<div class="maindiv">
<div class="timespan">
<div id="data7" class="datachoosetsp on" value="7">近7天</div>
<div id="data30" class="datachoosetsp" value="30">近30天</div>
<div id="data60" class="datachoosetsp" value="60">近60天</div>
<div id="data1" class="datachoosetsp" value="1">今年</div>
<div id="data2" class="datachoosetsp" value="2">去年</div>
</div>
<div id="date1" class="datediv"></div>
<div id="date2" class="datediv"></div>
</div>
<div class="filterdiv">
<div class="chosendate on">
<span id="startDate"></span>-<span id="endDate"></span>
</div>
<div class="filterbtnarea">
<div class="floatR">
<div class="btn3 dateconfirm" onclick="dateconfirm()">确定</div>
<div class="btn3 datecancle m10" onclick="datecancle()">取消</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
$(function () {
// 初始化
wdatePicker(getDate(6), getDate(0));
// 头部时间段选择选择
$(".datachoosetsp").click(function(){
var startDate, endDate;
$(".datachoosetsp").removeClass("on");
$(this).addClass("on");
if($(this).attr("value") == 7){
startDate = getDate(6);
endDate = getDate(0);
} else if($(this).attr("value") == 30){
startDate = getDate(30);
endDate = getDate(0);
} else if($(this).attr("value") == 60){
startDate = getDate(60);
endDate = getDate(0);
} else if($(this).attr("value") == 1){
startDate = (new Date().getFullYear()) + "-01-01";
endDate = getDate(0);
} else if($(this).attr("value") == 2){
startDate = (new Date().getFullYear()-1) + "-01-01";
endDate = (new Date().getFullYear()-1) + "-12-31";
}
wdatePicker(startDate, endDate);
$(".datechoose").show();
});
});
function showDate(){
$(".datechoose").toggle();
}
function wdatePicker(start,end){
$(".datechoose").hide();
WdatePicker({startDate:start,alwaysUseStartDate:true,isShowWeek:true,maxDate:'%y-%M-%d',eCont:'date1',
onpicked:function(dp){
$("#startDate").text(dp.cal.getDateStr());
$(".datachoosetsp").removeClass("on");
}
});
WdatePicker({startDate:end,alwaysUseStartDate:true,isShowWeek:true,maxDate:'%y-%M-%d',eCont:'date2',
onpicked:function(dp){
$("#endDate").text(dp.cal.getDateStr());
$(".datachoosetsp").removeClass("on");
}
});
// 初始化日期
if($(".llgkdatepicker").text() == ""){
$(".llgkdatepicker").html(start + "-" + end);
}
$("#startDate").text(start);
$("#endDate").text(end);
}
// 确认按钮
function dateconfirm(){
var startDate = $("#startDate").text();
var endDate = $("#endDate").text();
if(startDate>endDate){
alert("结束日期不能小于开始日期!");
return false;
} else{
$(".llgkdatepicker").html(startDate+"-"+endDate);
$(".datechoose").hide();
}
}
// 取消按钮
function datecancle(){
$(".datechoose").hide();
}
// 日期格式化
function getDate(count) {
var date = new Date();
date.setDate(date.getDate()-count);
var year = date.getFullYear();
var month = (date.getMonth()+1) < 10 ? "0"+(date.getMonth()+1) : (date.getMonth()+1);
var day = date.getDate() < 10 ? "0"+date.getDate() : date.getDate();
var dateStr = year + "-" + month + "-" + day;
return dateStr;
}
</script>
</html>
效果图如下:
欢迎关注