DateTimePicker format doesn't work with initial/default value

9 posts, 1 answers
  1. Songbackerteam
    Songbackerteam avatar
    6 posts
    Member since:
    Mar 2013

    Posted 18 Mar 2013 Link to this post

    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
  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 20 Mar 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Songbackerteam
    Songbackerteam avatar
    6 posts
    Member since:
    Mar 2013

    Posted 20 Mar 2013 Link to this post

    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
  5. Answer
    Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 20 Mar 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Songbackerteam
    Songbackerteam avatar
    6 posts
    Member since:
    Mar 2013

    Posted 20 Mar 2013 Link to this post

    Hi Vladimir,

    Thanks for the reply.

    It seems you have forgotten to attache the sample here ???!!!!!
  7. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 21 Mar 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Songbackerteam
    Songbackerteam avatar
    6 posts
    Member since:
    Mar 2013

    Posted 22 Mar 2013 Link to this post

    Hi Vladimir,

    Thanks for the quick reply.

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

    Regards,
    PSSPL
  9. Kamal
    Kamal avatar
    3 posts
    Member since:
    Nov 2014

    Posted 04 Apr Link to this post

    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?
  10. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 06 Apr Link to this post

    Hello,

    I answered to a similar question posted in other forum thread: I would suggest you continue our discussion in only one thread to avoid duplication.

    Regards,
    Georgi Krustev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready