DateTimePicker width expanding to 100% when programmatically setting the Time

2 posts, 0 answers
  1. Nathan J Pledger
    Nathan J Pledger avatar
    95 posts
    Member since:
    Apr 2006

    Posted 06 Jan 2015 Link to this post

    I have an ASP.NET Kendo/MVC DateTimePicker:

                    .DateTimePickerFor(m => m.ResponseRequiredBy)
                    .Events(e =>

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


  2. Kiril Nikolov
    Kiril Nikolov avatar
    2543 posts

    Posted 08 Jan 2015 Link to this post

    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() {

    Kiril Nikolov
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top