DateRangePicker 中文化以及老版本的一些初始化问题，不能选择秒的问题

$('#headlineAddForm #rangeTime').daterangepicker({
        showDropdowns : true,
        timePicker : true, //是否显示小时和分钟
        timePicker24Hour: true,
        timePickerIncrement : 1, //时间的增量，单位为分钟
        timePickerSeconds : true,
        linkedCalendars : false,
        locale : {
            format: "YYYY-MM-DD HH:mm:ss",  //控件中from和to 显示的日期格式
            separator : " - ",
            applyLabel : "确定",
            cancelLabel : "取消",
            fromLabel : "开始",
            toLabel: "结束",
            customRangeLabel : "自定义",
            weekLabel : "W",
            daysOfWeek : ["日", "一", "二", "三", "四", "五", "六"],
            monthNames : ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月 "],
            firstDay : 1
        }
    }, function(start, end, label) {
        $("#headlineAddForm #startTime").val(start.unix());
        $("#headlineAddForm #endTime").val(end.unix());
    }).on('hide.daterangepicker', function() {
        $('#headlineAddForm').data('bootstrapValidator').updateStatus('rangeTime', 'NOT_VALIDATED',null).validateField('rangeTime');
    }).on('cancel.daterangepicker', function() {
        $('#headlineAddForm #rangeTime').val("");
        $('#headlineAddForm').data('bootstrapValidator').updateStatus('rangeTime', 'NOT_VALIDATED',null).validateField('rangeTime');
    }).on('apply.daterangepicker', function() {
        if($.trim($("#headlineAddForm #startTime").val()).length == 0) {
            $('#headlineAddForm #rangeTime').val("");
            $('#headlineAddForm').data('bootstrapValidator').updateStatus('rangeTime', 'NOT_VALIDATED',null).validateField('rangeTime');
        }
    });

 $('#headlineModifyForm #rangeTime').daterangepicker({
        showDropdowns : true,
        timePicker : true, //是否显示小时和分钟
        timePicker24Hour: true,
        timePickerIncrement : 1, //时间的增量，单位为分钟
        timePickerSeconds : true,
        linkedCalendars : false,
        locale : {
            format: "YYYY-MM-DD HH:mm:ss",  //控件中from和to 显示的日期格式
            separator : " - ",
            applyLabel : "确定",
            cancelLabel : "取消",
            fromLabel : "开始",
            toLabel: "结束",
            customRangeLabel : "自定义",
            weekLabel : "W",
            daysOfWeek : ["日", "一", "二", "三", "四", "五", "六"],
            monthNames : ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月 "],
            firstDay : 1
        }
    }, function(start, end, label) {
        $("#headlineModifyForm #startTime").val(start.unix());
        $("#headlineModifyForm #endTime").val(end.unix());
    }).on('hide.daterangepicker', function() {
        $('#headlineModifyForm').data('bootstrapValidator').updateStatus('rangeTime', 'NOT_VALIDATED',null).validateField('rangeTime');
    });

dataRangePicker使用最新版本国际化，不过在做更新操作的时候貌似不能把初始化放在编辑回显数据的时候，这里不知道为啥，在使用老版本的daterangepicker的时候可以把初始化放在回显数据的时候，使用新版本的时候会报bootstrapValidator的错误(这里我在回显的时候使用了如下代码

$('#headlineModifyDiv').on('show.bs.modal', function() {
       $('#headlineModifyForm').bootstrapValidator('resetForm', false);
});

然后这里就总是报bootstrapValidator的错误

)所以更新的时候把daterangepicker的初始化放出来了，也就是没在回显数据的时候初始化datarangepicker组件。

在编辑的时候需要把日期值重新赋予日期控件这里可以这样写

 $("#headlineModifyForm #rangeTime").data('daterangepicker').setStartDate(getLocalTime(row.startTime));
 $("#headlineModifyForm #rangeTime").data('daterangepicker').setEndDate(getLocalTime(row.endTime));

这样就能使用最新版本的选择秒的功能了，老版本的貌似不能选择秒。
另外很多项目在日期转化的时候都自己写一些函数，其实在使用daterangepicker的时候作者使用了moment.js，这个moment.js里面带有很多格式化日期的操作，完全不用自己再去闭门造轮子了

DateRangePicker 中文化以及老版本的一些初始化问题，不能选择秒的问题

猜你喜欢