I am getting wrong time in Kendo dateandtime picker

Question

When I am setting a time I am getting wrong date eg. If I am selecting time as 19:51:30 pm then I am getting 07:51:30 am. But I want the same time which I pick but not getting.

I try all the thing related to Kendo time picker but not getting correct time which I pick.

This is my code:

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

Answer 1

You've set the timezone to "Etc/GMT+5", which means that the time you select will be adjusted to GMT+5. If you want the DateTimePicker to use the local timezone of the user's browser, you can remove the timezone option from your configuration:

 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()
}).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(),
    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());
});