This is a migrated thread and some comments may be shown as answers.

DatePicker display wrong format

2 Answers 915 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
Antoine
Top achievements
Rank 1
Antoine asked on 04 Mar 2015, 10:42 AM
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 Answers, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
answered on 06 Mar 2015, 09:24 AM
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.

 
0
Antoine
Top achievements
Rank 1
answered on 06 Mar 2015, 09:37 AM
Hello Georgi,

Thanks a lot, your answer resolve my problem.

Antoine.
Tags
Date/Time Pickers
Asked by
Antoine
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Antoine
Top achievements
Rank 1
Share this question
or