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

2 posts, 0 answers
  1. Erik
    Erik avatar
    50 posts
    Member since:
    Jan 2011

    Posted 08 Jan 2015 Link to this post

    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():
           function (value, element) {
               return this.optional(element) || kendo.parseDate(value);

  2. Georgi Krustev
    Georgi Krustev avatar
    3725 posts

    Posted 12 Jan 2015 Link to this post

    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.

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