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");//idselect.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取消绑定，不然在切换日月年后再点击会触发多次changeDatevar 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"]};

View Code

转载于:https://www.cnblogs.com/pengfei25/p/7171196.html

bootstrap的datetimepicker使用（1.将默认的英文设置为中文2.选择日月年的时候记录之前的操作）...相关推荐

【Xcode】发布到app store的应用语言默认显示英文修改成中文
Localized resources can be mixed 设置YES 在检查下project-info下Localizations配置项
日历插件：Bootstrap的datetimepicker插件
注意:可以选择性引入 bootstrap.min.css和bootstrap.min.js,引入样式更好控制 option选项 0-hour 1-day 2-month 3-year 4-all ye ...
Bootstrap中datetimepicker日期控件1899年问题解决
@加粗样式TOC Bootstrap中datetimepicker日期控件1899年问题解决 Bootstrap中datetimepicker日期控件1899年问题解决最近在开发项目的过程中,遇到一 ...
bootstrap中datetimepicker显示1899问题
有些情况下bootstrap中datetimepicker会显示1899问题以下是修改源码解决方法bootstrap-datetimepicker.js中 update: function () { ...
Kendo Web UI Grid数据绑定，删除，编辑，并把默认英文改成中文
Kendo Web UI 是个不错的Jquery框.可惜老外写的,很多都是默认的英文,当然我们也可以设置成中文,接下来,我们就看看Grid是如何实现的数据绑定(Kendo Grid数据绑定实现有很多方 ...
android 默认光标大小设置,如何默认光标位置设置的EditText
权我已经实现了一个EditText,我想文本开始从它是正确的,我通过一套如何默认光标位置设置的EditText gravity = right 实现,但默认光标仍然显示出来我的文字的左边. 这是我到 ...
SAP Spartacus的pagination$ -默认的分页设置10
很多时候我们会希望 Subject 对象能够保存当前的状态,当新增订阅者的时候,自动把当前最新的值发送给订阅者.要实现这个功能,我们就需要使用 BehaviorSubject. BehaviorSub ...
springboot默认数据源如何设置连接数_Spring Boot系列之配置数据库连接池
在实际的应用开发中,与数据库交互通常使用数据库连接池来重用Connection对象,减少资源消耗. Spring Boot 的数据源是自动配置的.在 Spring Boot 2.2.1 版本中,有几种 ...
PP视频如何将默认缓存清晰度设置成超清
PP视频如何将默认缓存清晰度设置成超清呢?很多人都不会,下面小编来详细的讲解一下. PP视频如何将默认缓存清晰度设置成超清 1.先打开手机,点击桌面上的PP视频. PP视频如何将默认缓存清晰度设置成超 ...

bootstrap的datetimepicker使用（1.将默认的英文设置为中文2.选择日月年的时候记录之前的操作）...

bootstrap的datetimepicker使用（1.将默认的英文设置为中文2.选择日月年的时候记录之前的操作）...相关推荐

最新文章

热门文章