一個簡單的日期時間選擇小插件，引用 jquery.js & bootstrap.css (需要圖標文件)
如果路過的 朋友只是爲了 找一個 可以直接引入 項目的時間控件，那麼我推薦
Date Range Picker
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"));
};
運行結果如下:
日期時間選擇:
日期選擇:
月份選擇:
控制檯顯示一下:
