参考网页 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"]
};