DatePicker display wrong format

3 posts, 0 answers
  1. Antoine
    Antoine avatar
    3 posts
    Member since:
    Oct 2014

    Posted 04 Mar 2015 Link to this post

    Hello,

    I've got a page with two DatePickerFor. My problem is that one display a good format and the other no.

    They are implemented like this 
    <div class="col-md-3" style="vertical-align:middle">
        @Html.LabelFor(m => m.DateFrom, new { @style = "width:100px" })
        @(Html.Kendo().DatePickerFor(m => m.DateFrom)
            .Format("{0:yyyy/MM/dd}")
            .ParseFormats(new String[] { "MM/dd/yyyy hh:mm:ss" })
        )
    </div>
    <div class="col-md-3" style="vertical-align:middle">
        @Html.LabelFor(m => m.DateTo, new { @style = "width:75px" })
        @(Html.Kendo().DatePickerFor(m => m.DateTo)
            .Format("{0:yyyy/MM/dd}")
            .ParseFormats(new String[] { "MM/dd/yyyy hh:mm:ss" })
        )
    </div>

    These DatePickerFor are linked to my model. The properties are both DateTime

    [Required]
    [DataType(DataType.Date)]
    [Display(Name = "Date from")]
    public DateTime DateFrom { get; set; }
      
    [Required]
    [DataType(DataType.Date)]
    [Display(Name = "Date to")]
    public DateTime DateTo { get; set; }

    When I look at the generated HTML, I've got this 

    <input aria-readonly="false"
      aria-disabled="false"
      aria-owns="DateFrom_dateview"
      aria-expanded="false"
      role="combobox"
      class="k-input"
      style="width: 100%;"
      data-role="datepicker"
      data-val="true"
      data-val-date="The field Date from must be a date."
      data-val-required="The Date from field is required."
      id="DateFrom" name="DateFrom"
      value="02/23/2015 00:00:00"
      type="text">   
       
    jQuery(function(){jQuery("#DateFrom").kendoDatePicker({"format":"yyyy/MM/dd","parseFormats":["yyyy/MM/dd","yyyy.MM.dd","MM/dd/yyyy hh:mm:ss"],"min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0)});});  
     
    <input aria-readonly="false"
           aria-disabled="false"
      aria-owns="DateTo_dateview"
      aria-expanded="false"
      role="combobox"
      class="k-input"
      style="width: 100%;"
      data-role="datepicker"
      data-val="true"
      data-val-date="The field Date to must be a date."
      data-val-required="The Date to field is required."
      id="DateTo"
      name="DateTo"
      value="03/04/2015 23:59:00" type="text">
     
    jQuery(function(){jQuery("#DateTo").kendoDatePicker({"format":"yyyy/MM/dd","parseFormats":["yyyy/MM/dd","yyyy.MM.dd","MM/dd/yyyy hh:mm:ss"],"min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0)});});

    All seem all right, but one DatEpciker display "2015/02/23" (which is what I'm waiting for) and the other one display "03/04/2015 23:59:00".

    I don't understand why with the same parameters, one DatePicker display value wiith the good format and not the other one.


    Thanks for your help

    Antoine
  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 06 Mar 2015 Link to this post

    Hello Antoine,

    The DatePicker widget is designed to display the input value unmodified if it cannot parse it. I believe that you will need to set the parseFormat to accept 24 format (H) instead of 12 (h):
    .ParseFormats(new String[] { "MM/dd/yyyy HH:mm:ss" })
    Check the date formats help topic for more details.

    Regards,
    Georgi Krustev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Antoine
    Antoine avatar
    3 posts
    Member since:
    Oct 2014

    Posted 06 Mar 2015 Link to this post

    Hello Georgi,

    Thanks a lot, your answer resolve my problem.

    Antoine.
Back to Top