bootstrap的datepicker使用（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"]
    };