一个简单的日期时间选择小插件,引用 jquery.js & bootstrap.css (需要图标文件)
如果路过的 朋友只是为了 找一个 可以直接引入 项目的时间控件,那么我推荐
A JavaScript component for choosing date ranges. Designed to work with the Bootstrap CSS framework.
官方网址 : http://www.daterangepicker.com/
在这里你可以下载并学习如何使用它。
下面是我自己的程序:
datepicker.html
<!DOCTYPE html>
<html>
<head>
<title>time picker</title>
<link rel="stylesheet" type="text/css" href="./bootstrap/css/bootstrap.min.css">
</head>
<body>
<div class="col-md-5">
<div class="panel panel-info">
<div class="panel-heading">
<span class="glyphicon glyphicon-time"></span> 时间选择器
</div>
<div class="panel-body">
<!-- picker最好作为父节点的唯一节点 否则样式会变丑-->
<input id="picker" class="form-control" name="monthpicker" readonly/>
</div>
<div class="panel-footer">
<button class="btn btn-info" onclick="tp.create();">
YYYY-MM-DD HH:mm:ss
</button>
<button class="btn btn-info" onclick="dp.create();">
YYYY-MM-DD
</button>
<button class="btn btn-info" onclick="mp.create();">
YYYY-MM
</button>
</div>
</div>
</div>
<button class="btn btn-success" onclick="getDate();">
Get Date
</button>
<script type="text/javascript" src="./javascripts/jquery.min.js"></script>
<script type="text/javascript" src="./javascripts/datepicker.js"></script>
</body>
</html>
datepicker.js
(这个文件代码行确实有点多,不过只用看完createTimePicker这个类就可以了,我也只在这个类内作了详细 注释)
/**
* code by lonely.dawn 170111
* 选择时间的控件
*/
// 根据日期获取当月天数
var getNumOfDays=function(date){
var daysForMonth=[31,28,31,30,31,30,31,31,30,31,30,31];
// 判断是否是闰年
var isLeapYear=function(year){
return (year%4==0 && year%100!=0) || year%400==0;
};
// 二月特殊处理,其他按数组返回
return date.getMonth()==1?(isLeapYear(date.getYear()+1900)?29:28):daysForMonth[date.getMonth()];
};
// 创建日期时间选择器 YYYY/MM/DD HH:mm:ss
var createTimePicker=function(nodeId){
var bindNode=$(document.getElementById(nodeId || 'picker'));
var parent = bindNode.parent();
var date = new Date();
var created=false; //标识面板是否已经创建
// 个位数字前面补0
var toDoubleBit=function(num){
return num>=0 && num<10 ? ("0"+num) : num ;
};
// 改变鼠标滑动样式 改变color
var hoverIn=function(event){
var ev=event || window.event;
ev.target.style.color="#111";
};
var hoverOut=function(event){
var ev=event || window.event;
ev.target.style.color="#999";
};
var hoverOut2=function(event){
var ev=event || window.event;
ev.target.style.color="#666";
};
// 初始化初始显示日期
var init = function(){
bindNode.val((date.getYear()+1900)+"-"+toDoubleBit(date.getMonth()+1)+"-"+
toDoubleBit(date.getDate())+" "+toDoubleBit(date.getHours())+
":"+toDoubleBit(date.getMinutes())+":"+toDoubleBit(date.getSeconds()));
};
// 创建日期节点字符串
var getDateNodeStr=function(year,month){
//获取日期
var date=new Date(year+"-"+month+"-1");
//获取当月天数
var days=getNumOfDays(date);
//获取星期,指定 1号; 0-6 周一开始
// var owd =date.getDay()==0?6:date.getDay()-1;
//获取星期,指定 1号; 0-6 周日开始
var owd =date.getDay();
//获取上月年份
var lmy =date.getMonth()==0?(date.getYear()+1900-1):(date.getYear()+1900);
//获取上月月份
var lmm =date.getMonth()==0?12:(date.getMonth());
//获取上月天数
var lmd =getNumOfDays(new Date(lmy+"-"+lmm+"-1"));
var tStr="";
var counter=0;
var nmd = 1;
//行数根据实际情况变化
// var rows=Math.ceil(days/7);
// if(owd+days>35 || (days == 28 && owd>0))
// rows++;
//固定行数
var rows=6;
for(var i=0;i<rows;i++){
tStr+="<tr><td></td>"
for(var j=0;j<7;j++){
if(counter<owd) //用上月末日期补足第一周
tStr+="<td class='prev-month day'>"+(lmd-owd+(++counter))+"</td>";
else if(counter-owd<days) //本月日期
tStr+="<td class='this-month day'>"+((++counter)-owd)+"</td>";
else //用下月开始日期补足最后一周和剩余行
tStr+="<td class='next-month day'>"+(nmd++)+"</td>";
}
tStr+="</tr>"
}
return tStr;
};
// 创建时间节点字符串
var getTimeNodeStr=function(){
var parts=bindNode.val().split(/[\s:]/g);
var hIndex=Number(parts[1]);
var mIndex=Number(parts[2]);
var sIndex=Number(parts[3]);
var hStr="";
var mStr="";
var sStr="";
// 时 选项列表
for(var i=0;i<24;i++)
hStr+='<option'+(i==hIndex?' selected':'')+'>'+toDoubleBit(i)+'</option>';
// 分 & 秒 选项列表
for(var i=0;i<60;i++){
mStr+='<option'+(i==mIndex?' selected':'')+'>'+toDoubleBit(i)+'</option>';
sStr+='<option'+(i==sIndex?' selected':'')+'>'+toDoubleBit(i)+'</option>';
}
return '<tr>'+
// '<td></td>'+
'<td></td>'+
'<td>T :</td>'+
'<td colspan="2">'+
'<select class="form-control scale hour">'+
hStr+
'</select>'+
'</td>'+
'<td colspan="2">'+
'<select class="form-control scale min">'+
mStr+
'</select>'+
'</td>'+
'<td colspan="2">'+
'<select class="form-control scale sec">'+
sStr+
'</select>'+
'</td>'+
'</tr>'
};
// js创建节点
var appendNode=function(){
var year=bindNode.val().split("-")[0];
var month=bindNode.val().split("-")[1];
parent.append(
'<div class="date-picker" style="border:1px solid #ddd;position:absolute;background:#fff">'+
'<table class="table-condensed">'+
'<thead>'+
'<tr>'+
'<th class="prev available">'+
'<i class="fa fa-arrow-left icon-arrow-left glyphicon glyphicon-arrow-left"></i>'+
'</th>'+
'<th colspan="10" class="ym" style="text-align:center;">'+(year+'-'+month)+'</th>'+
'<th class="next available">'+
'<i class="fa fa-arrow-right icon-arrow-right glyphicon glyphicon-arrow-right"></i>'+
'</th>'+
'</tr>'+
'<tr>'+
'<th></th><th>日</th><th>一</th><th>二</th><th>三</th>'+
'<th>四</th><th>五</th><th>六</th>'+
'</tr>'+
'</thead>'+
'<tbody class="calendar">'+
getDateNodeStr(year,month)+
'</tbody>'+
'<tfoot>'+
getTimeNodeStr()+
'</tfoot>'+
'</table>'+
'</div>'
);
};
// 初始化日历样式
var initCalendarStyle=function(){
parent.find(".date-picker .day").css("cursor","pointer");
parent.find(".date-picker .day").css("color","#999");
parent.find(".date-picker .this-month").css("color","#666");
parent.find("td").css("text-align","center");
parent.find("th").css("text-align","center");
};
// 初始化所有节点样式
var initNodeStyle=function(){
parent.find(".date-picker .prev").css("cursor","pointer");
parent.find(".date-picker .next").css("cursor","pointer");
parent.find(".date-picker .prev").css("color","#999");
parent.find(".date-picker .next").css("color","#999");
parent.find(".date-picker .scale").css("width","52px");
parent.find(".date-picker .scale").css("height","26px");
parent.find(".date-picker .scale").css("padding","5px 5px");
initCalendarStyle();
};
// 添加日历鼠标滑动样式 日历单独写是因为月份改变,日历表发生改变需要重新创建
var addCalendarHoverStyle=function(){
parent.find(".date-picker .this-month").hover(hoverIn,hoverOut2);
parent.find(".date-picker .prev-month").hover(hoverIn,hoverOut);
parent.find(".date-picker .next-month").hover(hoverIn,hoverOut);
};
// 添加所有鼠标滑动样式
var addHoverStyle= function(){
addCalendarHoverStyle();
parent.find(".date-picker .prev").hover(hoverIn,hoverOut);
parent.find(".date-picker .next").hover(hoverIn,hoverOut);
};
// 日历点击事件: 将点击的日期值赋给输入框
var addCalendarClick=function(){
// 点击当前月份中的日期节点
parent.find(".date-picker .this-month").click(function(event){
var ev=event || window.event;
var hour=parent.find(".date-picker .hour").val();
var min=parent.find(".date-picker .min").val();
var sec=parent.find(".date-picker .sec").val();
bindNode.val(parent.find(".date-picker .ym").html()+"-"+
toDoubleBit(Number(ev.target.innerHTML))+" "+hour+":"+min+":"+sec);
});
// 点击上一月份中的日期节点
parent.find(".date-picker .prev-month").click(function(event){
var ev=event || window.event;
var ym=parent.find(".date-picker .ym").html();
var year=Number(ym.split('-')[0]);
var month=Number(ym.split('-')[1]);
var hour=parent.find(".date-picker .hour").val();
var min=parent.find(".date-picker .min").val();
var sec=parent.find(".date-picker .sec").val();
year=month==1?year-1:year;
month=month==1?12:month-1;
bindNode.val(year+"-"+toDoubleBit(month)+"-"+
toDoubleBit(Number(ev.target.innerHTML))+" "+hour+":"+min+":"+sec);
});
// 点击下一月份中的日期节点
parent.find(".date-picker .next-month").click(function(event){
var ev=event || window.event;
var ym=parent.find(".date-picker .ym").html();
var year=Number(ym.split('-')[0]);
var month=Number(ym.split('-')[1]);
var hour=parent.find(".date-picker .hour").val();
var min=parent.find(".date-picker .min").val();
var sec=parent.find(".date-picker .sec").val();
year=month==12?year+1:year;
month=month==12?1:month+1;
bindNode.val(year+"-"+toDoubleBit(month)+"-"+
toDoubleBit(Number(ev.target.innerHTML))+" "+hour+":"+min+":"+sec);
});
};
// 添加 日期时间选取时间
var addPickEvent=function(){
addCalendarClick();
// 点击上月按钮
parent.find(".date-picker .prev").click(function(){
var ym=parent.find(".date-picker .ym").html();
var year=Number(ym.split('-')[0]);
var month=Number(ym.split('-')[1]);
var day=bindNode.val().split(/[-\s:]/g)[2];
var hour=parent.find(".date-picker .hour").val();
var min=parent.find(".date-picker .min").val();
var sec=parent.find(".date-picker .sec").val();
year=(month==1)?year-1:year; //判断是否跨年
month=(month==1)?12:month-1;
parent.find(".date-picker .ym").html(year+"-"+toDoubleBit(month));
bindNode.val(parent.find(".date-picker .ym").html()+"-"+day+" "+hour+":"+min+":"+sec);
// 切换日历表 (月月不同)
parent.find(".calendar").children().remove();
parent.find(".calendar").append(getDateNodeStr(year,month));
initCalendarStyle();
addCalendarHoverStyle();
addCalendarClick();
});
// 点击下月按钮
parent.find(".date-picker .next").click(function(){
var ym=parent.find(".date-picker .ym").html();
var year=Number(ym.split('-')[0]);
var month=Number(ym.split('-')[1]);
var day=bindNode.val().split(/[-\s:]/g)[2];
var hour=parent.find(".date-picker .hour").val();
var min=parent.find(".date-picker .min").val();
var sec=parent.find(".date-picker .sec").val();
year=(month==12)?year+1:year;
month=(month==12)?1:month+1;
parent.find(".date-picker .ym").html(year+"-"+toDoubleBit(month));
bindNode.val(parent.find(".date-picker .ym").html()+"-"+day+" "+hour+":"+min+":"+sec);
parent.find(".calendar").empty();
parent.find(".calendar").append(getDateNodeStr(year,month));
initCalendarStyle();
addCalendarHoverStyle();
addCalendarClick();
});
parent.find(".date-picker .hour").change(function(){
var parts=bindNode.val().split(/[\s:]/g);
var hour=parent.find(".date-picker .hour").val();
bindNode.val(parts[0]+" "+hour+":"+parts[2]+":"+parts[3]);
});
parent.find(".date-picker .min").change(function(){
var parts=bindNode.val().split(/[\s:]/g);
var min=parent.find(".date-picker .min").val();
bindNode.val(parts[0]+" "+parts[1]+":"+min+":"+parts[3]);
});
parent.find(".date-picker .sec").change(function(){
var parts=bindNode.val().split(/[\s:]/g);
var sec=parent.find(".date-picker .sec").val();
bindNode.val(parts[0]+" "+parts[1]+":"+parts[2]+":"+sec);
});
};
/**
* 添加入口事件
* ①创建面板节点
* ②初始化面板样式
* ③添加鼠标滑动事件
* ④添加日期时间选取时间
* ⑤标识面板已创建
*/
var addEnter=function(){
bindNode.unbind("click");
bindNode.bind("click",function(){
if(!created){
appendNode();
initNodeStyle();
addHoverStyle();
addPickEvent();
created=true;
}
});
};
/**
* 添加出口事件
* ①移除面板
* ②标识面板未创建
*/
var addExit=function(){
parent.mouseleave(function(){
parent.find(".date-picker").remove();
created=false;
});
};
// public api
var create=function(){
init();
addEnter();
addExit();
};
/**
* 获取日期时间字符串
* 可选参数fmt 可选格式: YYYY/MM || MM/YYYY 如需其他格式,自行添加
* 默认返回 YYYY/MM/DD HH:mm:ss 格式
*/
var getDate=function(fmt){
var fmt = fmt || '';
var date=bindNode.val();
var parts=date.split(/[-\s:]/g);
var year=parts[0];
var month=parts[1];
var day=parts[2];
var hour=parts[3];
var min=parts[4];
var sec=parts[5];
// var template= fmt.replace(/\s+/g,'').toUpperCase();
var template=fmt;
if(template == "YYYY/MM/DD HH:mm:ss" || template == "HH:mm:ss DD/MM/YYYY"
|| template == "HH:mm:ss YYYY/MM/DD")
return template.replace("YYYY",year).replace("MM",month).replace("DD",day)
.replace("HH",hour).replace("mm",min).replace("ss",sec);
return date;
};
// 构造即初始化
init();
return {
create:create,
getDate:getDate
};
};
// 创建日期选择器 YYYY/MM/DD
var createDatePicker=function(nodeId){
var bindNode=$(document.getElementById(nodeId || 'picker'));
var parent = bindNode.parent();
var date = new Date();
var dateNode='';
var created=false;
// 各位数字前面补0
var toDoubleBit=function(num){
return num>0 && num<10 ? ("0"+num) : num ;
};
var hoverIn=function(event){
var ev=event || window.event;
ev.target.style.color="#111";
};
var hoverOut=function(event){
var ev=event || window.event;
ev.target.style.color="#999";
};
var hoverOut2=function(event){
var ev=event || window.event;
ev.target.style.color="#666";
};
var init = function(){
bindNode.val((date.getYear()+1900)+"-"+toDoubleBit(date.getMonth()+1)+"-"+
toDoubleBit(date.getDate()));
};
var getDateNodeStr=function(year,month){
//获取日期
var date=new Date(year+"-"+month+"-1");
//获取当月天数
var days=getNumOfDays(date);
//获取星期,指定 1号; 0-6 周一开始
// var owd =date.getDay()==0?6:date.getDay()-1;
//获取星期,指定 1号; 0-6 周日开始
var owd =date.getDay();
//获取上月年份
var lmy =date.getMonth()==0?(date.getYear()+1900-1):(date.getYear()+1900);
//获取上月月份
var lmm =date.getMonth()==0?12:(date.getMonth());
//获取上月天数
var lmd =getNumOfDays(new Date(lmy+"-"+lmm+"-1"));
var tStr="";
var counter=0;
var nmd = 1;
//行数根据实际情况变化
// var rows=Math.ceil(days/7);
// if(owd+days>35 || (days == 28 && owd>0))
// rows++;
//固定行数
var rows=6;
for(var i=0;i<rows;i++){
tStr+="<tr><td></td>"
for(var j=0;j<7;j++){
if(counter<owd) //用上月末日期补足第一周
tStr+="<td class='prev-month day'>"+(lmd-owd+(++counter))+"</td>";
else if(counter-owd<days) //本月日期
tStr+="<td class='this-month day'>"+((++counter)-owd)+"</td>";
else //用下月开始日期补足最后一周和剩余行
tStr+="<td class='next-month day'>"+(nmd++)+"</td>";
}
tStr+="</tr>"
}
return tStr;
};
// js创建节点
var appendNode=function(){
var year=bindNode.val().split("-")[0];
var month=bindNode.val().split("-")[1];
parent.append(
'<div class="date-picker" style="border:1px solid #ddd;position:absolute;background:#fff">'+
'<table class="table-condensed">'+
'<thead>'+
'<tr>'+
'<th class="prev available">'+
'<i class="fa fa-arrow-left icon-arrow-left glyphicon glyphicon-arrow-left"></i>'+
'</th>'+
'<th colspan="10" class="ym" style="text-align:center;">'+(year+'-'+month)+'</th>'+
'<th class="next available">'+
'<i class="fa fa-arrow-right icon-arrow-right glyphicon glyphicon-arrow-right"></i>'+
'</th>'+
'</tr>'+
'<tr>'+
'<th></th><th>日</th><th>一</th><th>二</th><th>三</th>'+
'<th>四</th><th>五</th><th>六</th>'+
'</tr>'+
'</thead>'+
'<tbody class="calendar">'+
getDateNodeStr(year,month)+
'</tbody>'+
'</table>'+
'</div>'
);
};
var initCalendarStyle=function(){
parent.find(".date-picker .day").css("cursor","pointer");
parent.find(".date-picker .day").css("color","#999");
parent.find(".date-picker .this-month").css("color","#666");
parent.find("td").css("text-align","center");
};
var initNodeStyle=function(){
parent.find(".date-picker .prev").css("cursor","pointer");
parent.find(".date-picker .next").css("cursor","pointer");
parent.find(".date-picker .prev").css("color","#999");
parent.find(".date-picker .next").css("color","#999");
initCalendarStyle();
};
var addCalendarHoverStyle=function(){
parent.find(".date-picker .this-month").hover(hoverIn,hoverOut2);
parent.find(".date-picker .prev-month").hover(hoverIn,hoverOut);
parent.find(".date-picker .next-month").hover(hoverIn,hoverOut);
};
var addHoverStyle= function(){
addCalendarHoverStyle();
parent.find(".date-picker .prev").hover(hoverIn,hoverOut);
parent.find(".date-picker .next").hover(hoverIn,hoverOut);
};
var addCalendarClick=function(){
parent.find(".date-picker .this-month").click(function(event){
var ev=event || window.event;
bindNode.val(parent.find(".date-picker .ym").html()+"-"+toDoubleBit(Number(ev.target.innerHTML)));
});
parent.find(".date-picker .prev-month").click(function(event){
var ev=event || window.event;
var ym=parent.find(".date-picker .ym").html();
var year=Number(ym.split('-')[0]);
var month=Number(ym.split('-')[1]);
year=month==1?year-1:year;
month=month==1?12:month-1;
bindNode.val(year+"-"+toDoubleBit(month)+"-"+toDoubleBit(Number(ev.target.innerHTML)));
});
parent.find(".date-picker .next-month").click(function(event){
var ev=event || window.event;
var ym=parent.find(".date-picker .ym").html();
var year=Number(ym.split('-')[0]);
var month=Number(ym.split('-')[1]);
year=month==12?year+1:year;
month=month==12?1:month+1;
bindNode.val(year+"-"+toDoubleBit(month)+"-"+toDoubleBit(Number(ev.target.innerHTML)));
});
};
var addPickEvent=function(){
addCalendarClick();
parent.find(".date-picker .prev").click(function(){
var ym=parent.find(".date-picker .ym").html();
var year=Number(ym.split('-')[0]);
var month=Number(ym.split('-')[1]);
var day=bindNode.val().split('-')[2];
year=(month==1)?year-1:year;
month=(month==1)?12:month-1;
parent.find(".date-picker .ym").html(year+"-"+toDoubleBit(month));
bindNode.val(parent.find(".date-picker .ym").html()+"-"+day);
parent.find(".calendar").empty();
parent.find(".calendar").append(getDateNodeStr(year,month));
initCalendarStyle();
addCalendarHoverStyle();
addCalendarClick();
});
parent.find(".date-picker .next").click(function(){
var ym=parent.find(".date-picker .ym").html();
var year=Number(ym.split('-')[0]);
var month=Number(ym.split('-')[1]);
var day=bindNode.val().split('-')[2];
year=(month==12)?year+1:year;
month=(month==12)?1:month+1;
parent.find(".date-picker .ym").html(year+"-"+toDoubleBit(month));
bindNode.val(parent.find(".date-picker .ym").html()+"-"+day);
parent.find(".calendar").empty();
parent.find(".calendar").append(getDateNodeStr(year,month));
initCalendarStyle();
addCalendarHoverStyle();
addCalendarClick();
});
};
var addEnter=function(){
bindNode.unbind("click");
bindNode.bind("click",function(){
if(!created){
appendNode();
initNodeStyle();
addHoverStyle();
addPickEvent();
created=true;
}
});
};
var addExit=function(){
parent.mouseleave(function(){
parent.find(".date-picker").remove();
created=false;
});
};
var create=function(){
init();
addEnter();
addExit();
};
var getDate=function(fmt){ // 可选参数fmt, 可选格式: YYYY/MM || MM/YYYY
var fmt = fmt || '';
var date=bindNode.val();
var parts=date.split(/[-\s:]/g);
var year=parts[0];
var month=parts[1];
var day=parts[2];
var template= fmt.replace(/\s+/g,'').toUpperCase();
if(template == "YYYY/MM/DD" || template == "DD/MM/YYYY")
return template.replace("YYYY",year).replace("MM",month).replace("DD",day);
return date;
};
// 构造即初始化
init();
return {
create:create,
getDate:getDate
};
};
// 创建月份选择器 YYYY/MM
var createMonthPicker=function(nodeId){
var bindNode=$(document.getElementById(nodeId || 'picker'));
var parent = bindNode.parent();
var date=new Date();
var created=false;
// 各位数字前面补0
var toDoubleBit=function(num){
return num>0 && num<10 ? ("0"+num) : num ;
};
var init = function(){
bindNode.val((date.getYear()+1900)+"-"+toDoubleBit(date.getMonth()+1));
};
// js创建节点
var appendNode=function(){
var year=bindNode.val().split("-")[0];
parent.append(
'<div class="month-picker" data-toggle="dropdown" style="border:1px solid #ddd;position:absolute;background:#fff">'+
'<table class="table-condensed">'+
'<thead>'+
'<tr>'+
'<th class="prev available">'+
'<i class="fa fa-arrow-left icon-arrow-left glyphicon glyphicon-arrow-left"></i>'+
'</th>'+
'<th colspan="10" class="year" style="text-align:center;">'+year+'</th>'+
'<th class="next available">'+
'<i class="fa fa-arrow-right icon-arrow-right glyphicon glyphicon-arrow-right"></i>'+
'</th>'+
'</tr>'+
'</thead>'+
'<tbody>'+
'<tr></tr>'+
'<tr>'+
'<td class="month">01</td><td class="month">02</td>'+
'<td class="month">03</td><td class="month">04</td>'+
'<td class="month">05</td><td class="month">06</td>'+
'<td class="month">07</td><td class="month">08</td>'+
'<td class="month">09</td><td class="month">10</td>'+
'<td class="month">11</td><td class="month">12</td>'+
'</tr>'+
'</tbody>'+
'</table>'+
'</div>'
);
};
var initNodeStyle=function(){
parent.find(".month-picker .month").css("cursor","pointer");
parent.find(".month-picker .prev").css("cursor","pointer");
parent.find(".month-picker .next").css("cursor","pointer");
parent.find(".month-picker .month").css("color","#999");
parent.find(".month-picker .prev").css("color","#999");
parent.find(".month-picker .next").css("color","#999");
};
var addHoverStyle= function(){
var hoverIn=function(event){
var ev=event || window.event;
ev.target.style.color="#111";
};
var hoverOut=function(event){
var ev=event || window.event;
ev.target.style.color="#999";
};
parent.find(".month-picker .month").hover(hoverIn,hoverOut);
parent.find(".month-picker .prev").hover(hoverIn,hoverOut);
parent.find(".month-picker .next").hover(hoverIn,hoverOut);
};
var addPickEvent=function(){
parent.find(".month-picker .month").click(function(event){
var ev=event || window.event;
bindNode.val(parent.find(".month-picker .year").html()+"-"+ev.target.innerHTML);
});
parent.find(".month-picker .prev").click(function(){
var month=bindNode.val().split('-')[1];
var year=bindNode.val().split('-')[0];
parent.find(".month-picker .year").html(Number(year)-1);
bindNode.val((Number(year)-1)+"-"+month);
});
parent.find(".month-picker .next").click(function(){
var month=bindNode.val().split('-')[1];
var year=bindNode.val().split('-')[0];
parent.find(".month-picker .year").html(Number(year)+1);
bindNode.val((Number(year)+1)+"-"+month);
});
};
var addEnter=function(){
bindNode.unbind("click");
bindNode.bind("click",function(){
if(!created){
appendNode();
initNodeStyle();
addHoverStyle();
addPickEvent();
created=true;
}
});
};
var addExit=function(){
parent.mouseleave(function(){
parent.find(".month-picker").remove();
created=false;
});
};
var create=function(){
init();
addEnter();
addExit();
};
var getDate=function(fmt){ // 可选参数fmt, 可选格式: YYYY/MM || MM/YYYY
var fmt = fmt || '';
var date=bindNode.val();
var parts=date.split(/[-\s:]/g);
var year=parts[0];
var month=parts[1];
var template= fmt.replace(/\s+/g,'').toUpperCase();
if(template == "YYYY/MM" || template == "MM/YYYY")
return template.replace("YYYY",year).replace("MM",month);
return date;
};
return {
create:create,
getDate:getDate
};
};
var tp=new createTimePicker();
var dp=new createDatePicker();
var mp=new createMonthPicker();
tp.create();
// dp.create();
// mp.create();
var getDate=function(){
console.log(tp.getDate("HH:mm:ss YYYY/MM/DD"));
console.log(dp.getDate("YYYY/MM/DD"));
console.log(mp.getDate("YYYY/MM"));
};
运行结果如下:
日期时间选择:
日期选择:
月份选择:
控制台显示一下: