Military time without colon and/or auto-highlight time on date chosen?

[Erik]

Hi - I have a question that could maybe be answered in a couple of different ways.  I have a user group that likes the date time picker but wants to easily enter the TIME component as military time without a colon. 

The user picks a date and then immediately wants to enter a 4-digit value for the time (e.g. 1342).  The code below works, but if they use the keyboard and the date picker (alt-down, arrows to choose date, then enter) they have to manually highlight the "hh:mm" value (time-consuming).  If this could be auto-selected when a date was selected via the picker, that would be ideal.

Also, I have not been able to ONLY have a format of HHmm set.  When I do this, the validation always throws errors.  I suspect this is because there *needs* to be some kind of separator between the hour and minute, but am not sure.  I have tried various combinations of getting that to work, and have gotten all the way to a "save" button click and into the controller code (ASP.NET MVC 5), but the date field is always null. 

I think if I could just get the time part to auto-select when the user chooses a date, that would answer my needs best.  But I would be curious about your thoughts on the time part being formatted as just HHmm without a colon separator and how I could get that to work.

I have this attribute on my model field:

[DisplayFormat(DataFormatString = "{0:MM/dd/yyyy HH:mm", ApplyFormatInEditMode = true)]

I have this code in Razor on the view:

@(Html.Kendo().DateTimePickerFor(model => model.MyDateTimeField).Format("MM/dd/yyyy HH:mm").TimeFormat("HH:mm").ParseFormats(new[] { "MM/dd/yyyy HH mm", "MM/dd/yyyy HHmm", "MM/dd/yyyy HH:mm" }))

I have this code in $.document.ready():

$.validator.addMethod('date',
       function (value, element) {
           return this.optional(element) || kendo.parseDate(value);
       });

​

[Georgi Krustev]

Hello Erik,

If you would like to use the "military" style format, then you will need to set it directly:

@(Html.Kendo().DateTimePickerFor(model => model.MyDateTimeField).Format("MM/dd/yyyy HHmm").TimeFormat("HH:mm").ParseFormats(new[] { "MM/dd/yyyy HH mm", "MM/dd/yyyy HH:mm", "MM/dd/yyyy HHmm"}))

If this setup does not work for you, then I will need more details about the project. A runnable test project will be of a great help to review the problem locally and follow you up with more details.

With regards to the manual hour selection functionality, I would suggest you wire the close event of the widget. Detect whether the date view has been closed and select the hour value manually. Here is a proof-of-concept demo that demonstrate one possible approach. Note that the demo uses "kendo.caret" method which is an internal abstraction for caret handling. You can either use it or implement the selection manually.

Regards,
Georgi Krustev
Telerik

 

 

[Erik]

Hi there - me again on actually this same topic.

I'm trying this code in a REPL:

@using Kendo.Mvc.UI

    @(Html.Kendo().DateTimePicker()
            .Name("DateTimeSampled")
            .Format("MM/dd/yyyy HH:mm")
            .ParseFormats(new[] { "MM/dd/yyyy HH mm", "MM/dd/yyyy HH:mm", "MM/dd/yyyy HHmm"})
            .TimeFormat("HH:mm")
            .Events(e =>
            {
                  e.Change("change").Open("open").Close("close");
            })
    )

<script>
    function open(e) {
        console.log("Open :: " + e.view + "-view");
    }

    function close(e) {
        console.log("Close :: " + e.view + "-view");
    }

    function change(e) {
        console.log("Change :: " + kendo.toString(this.value(), 'g'));
        if (e.view == "date") {
           //var picker = e.sender.data("kendoDateTimePicker");
           var picker = $("#DateTimeSampled").data("kendoDateTimePicker");
           console.log(picker);
           //picker.close();
           //e.sender.close();
           var info = kendo.caret(e.sender.element);
           kendo.caret(e.sender.element, info[0] - 5, info[1]); 
        }
    }
</script>

I'm trying to make it so that users can "alt-down" to open the date picker, arrow to choose a date and then "enter", and then the time would be completely selected and them typing 4 digits would set the time value.  Is there any way to make this happen?

[Erik]

So here's a desired sample of keystrokes:

 - alt-down to open date picker

- up arrow to choose date that's a week ago

- enter

- 1345 to specify 1:45 pm

- enter

done with that date - should be a week ago ago at 1:45 PM