kendo-ui - DateTimePicker 的选择范围无法正常工作

Question

kendo DatePicker 中是否有默认方法来确保“To”日期始终大于或等于“From”日期。 here is the code I've tried :

我的范围选择代码:

function startChange() {
    var startDate = startdatetimepicker.value(),
            endDate = enddatetimepicker.value();

    if (startDate) {
        startDate = new Date(startDate);
        startDate.setDate(startDate.getDate());
        enddatetimepicker.min(startDate);
    } else if (endDate) {
        startdatetimepicker.max(new Date(endDate));
    } else {
        endDate = new Date();
        startdatetimepicker.max(endDate);
        enddatetimepicker.min(endDate);
    }
}

function endChange() {
    var endDate = enddatetimepicker.value(),
            startDate = startdatetimepicker.value();

    if (endDate) {
        endDate = new Date(endDate);
        endDate.setDate(endDate.getDate());
        startdatetimepicker.max(endDate);
    } else if (startDate) {
        enddatetimepicker.min(new Date(startDate));
    } else {
        endDate = new Date();
        startdatetimepicker.max(endDate);
        enddatetimepicker.min(endDate);
    }
}

我收到此错误-->“对象 3 的属性“值”不是函数”

Answer 1

您的startdatepicker是一个HTML输入对象，除了属性之外没有value方法。所以你应该使用:startdatetimepicker.value。

尽管如此，我还是建议使用 Kendo UI 日期时间选择器进行更改:

function startChange() {
    var startDate = k_startdatetimepicker.value(),
            endDate = k_enddatetimepicker.value();

    if (startDate) {
        startDate = new Date(startDate);
        startDate.setDate(startDate.getDate());
        k_enddatetimepicker.min(startDate);
    }
    else if (endDate) {
        k_startdatetimepicker.max(new Date(endDate));
    }
    else {
        endDate = new Date();
        k_startdatetimepicker.max(endDate);
        k_enddatetimepicker.min(endDate);
    }
}

function endChange() {
    var endDate = k_enddatetimepicker.value(),
            startDate = k_startdatetimepicker.value();
    console.log(endDate, startDate);

    if (endDate) {
        endDate = new Date(endDate);
        endDate.setDate(endDate.getDate());
        k_startdatetimepicker.max(endDate);
    }
    else if (startDate) {
        k_enddatetimepicker.min(new Date(startDate));
    }
    else {
        endDate = new Date();
        k_startdatetimepicker.max(endDate);
        k_enddatetimepicker.min(endDate);
    }
}

其中k_startdatetimepicker和k_enddatetimepicker是:

var k_startdatetimepicker = $("#startdatetimepicker").kendoDateTimePicker({
    change: startChange,
    showSecond: true,
    dateFormat: "dd-mm-yy",
    timeFormat: "HH:mm:ss",
    format: "dd-MM-yy HH:mm:ss"
}).data("kendoDateTimePicker");


var k_enddatetimepicker = $("#enddatetimepicker").kendoDateTimePicker({
    change: endChange,
    showSecond: true,
    dateFormat: "dd-mm-yy",
    timeFormat: "HH:mm:ss",
    format: "dd-MM-yy HH:mm:ss"
}).data("kendoDateTimePicker");

运行 JSfiddle here