Select Range Of DateTimePicker not working properly

问题

Is there any default way in kendo DatePicker for ensuring that To date is always greater than or equal to From date. here is the code I've tried:

My Range selection code:

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);
    }
}

I am getting this error--> "property 'value' od object 3 is not a function"

回答1:

Your startdatepicker is an HTML input object and there is no value method but property. So you should use: startdatetimepicker.value.

Nevertheless I recommend changing using the Kendo UI Date Time Picker as:

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);
    }
}

where k_startdatetimepicker and k_enddatetimepicker are:

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");

Running JSfiddle here

来源：https://stackoverflow.com/questions/15779596/select-range-of-datetimepicker-not-working-properly