datepicker小插件(日期时间 & 日期 & 月份)

lonelydawn

发布于 2018-02-09 12:06:48

8.1K0

发布于 2018-02-09 12:06:48

文章被收录于专栏：lonelydawn的前端猿区lonelydawn的前端猿区

一个简单的日期时间选择小插件，引用 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"));
};

运行结果如下:

日期时间选择: