自定义HTML时间控件
控件中已实现的功能
1、根据给定的年和月布局时间控件
2、往时间控件中添加小圆点标识(单个添加和批量添加--单个传当月日期，多个传日期数组)
3、对控件中前、后月份日期的点击事件（灰色日期），当前月份日期点击事件
4、日期控件css样式部分自由修改
源代码下载链接：下载时间控件源码文件
效果截图：
调用代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/**=====时间控件默认样式===start===*/
.datePicker caption{text-align:center;background:#CCC;}
.datePicker caption label{display:inline-block;width:60%;line-height:2.2;}
.datePicker caption .left,.datePicker caption .right{display:inline-block;width:12px;height:14px;background:#FF0000;background:url("images/layout_arrows.png");}
.datePicker caption .left{background-position:0 0;}
.datePicker caption .right{background-position:0px 16px;}
.datePicker tr:first-child{line-height:40px;}
.datePicker tr td{width:2.0em;height:2.0em;text-align:center;}
.datePicker tr td label{width:30px;line-height:30px;font-size:14px;}
.datePicker tr td .today{border-radius:50%;background:#5452CF;}
.datePicker tr td.beforeMonth, .datePicker tr td.afterMonth{color:#CCC;}
.group{text-align:center;}
.group label{display:block;}
.group i{display:inline-block;}
.group i{width:8px;height:8px;border-radius:50%;}
.dot{background:#FF0000;}
/**=====时间控件默认样式===end===*/
button{margin-top:15px;}
</style>
<script src="js/jquery.min.js"></script>
<script src="js/dotDatePicker.js"></script>
<script>
$(function(){
//初始化时间控件当前月份2018-4
$(".date").datePicker(2018,4,{
currentMonthClick:function(e){
//当前月日期点击事件
alert($(this).data("year")+"-"+$(this).data("month")+"-"+$(this).data("day"));
}/**,
beforeMonthClick:function(e){
//前一个月日期点击事件,不传此参数点击时默认将日历调整到前一个月
},
afterMonthClick:function(e){
//后一个月日期点击事件,不传此参数点击时默认将日历调整到后一个月
}**/
});
});
//添加一个标识日期
function change(){
$(".date").dotCurrentDay($("#selectday").val());
}
//添加多个标识日期
function addDots(){
var days = [1,5,18,27];
$(".date").dotCurrentDays(days);
}
//获取当前时间控件得年月
function getMonth(){
var currentDate = $(".date").getCurrentDate();
alert(currentDate.year+"年"+currentDate.month+"月");
}
</script>
</head>
<body>
标识日：<input type="text" id="selectday"><button οnclick="change()">添加一个标识</button><br/>
<button οnclick="addDots()">添加多个标识</button><br/>
<button οnclick="getMonth()">获取当前年月</button><br/>
<div class="date"></div>
</body>
</html>
