Setting up DateInput messages in DatePicker?

3 posts, 1 answers
  1. Luc
    Luc avatar
    2 posts
    Member since:
    Apr 2017

    Posted 28 Nov Link to this post

    Hello,

    I'm trying to setup a specific display format for a DatePicker when using DateInput. The following works fine functionally:

    @(Html.Kendo().DatePicker()
    .Format("yyyy-MM-dd")
    .DateInput()
    .Name("dpSitOpenDate")
    .HtmlAttributes(new { style = "width:90%"})
    )

     

    My issue with this is that when DateInput() is active, it displays: "Year-Month-Day" before any date is entered. I would prefer it to show "yyyy-mm-dd" instead, so that users know exactly what format is expected of them before they start typing.

     

    I know that a DateInput control by itself has the possibility to enter custom Messages which I believe would have the effect I want, as explained in the Localization example of this page:

    https://docs.telerik.com/kendo-ui/controls/editors/dateinput/overview

     

    Is it possible to setup those messages on the DateInput that is embedded in the DatePicker? The only parameter that can seemingly be passed to .DateInput() is a Boolean, so I'm not sure how I could set those messages during creation, and I'm not sure how I would access the DateInput via script either. I know I can access the DatePicker itself via $("#dpSitOpenDate").data("kendoDatePicker") for example, but not the DateInput within it.

     

    Thank you!

  2. Answer
    Georgi
    Admin
    Georgi avatar
    184 posts

    Posted 30 Nov Link to this post

    Hello Luc,

    A possible solution is to set the messages of the dateInput using the setOptions method

    e.g.
    $('#datePicker').data('kendoDatePicker')._dateInput.setOptions({
        messages:{
          "year": "yyyy",
          "month": "mm",
          "day": "dd"
        }
      })

    In the link below you will find a dojo sample which demonstrates the above solution:



    Regards,
    Georgi
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Luc
    Luc avatar
    2 posts
    Member since:
    Apr 2017

    Posted 30 Nov in reply to Georgi Link to this post

    Wonderful! That was exactly what I was looking for.

    I was aware of the setOptions method that you could use on a dateInput, but not that you could access the dateInput within the datePicker by using ._dateInput

    Thank you very much!

Back to Top