Using the set_value() method of the DatePicker's Input, set "2024-05-08" (the date format is dd/MM/yyyy), the month and day are misplaced and the control gets the wrong date of 05/08/2024.

When the day is larger than 12, the correct date is received. For example,  '2024-05-14' will update the control correctly and we see the control with 14/05/2024.

Steps to replicate the issue:

• Set the computer's Time Zone to CST (Central Standard Time) which is UTC -6:00.
• Enable Daylight Saving
• Open VS and create a new Page with a DatePicker in it (basic settings)
• Select the date "4/1/2023" and picking the time "2:00 AM" jumps to "3:00 AM"

Important: for the Time Zone changes to have effect, the Visual Studio solution has to be closed/re-opened.

We are in the process of upgrading our controls to Telerik. We had noticed a behavior that we did not want to happen, this was related to DatePicker control changing the value of the date if incorrect format was entered, we solved this by having EnableSmartParsing to false in our Telerik Theme so that it applies to all DatePicker controls.

Now we have some instances of date controls that are defined with specific DateFormat/DisplayDateFormat like below:

<telerik:RadDatePicker ID="dpId" DateInput-DisplayDateFormat="y" DateInput-DateFormat="y" runat="server"></telerik:RadDatePicker> or 

<telerik:RadDatePicker ID="dpFrom" DateInput-DateFormat="MM/yyyy" DateInput-DisplayDateFormat="MMM, yyyy" runat="server"></telerik:RadDatePicker>

<telerik:RadDatePicker runat="server"
  DatePopupButton-Visible="false" 
  PopupDirection="BottomLeft" 
  ShowPopupOnFocus="true" 
  DateInput-EnabledStyle-HorizontalAlign="Left" 
  DateInput-EnableSmartParsing="false"  
  MinDate="0001-01-01">
</telerik:RadDatePicker>

I have started using a shared calendar on RadDatePicker.  I also added a JavaScript example found I believe in the Telerik forum to set the min date of one RadDatePicker to the chosen date on the other RadDatePicker for a date range.  This isn't working correctly with a shared calendar because setting the min date on one RadDatePicker sets it on the calendar for both RadDatePickers. My solution was an OnPopupOpening function on the RadDatePicker to reapply the min/max dates to the calendar.  Here is the code:

    function onPopupOpening(sender, args) {
        var box = sender.get_dateInput();
        var cal = sender.get_calendar();
        var min = box.get_minDate();
        var max = box.get_maxDate();
        var mindate = [min.getFullYear(), min.getMonth() + 1, min.getDate()];
        var maxdate = [max.getFullYear(), max.getMonth() + 1, max.getDate()];
        cal.set_rangeMinDate(mindate);
        cal.set_rangeMaxDate(maxdate);
    }

My suggestion is to either have this done automatically by RadDatePicker or include something similar in the documentation for others who may have the same issue.

Regards,

Greg

We are trying to get our site to be WCAG AA compliant however the Telerik DatePicker appears to have inline styling on the second popup for month selection:

Currently, the enter key is not closing the popup when pressed on the already selected date. Can be tested in https://demos.telerik.com/aspnet-ajax/datepicker/accessibilityandinternationalization/wcag2.0andsection508accessibility/defaultcs.aspx

Note: The popup calendar can be closed with Esc key in this case

1) There is no element with the id or name as the value of the aria-controls attribute of the dateinput button with enabled ARIA support. 

2) The aria-valuemin and aria-valuemax attribute are not valid on role=textbox

To fix these, the following workarounds can be used

Option 1: OnClientLoad event of the DateInput element inside the DatePicker

function DatePickerOnClientLoad(sender) {
    setTimeout(function () {
        $telerik.$(sender.get_element()).parent().find("[role=button][aria-controls]").removeAttr("aria-controls");
        $telerik.$(sender.get_element()).removeAttr("aria-valuemin").removeAttr("aria-valuemax")
    })  
}

Option 2: using Sys.Application.Load event

function pageLoadHandler() {
    $telerik.$("[role=button][aria-controls]");
    $telerik.$("[role=textbox]").removeAttr("aria-valuemin").removeAttr("aria-valuemax");
    // Sys.Application.remove_load(pageLoadHandler);  
}
Sys.Application.add_load(pageLoadHandler);

Hi,

For the date picker and it's family of controls (time picker, date time picker), when using bootstrap skin, lightweight rendering and RTL page, the buttons for the picker are displayed on the wrong side of the control (the right side) instead of being displayed on the left side. I know this can be fixed using some CSS but although the html controls are in order (text and then button both in a container with RTL), the button is stuck to the right side somehow

please advise