Set Messages in Start and End DateInputs for DateRangePicker

Environment

Product DateRangePicker for ProgressĀ® TelerikĀ® UI for ASP.NET Core
Product Version 2019.2.514

Description

How can I change the text of the Kendo UI DateRangePicker from its default "day/month/year" placeholder?

Solution

In order to change the start and end input messages, reference the dateRangePicker and set the message options of the _startDateInput and _endDateInput:

    <div id="dateRangePicker"></div>

    <script>
      $(function () {
        var dateRangePicker = $("#dateRangePicker").kendoDateRangePicker().data("kendoDateRangePicker");

        dateRangePicker._startDateInput.setOptions({
          messages: {
            "year": "yyyy",
            "month": "mm",
            "day": "dd",
            "hour": "hh",
            "minute": "mm",
            "second": "ss",
            "dayperiod": "am/pm",
          }
        });

        dateRangePicker._endDateInput.setOptions({
          messages: {
            "year": "yyyy",
            "month": "mm",
            "day": "dd",
            "hour": "hh",
            "minute": "mm",
            "second": "ss",
            "dayperiod": "am/pm",
          }
        });
      });
    </script>
In this article
Not finding the help you need? Improve this article