如何重新初始化 bootstrap datetimepicker？

Question

我的页面上有两个日期时间选择器。将日期命名为 'SartDate' 和 'EndDate'。Select StartDate 日期，此日期设置为 'EndDate' 的最小日期。第一次工作 Correctly.But 'StartDate' 重置，'EndDate' 的 minDate 不是重新初始化

var date = null;
    $("#jobPublishDate").bind("keyup blur change mouseup", function () {
    $('#jobPublishDate').datetimepicker({ format: 'DD/MM/YYYY H:mm', showTodayButton: true, showClear: true, showClose: true });
        var from = $("#jobPublishDate").val().split("/");
        var newdate = from[1] + "/" + (from[0]) + "/" +from[2];
        var f = new Date(newdate);
        date = f;
    });

    $("#jobCloseDate").focusin(function () {
    $('#jobCloseDate').datetimepicker({ format: 'DD/MM/YYYY H:mm', showTodayButton: true, showClear: true, showClose: true, minDate: date });
           });
       });

<label>StartDate></label>
<input ng-model="job.StrPublishDate" id="jobPublishDate">
<br/>
<label>EndDate></label>
<input ng-model="job.StrCloseDate" id="jobCloseDate">

Answer 1

您需要挂钩 dp.change 事件（在选择日期时触发）并使用 minDate 方法在第二个选择器上设置最短日期。

var date = null;

$("#jobPublishDate").bind("keyup blur change mouseup", function () {
    $('#jobPublishDate').datetimepicker({ format: 'DD/MM/YYYY H:mm', showTodayButton: true, showClear: true, showClose: true })
    var from = $("#jobPublishDate").val().split("/");
    var newdate = from[1] + "/" + (from[0]) + "/" +from[2];
    var f = new Date(newdate);
    date = f;
});

// Adds the date change event to the first picker
$("#jobPublishDate").on('db.change', function (e) {
    // Get the DateTimePicker instance
    var dp = $('#jobCloseDate').data('DateTimePicker');
    // If the second picker has been initialized
    if(typeof dp !== 'undefined') {
        // Set the minimum date on the second picker
        dp.minDate(e.date);
    } else {
        // If the close date picker is not initialized, stores the date for later use
        date = e.date;
    }
});

$("#jobCloseDate").focusin(function () {
    $('#jobCloseDate').datetimepicker({ format: 'DD/MM/YYYY H:mm', showTodayButton: true, showClear: true, showClose: true, minDate: date });
});

您可以找到有关 DateTimePicker 方法的更多信息here。

Answer 2

var date = null;
$("#jobPublishDate").bind("keyup blur change mouseup", function () {
var from = $("#jobPublishDate").val().split("/");
var newdate = from[1] + "/" + (from[0]) + "/" + from[2];
var f = new Date(newdate);
date = f;
$("#jobPublishDate").on('dp.change', function (e) {
var dp = $('#jobCloseDate').data('DateTimePicker');
if (typeof dp !== 'undefined') {
dp.minDate(e.date);
} 
else {
date = e.date;
}
});

$("#jobCloseDate").focusin(function () {
$('#jobCloseDate').datetimepicker({ format: 'DD/MM/YYYY H:mm', showTodayButton: true, showClear: true, showClose: true, minDate: date });
});

阅读此代码并解决问题。

如何重新初始化 bootstrap datetimepicker？

How to re-initialize the bootstrap datetimepicker?

javascript

jquery

datetimepicker

twitter-bootstrap-3