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

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

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




	time picker
	



时间选择器

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";
				else if(counter-owd";
				else 								//用下月开始日期补足最后一周和剩余行
					tStr+=""+(nmd++)+"";
			}
			tStr+=""
		}
		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+=''+toDoubleBit(i)+'';
		// 分 & 秒 选项列表
		for(var i=0;i<60;i++){
			mStr+=''+toDoubleBit(i)+'';
			sStr+=''+toDoubleBit(i)+'';
		}

		return ''+
					// ''+
					''+
					'T :'+
					''+
						''+
					''+
					''+
						''+
					''+
					''+
						''+
					''+
				''
	};

	// js创建节点
	var appendNode=function(){
		var year=bindNode.val().split("-")[0];
		var month=bindNode.val().split("-")[1];

		parent.append(
			'
'+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ getDateNodeStr(year,month)+ ''+ ''+ getTimeNodeStr()+ ''+ '
'+ ''+ ''+(year+'-'+month)+''+ ''+ '
'+ '
' ); }; // 初始化日历样式 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"; else if(counter-owd"; else //用下月开始日期补足最后一周和剩余行 tStr+=""+(nmd++)+""; } tStr+="" } return tStr; }; // js创建节点 var appendNode=function(){ var year=bindNode.val().split("-")[0]; var month=bindNode.val().split("-")[1]; parent.append( '
'+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ getDateNodeStr(year,month)+ ''+ '
'+ ''+ ''+(year+'-'+month)+''+ ''+ '
'+ '
' ); }; 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( '
'+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ '
'+ ''+ ''+year+''+ ''+ '
010203040506070809101112
'+ '
' ); }; 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")); };

 

运行结果如下:

日期时间选择:

datepicker小插件(日期时间 & 日期 & 月份)_第1张图片

日期选择:

datepicker小插件(日期时间 & 日期 & 月份)_第2张图片

月份选择:

datepicker小插件(日期时间 & 日期 & 月份)_第3张图片

控制台显示一下:

datepicker小插件(日期时间 & 日期 & 月份)_第4张图片

转载于:https://my.oschina.net/lonelydawn/blog/827019

你可能感兴趣的:(datepicker小插件(日期时间 & 日期 & 月份))