DateTimePicker: Time drop down with 24 hour format

[madmike210]

I am using MVC 2011.2.712.  I have a datetime object that I want displayed in 24 hour format.  The code for this input is below:

            <div id="starttime" class="editor-field SelectionInputField">
                @{Html.Telerik().DateTimePickerFor(c => c.SelectedStartTime)
                    .Interval(1)
                    .Format("yyyy-MM-dd HH:mm")
                    .Value(Model.SelectedStartTime)
                    .Render();
                }
            </div>

The above works great, except that when selecting the time icon the drop down list that is shown underneath the datetime input is in 12 format with AM and PM.  If you select a time from this list, the time is inputted in 24 hour format.  I want the time in the drop down list to display the correct 24 time format.  If I use the a timepicker vice the datetimepicker, the 24 hour format is display correctly in the drop list:
            <div id="starttime" class="editor-field SelectionInputField">
                @{Html.Telerik().TimePickerFor(c => c.SelectedStartTime)
                    .Interval(1)
                    .Format("HH:mm")
                    .Value(Model.SelectedStartTime)
                    .Render();
                }
            </div>

Any thoughts?

[Dimo]

Hello Mike,

You can set the format on the client (e.g. in the OnLoad event) and then rebind the TimeView:

var picker = $("#PickerID").data("tDateTimePicker");
picker.timeView.format = "HH:mm";
picker.timeView.bind();

Kind regards,
Dimo
the Telerik team

[madmike210]

Thank you so much!  Got it working now.  My code now looks like this:

            <div id="starttime" class="editor-field SelectionInputField">
                @{Html.Telerik().DateTimePickerFor(c => c.SelectedStartTime)
                    .Interval(1)
                    .Format("yyyy-MM-dd HH:mm")
                    .Value(Model.SelectedStartTime)
                    .ClientEvents(events=>events.OnLoad("OnStartTimeLoad"))
                    .Render();
                }
            </div>
            <script type="text/javascript">
                function OnStartTimeLoad() {
                    var picker = $("#SelectedStartTime").data("tDateTimePicker");
                    picker.timeView.format = "HH:mm";
                    picker.timeView.bind();
                }
            </script>

[Dimo]

Actually, it is not required to hard-code the ID in an event handler triggered by the component. The script can be changed to:

var picker = $(this).data("tDateTimePicker");

Kind regards,
Dimo
the Telerik team

[Peter]

hi,

This works but the bind overwrites the selected value and the set min and max values

Without firing  the script the drop down has the appointment's time selected and the times are in the range of Min and Max.
Firing the script results in a full 24 hour time range.
The interval property does survive the script.

<% =Html.Telerik().DateTimePicker().Name("Begin")
                  .ClientEvents(e => e.OnLoad("Set24uur"))
                  .Min(Model.BeginTijd.AddHours(-2))
                  .Max(Model.BeginTijd.AddHours(2))
                  .Interval(5)
                  .OpenOnFocus(true).Value(Model.BeginTijd)%>

The problem remains using DateTimePickerFor

What am I missing ?

Peter

[Dimo]

Hi Peter,

The problem is caused by the fact that one more format needs to be changed, and then the value reassigned. Please use

function Set24uur() {
    var picker = $(this).data("tDateTimePicker");
    var v = picker.value();
    picker.timeFormat = picker.timeView.format = "HH:mm";
    picker.timeView.bind();
    picker.value(v);
}

Kind regards,
Dimo
the Telerik team

[Peter]

hi,

no success.
My markup:

                            <% =Html.Telerik().DateTimePickerFor(m => m.BeginTijd).Name("Begin")
                                    .Min(Model.BeginTijd.AddHours(-2))
                                    .Max(Model.BeginTijd.AddHours(2))
                                    .ClientEvents(ce => ce.OnLoad("Set24uur"))
                                    .Interval(5)
                                    .OpenOnFocus(true)%>

The script

    function Set24uur() {
        var picker = $(this).data("tDateTimePicker");
        var v = picker.value();
        picker.timeView.format = "HH:mm";
        picker.timeView.bind();
        picker.value(v);
    }

The selected value is still gone and, worse the min and max settings are still lost. This results in an enormous list, 5 minutes steps from 0:00 to 23:55.

Without the client script only the format is not right.

Why can't I set the Timeformat on the picker ? Or why isn't the time format according to the date format ? It looks good, until you open the drop-down. Imho a bug...

regards

Peter

[Dimo]

Hello Peter,

As far as I can see, you are not using the same script that I sent in my previous reply.

I can't reproduce a problem with lost min/max settings with the latest version of our MVC components. You can send a standalone runnable demo for me to inspect locally.

Greetings,
Dimo
the Telerik team

[Peter]

hello,

Indeed I was using an older, Q2, version. In Q3 the issue remains. Also with your script.

But there is a bigger issue, it is the way I am using the DateTimePicker. Setting Min and Max in a time range limits the Min and Max of the picker as a whole to just one date. Which works well, in the pop-up calendar all dates except the initial one are disabled.
What do I want  :

• pick a date 
• pick a time within a certain time range on that date.

This requires a separate date- and time-picker. The good thing is that the time picker respects our local (24 hours) time format.

Issue solved :)

thanks

Peter