DateTimePicker width expanding to 100% when programmatically setting the Time

[Nathan J Pledger]

I have an ASP.NET Kendo/MVC DateTimePicker:

@(Html.Kendo()
                .DateTimePickerFor(m => m.ResponseRequiredBy)
                .Events(e =>
                {
                    e.Change("ResponseRequiredBy_OnChange");
                }))

We have a requirement that when a user selects a day, we set a default time within the day if not already selected. I use this code to achieve this:

function ResponseRequiredBy_OnChange() {
    if (this.value().getHours() == 0 &&
        this.value().getMinutes() == 0) {
        var newDate = new Date(this.value().getFullYear(), this.value().getMonth(), this.value().getDate(), 16, 0, 0, 0);
        $("#ResponseRequiredBy").kendoDateTimePicker({
            value: newDate,
            format: "dd/MM/yyyy h:mm tt"
        });

        // overcomes bug whereby Kendo expands field to full width
        $("#ResponseRequiredBy").attr("style", "");
        $(".k-widget.k-datetimepicker.k-header.k-input").attr("style", "");
    }
}

BUT when I set the new value, the width of the picker expands to 100% for some reason (see attachments).

I have to add the commented code to fix the issue.

Why would this be happening?

Thanks

Nathan
​

[Kiril Nikolov]

Hello Nathan,

The problem is caused by the fact that you are initializing the widget more than once, in your change event calling the kendoDateTimePicker() method will initialize a DateTimePicker over the existing DateTimePicker, which can cause some unexpected behavior. If you want to change the value of the widget, you can use its value method, available via the this keyword:

function ResponseRequiredBy_OnChange() {
   this.value(your-new-value)
}

Regards,
Kiril Nikolov
Telerik