bootstrap的datetimepicker使用（1.将默认的英文设置为中文2.选择日月年的时候记录之前的操作）
参考网页 bootstrap datepicker 属性设置 以及方法和事件
1.如何将bootstrap的datepicker默认的英文设置为中文
第一步，新建一个js文件（bootstrap-datetimepicker.zh-CN.js）内容为如下
$.fn.datetimepicker.dates['zh'] = { days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"], daysShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"], daysMin: ["日", "一", "二", "三", "四", "五", "六", "日"], months: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"], monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], today: "今天", suffix: [], meridiem: ["上午", "下午"] };
第二步：将将建立好的js文件加载；注意一定要加载到datepicker.js的后面，不然会报错，报dates对象找不到
第三步：设置参数：
html:
<div class="row">
<form action="" class="form-inline">
<div class="form-group">
<label for="startDate">时间</label>
<input type="text" class="form-control" id="startDate" name="startDate">
</div>
<div class="form-group">
<label for="startDate">至</label>
<input type="text" class="form-control" id="endDate" name="endDate">
</div>
</form>
</div>
js:
$(document).ready(function(){ tabToggle(); renderStationTree(); //初始化开始和结束时间 initTimeFormate('startDate','month'); initTimeFormate('endDate','month'); }); function initTimeFormate(id,timeFlag){ var strFormat = ''; $('#' + id).datetimepicker('remove'); strFormat = (timeFlag === 'month' && 'yyyy-mm-dd') || (timeFlag === 'year' && 'yyyy-mm') || (timeFlag === 'decade' && 'yyyy')|| (timeFlag === 'day' && 'yyyy-mm-dd hh')|| (timeFlag === 'hour' && 'yyyy-mm-dd hh:ii'); $('#' + id).datetimepicker({ autoclose: 1, language:'zh',//注意此处要与函数名对应 format:strFormat, todayHighlight: 1, startView: 2, minView: timeFlag }).on("click",function(){ $('#' + id).datetimepicker('show');//这里要加，不然第一次点击输入框之后，鼠标移开，第二次点击输入框不会出现，造成不好的体验 }).on('changeDate',function(ev){ var val=$('#' + id).val(); var oper=id=='startDate'?'setStartDate':'setEndDate'; var ele=id=='startDate'?$("#endDate"):$("#startDate"); ele.datetimepicker(oper,val);//设置起始和结束时间，开始的就设置结束时间，结束的就设置开始时间，从而限制用户的输入 $('#' + id).datetimepicker('hide'); }); }
注意：在使用内嵌的日期时间，获取时间的方法
$("#"+id).datetimepicker({
}).on('changeDate',function(ev){
var _date=ev.date;//此处可以获取对象
pickTime=today(_date);
})
//需要的时间格式
function today(todayDate){
if(!todayDate){
var today=new Date();
}
var todayY=todayDate.getFullYear();
var todayM=todayDate.getMonth()+1;
var todayD=todayDate.getDate();
var hour=todayDate.getHours();
var minutes=todayDate.getMinutes();
return todayY+"-"add0(todayM)+"-"+add0(todayD)+""add0(hour)+"-"+add0(minutes);
}
//补零
fucntion add0(o){
if(o<10&&String(o).length==1){
return "0"+o;
}else{
return o;
}
}
科华原始的角色管理用的(如下图)
//1.日期限定只能选择在当天日期之后， //2.第一个日期必须在第二个之前，相反第二个必须在第一个之后 function initTimeFormate(id){ var strFormat = ''; $('#' + id).datetimepicker('remove'); strFormat="month"&&"yyyy-mm-dd"; $('#' + id).datetimepicker({ autoclose: 1, language:'zh',//注意此处要与函数名对应 format:strFormat, startDate:new Date(); todayHighlight: 1, startView: 2, minView: "month" }).on("click",function(){ $('#' + id).datetimepicker('show');//这里要加，不然第一次点击输入框之后，鼠标移开，第二次点击输入框不会出现，造成不好的体验 }); }
张凡的版本，新的项目用的
function initTimeFormate(format1,format2,view,end){ format1=!!format1?format1:"yyyy-MM"; format2=!!format1?format1:"yyyy-MM"; view=!!view?view:3//设置显示的是年月日时等 var selector=$("#systemtime");//id select.datetimepicker('remove'); strFormat="month"&&"yyyy-mm-dd"; selector.datetimepicker({ language:'zh',//注意此处要与函数名对应 format:format1, autoclose: true, startView: view, minView: "month" }).on("click",function(){ selector.datetimepicker('show');//这里要加，不然第一次点击输入框之后，鼠标移开，第二次点击输入框不会出现，造成不好的体验 }).on("changeDate",function(){ }); selector.val(new Date().Format(format2)); }
自己写的版本（两个时间操作，开始和结束时间）年月日的版本
1、可以根据选择的时间限制开始和结束时间
2、开始时间默认小于结束时间10天
/** * 初始化时间插件 */ function initTimeFormate(format1, format2, view, end) { format1 = !!format1 ? format1 : "yyyy-mm-dd"; format2 = !!format2 ? format2 : "yyyy-MM-dd"; view = !!view ? view : 2; var selector = end ? $("#systemtime_end") : $("#systemtime"); selector.datetimepicker('remove'); selector.datetimepicker({ language:"zh", format: format1, autoclose: true, startView: view, minView: end ? 2 : view }).on("click", function () { selector.datetimepicker('show'); }).off("changeDate").on("changeDate",function(ev){//这里一定要加上off取消绑定，不然在切换日月年后再点击会触发多次changeDate var id=$(ev.target).attr("id"); var time=ev.date.Format("yyyy-MM-dd") if(id=="systemtime"){ $("#systemtime_end").datetimepicker("setStartDate",time) }else{ $("#systemtime").datetimepicker("setEndDate",time) } }); if(end){ var _date= new Date().Format(format2); //往前面减十天组成的数组 var sevenDate=getSubSeven(_date,10); selector.val(new Date().Format(format2)); $("#systemtime").val(sevenDate[sevenDate.length-1]); } }
自己写的版本demo3用，单个时间操作
1、可以记录点击日月年用户的时间操作
思路：定义一个全局的变量timeObj
timeObj{ day:'', month:'', year:'' }
点击的时候，判断当前是年月日，将值保存到变量中
初始化的时候，默认是当前电脑时间的年月日
赋值的时候就从timeObj中取
附上代码：
/** * @desc 初始化时间插件(单个时间) * @param {*} format1 插件用的时间类型 * @param {*} format2 时间序列化用的 * @param {*} view 插件属性 * @param {*} end 是否有结束时间 * @param {*} type 当前是否为日月年 */ function initTimeFormate(format1, format2, view, end,type) { format1 = !!format1 ? format1 : "yyyy-mm-dd"; format2 = !!format2 ? format2 : "yyyy-MM-dd"; view = !!view ? view : 2; var selector = end ? $("#systemtime_end") : $("#systemtime"); selector.datetimepicker('remove'); selector.datetimepicker({ language:"zh", format: format1, autoclose: true, startView: view, minView: end ? 2 : view }).on("click", function () { selector.datetimepicker('show'); }).off("changeDate").on("changeDate",{param:format2},function(ev){ //获取当前激活的日期类型 日/月/年 var id=$(ev.target).attr("id"); var t=$(".switch-change>.cur").index(),m=""; m=t==0?"day":t==1?"month":"year"; console.log(m); var p=ev.data.param; timeObj[m]=ev.date.Format(p); swithData(); console.log(timeObj); }); //如果是第一次初始化时间的时候，就保存年月日 if(type===undefined){ timeObj.day=new Date().Format("yyyy-MM-dd"); timeObj.month=new Date().Format("yyyy-MM"); timeObj.year=new Date().Format("yyyy"); type="day" } selector.val(timeObj[type]); }
年月日 时的版本 2019-06-19
1、可以精确到小时
2、可以根据选择的时间限制开始和结束时间
function initTimeFormate1(format1, format2, view, end) { format1 = !!format1 ? format1 : "yyyy-mm-dd"; format2 = !!format2 ? format2 : "yyyy-MM-dd"; view = !!view ? view : 2; var selector = end ? $("#stime_end") : $("#stime"); selector.datetimepicker('remove'); selector.datetimepicker({ language:"zh", format: format1, autoclose: true, startView: view, endDate:new Date(), minView: 1 }).on("click", function () { selector.datetimepicker('show'); }).off("changeDate").on("changeDate",function(ev){ var id=$(ev.target).attr("id"); var time=ev.date.Format(format2) if(id=="stime"){ $("#stime_end").datetimepicker("setStartDate",time) }else{ $("#stime").datetimepicker("setEndDate",time) } }); if(end){ selector.val(new Date().Format(format2)); }else{ var curDate = new Date(); var preDate = new Date(curDate.getTime() - 24*60*60*1000); //前一天 selector.val(preDate.Format(format2)) } }
调用
initTimeFormate1("yyyy-mm-dd hh","yyyy-MM-dd hh",);//加的开始时间
initTimeFormate1("yyyy-mm-dd hh","yyyy-MM-dd hh",'',"end");//加的结束时间
图例
附件 bootstrap-datetimepicker.zh-CN.js
/** * 1、requery的引法 */ // ;define(['jquery','bootstrap_datetimepicker'],function($){ // $.fn.datetimepicker.dates['zh'] = { // days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"], // daysShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"], // daysMin: ["日", "一", "二", "三", "四", "五", "六", "日"], // months: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"], // monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], // today: "今天", // suffix: [], // meridiem: ["上午", "下午"] // }; // }); /*;(function($){ }(jQuery));*/ /** *2、正常情况的引法 */ $.fn.datetimepicker.dates['zh'] = { days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"], daysShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"], daysMin: ["日", "一", "二", "三", "四", "五", "六", "日"], months: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"], monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], today: "今天", suffix: [], meridiem: ["上午", "下午"] }; //可以不用 $.fn.datetimepicker.dates['en'] = { days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"], daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"], months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], today: "Today", suffix: [], meridiem: ["am", "pm"] };
