Kendo DateTimePicker选择时间与显示时间不符问题求助

问题描述 #

使用Kendo DateTimePicker时，选择19:51:30 pm，实际返回的却是07:51:30 am，无法获取正确的所选时间，相关代码如下：

var startDatePicker = $("#datetimepicker1").kendoDateTimePicker({
            value: new Date(),
            format: "MM/dd/yyyy hh:mm:ss tt",
            dateInput: true,
            timeFormat: "hh:mm:ss tt",
            componentType: "modern",
            max: new Date(),
            timezone: "Etc/GMT+5"
        }).data("kendoDateTimePicker");

var endDatePicker = $("#datetimepicker2").kendoDateTimePicker({
            value: new Date(),
            format: "MM/dd/yyyy hh:mm:ss tt",
            dateInput: true,
            timeFormat: "hh:mm:ss tt",
            componentType: "modern",
            max: new Date(),
            timezone: "Etc/GMT+5",
            min: startDatePicker.value(),
            month: {
                // Customize the cell template for the datepicker
                content: function (e) {
                    var currentDate = e.date.getDate();
                    var startDate = startDatePicker.value().getDate();
                    var endDate = endDatePicker.value().getDate();
                    var isDisabled = currentDate < startDate || currentDate > endDate;
                    
                    if (isDisabled) {
                        e.html = "<span class='k-disabled'>" + currentDate + "</span>";
                    }
                }
            }
        }).data("kendoDateTimePicker");

startDatePicker.bind("change", function() {
    endDatePicker.min(startDatePicker.value());
});

问题原因及解决方案 #

1. 时区设置错误 #

Etc/GMT+5的时区标识是反向定义的，实际对应UTC-05:00（西五区），如果你需要的是东五区（如巴基斯坦UTC+05:00、印度UTC+05:30），应该使用具体的时区标识，比如：

• 巴基斯坦时区："Asia/Karachi"
• 印度时区："Asia/Kolkata"

错误的时区设置会导致时间被错误转换，出现12小时制的上午/下午颠倒问题。

2. 日期比较逻辑缺陷 #

在endDatePicker的month.content回调中，仅通过getDate()获取日期的“日”部分进行比较，这会导致跨月时的判断错误（比如1月31日和2月1日，getDate()返回31和1，会误判为31>1而禁用2月1日）。应该直接比较完整的Date对象：

content: function (e) {
    var startDate = startDatePicker.value();
    var endDate = endDatePicker.value();
    // 比较完整日期，而非仅日期的日部分
    var isDisabled = e.date < startDate || e.date > endDate;
    
    if (isDisabled) {
        e.html = "<span class='k-disabled'>" + e.date.getDate() + "</span>";
    }
}

3. 取值时的时区转换 #

当设置了timezone属性后，Kendo DateTimePicker内部存储的是UTC时间，若要获取用户选择的对应时区的本地时间，需要使用kendo.timezone.convert方法转换：

// 获取选择器的时区设置
var timezone = startDatePicker.options.timezone;
// 获取UTC时间
var utcDate = startDatePicker.value();
// 转换为指定时区的本地时间
var localDate = kendo.timezone.convert(utcDate, "UTC", timezone);

4. 临时排查：关闭dateInput #

dateInput: true可能会引入额外的时间解析逻辑，可先临时关闭该属性，验证是否是解析逻辑导致的时间错误：

dateInput: false

修改后的示例代码 #

var startDatePicker = $("#datetimepicker1").kendoDateTimePicker({
    value: new Date(),
    format: "MM/dd/yyyy hh:mm:ss tt",
    dateInput: true,
    timeFormat: "hh:mm:ss tt",
    componentType: "modern",
    max: new Date(),
    // 使用正确的东五区时区标识
    timezone: "Asia/Karachi"
}).data("kendoDateTimePicker");

var endDatePicker = $("#datetimepicker2").kendoDateTimePicker({
    value: new Date(),
    format: "MM/dd/yyyy hh:mm:ss tt",
    dateInput: true,
    timeFormat: "hh:mm:ss tt",
    componentType: "modern",
    max: new Date(),
    timezone: "Asia/Karachi",
    min: startDatePicker.value(),
    month: {
        content: function (e) {
            var startDate = startDatePicker.value();
            var endDate = endDatePicker.value();
            var isDisabled = e.date < startDate || e.date > endDate;
            
            if (isDisabled) {
                e.html = "<span class='k-disabled'>" + e.date.getDate() + "</span>";
            }
        }
    }
}).data("kendoDateTimePicker");

startDatePicker.bind("change", function() {
    endDatePicker.min(startDatePicker.value());
});

// 正确获取指定时区的本地时间示例
function getSelectedLocalTime(picker) {
    var timezone = picker.options.timezone;
    var utcDate = picker.value();
    return kendo.timezone.convert(utcDate, "UTC", timezone);
}

内容的提问来源于stack exchange，提问作者Rudratej Jadhav