DateTimePicker format doesn't work with initial/default value

[Songbackerteam]

Hi,

Razor code in my MVC view:
    @Html.TextBoxFor(m => m.EstimatedDelivery, new { style = "width: 222px;", @readonly = "readonly", @class = "datetimepicker" })

CS code in controller:
ActionResult Index()
{
      ViewModel model = new ViewModel();
      model.EstimatedDelivery = DateTime.Now.AddDays(1);
      return View(model);
}

Javascript code:
$(document).ready(function () {

     var today = new Date();
     var todayplus180 = new Date();
     todayplus180.setDate(today.getDate() + 180);

    $("#estimatedDeliveryDateTime").kendoDateTimePicker({
            format: "yyyy/MM/dd hh:mm tt",
            parseFormats: ["yyyy/MM/dd", "hh:mm tt"],
            min: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1),
            max: new Date(todayplus180.getFullYear(), todayplus180.getMonth(), todayplus180.getDate())
        });
});

When the page opens the date is displayed in the datetimepicker as "18-03-2013 15:46:49"

If I change the date it's correctly displayed as "2013/03/19 05:30 AM"

Please let me know the reason for the same and also resolution if any for this issue.

Thanks,
PSSPL

[Vladimir Iliev]

Hi,

 
From the provided information it seems that most probably the default date format that is rendered in the input is not included in the DateTimePicker parse formats. For convenience I created small example which loads the date with correct format initially and attached it to the current thread - could you please check it and let me know how it differs from your real setup?

Kind Regards,
Vladimir Iliev
the Telerik team

[Songbackerteam]

Hi Vladimir,

Thanks for the reply, also thanks for the sample.

We have downloaded the sample you attached & tested the same it worked as it is in our system.

However, now please make a small change in code as explained below:

In HomeController.Index() action method, change 

1.return View(... , PostedOn = DateTime.UtcNow, ... });

and now try to run the application, it doesn't show any value in datetimepicker.

Moreover, in our application the required 'parseFormats' is "dd-MM-yyyy HH:mm:ss" which works fine. These are my system's regional settings-datetime long format. Why so? Does it mean that the datetime rendering in browser considers local system regional settings?

Hope this helps you to understand our scenario & problem,

Thanks,
PSSPL

[Vladimir Iliev]

Hi,

 
Please find the answers of your questions below:

• In HomeController.Index() action method, change ... and now try to run the application, it doesn't show any value in datetimepicker. - the date picker is empty because the date which DateTime.UtcNow generates is out of the possible values for the DateTimePicker which are set using JavaScript on the client side (min is set to current date + 1):   

  $("#PostedOn").kendoDateTimePicker({
      format: "yyyy/MM/dd hh:mm tt",
      parseFormats: ["yyyy/MM/dd", "hh:mm tt", "MM/dd/yyyy hh:mm:ss tt"],
      min: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1),

Also please note that the date is passed to the input in the current server culture format  which should be included in the parse formats. Another option is to use the DateTimePicker HTMLHelper which should parse the date automatically using current server culture  - please check the example below:

<div class="editor-label">
    @Html.LabelFor(model => model.PostedOn)
</div>
<div class="editor-field">
    @{DateTime today = DateTime.Now;}

    @(Html.Kendo().DatePickerFor(model => model.PostedOn)
        .HtmlAttributes(new { style = "width: 222px;", @readonly = "readonly", @class = "datetimepicker" })
        .Format("yyyy/MM/dd hh:mm tt")
        .ParseFormats(new string[]{ "yyyy/MM/dd", "hh:mm tt"})
        .Min(DateTime.Now.AddDays(1))
        .Max(DateTime.Now.AddDays(180)))

    @Html.ValidationMessageFor(model => model.PostedOn)
</div>

For convenience I updated the previous example with the above example and attached it to the current thread.

Kind Regards, Vladimir Iliev
the Telerik team

[Songbackerteam]

Hi Vladimir,

Thanks for the reply.

It seems you have forgotten to attache the sample here ???!!!!!

[Vladimir Iliev]

Hi,

 
The project is already attached, however it seems that there is some problem and it's not showing for clients. For convenience I attached it again (removed some of the packages which you can download using NuGet).

Kind Regards,
Vladimir Iliev
the Telerik team

[Songbackerteam]

Hi Vladimir,

Thanks for the quick reply.

Your last response solved our problem. Thanks a lot for the help.

Regards,
PSSPL

[Kamal]

Kendo Date picker,
The following code should restrict the kendo datepicker to accept any format other than MM/dd/yyyy 
$("#date").kendoDatePicker({
            format: "MM/dd/yyyy", parseFormats: ["MM/dd/yyyy"]
        }).data("kendoDatePicker");

if user manually types yyyy/dd/MM format it gets converted into MM/dd/yyyy rather than kendo validator raising input validation error.
Is there any setting on the kendodatepicker control which can raise invalid dateformat error?

[Georgi Krustev]

Hello,

I answered to a similar question posted in other forum thread:

• http://www.telerik.com/forums/unsupported-date-formats-in-datepicker

I would suggest you continue our discussion in only one thread to avoid duplication.

Regards,
Georgi Krustev
Telerik