2019独角兽企业重金招聘Python工程师标准>>>
一个简单的日期时间选择小插件,引用 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 "
for(var j=0;j<7;j++){
if(counter"+(lmd-owd+(++counter))+"";
else if(counter-owd"+((++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+='';
// 分 & 秒 选项列表
for(var i=0;i<60;i++){
mStr+='';
sStr+='';
}
return ''+
// ' '+
' '+
'T : '+
''+
''+
' '+
''+
''+
' '+
''+
''+
' '+
' '
};
// js创建节点
var appendNode=function(){
var year=bindNode.val().split("-")[0];
var month=bindNode.val().split("-")[1];
parent.append(
''+
''+
''+
''+
''+
''+
' '+
''+(year+'-'+month)+' '+
''+
''+
' '+
' '+
''+
'日 一 二 三 '+
'四 五 六 '+
' '+
''+
''+
getDateNodeStr(year,month)+
''+
''+
getTimeNodeStr()+
''+
'
'+
''
);
};
// 初始化日历样式
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 "
for(var j=0;j<7;j++){
if(counter"+(lmd-owd+(++counter))+"";
else if(counter-owd"+((++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(
''+
''+
''+
''+
''+
''+
' '+
''+(year+'-'+month)+' '+
''+
''+
' '+
' '+
''+
'日 一 二 三 '+
'四 五 六 '+
' '+
''+
''+
getDateNodeStr(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+' '+
''+
''+
' '+
' '+
''+
''+
' '+
''+
'01 02 '+
'03 04 '+
'05 06 '+
'07 08 '+
'09 10 '+
'11 12 '+
' '+
''+
'
'+
''
);
};
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"));
};
运行结果如下:
日期时间选择:
日期选择:
月份选择:
控制台显示一下: