Test Environment:
OS: Windows_11Repro Steps:
6. Observe an issue that 'Month' control on 'Calendar' popup is not accessible using keyboard.
'Click to book' and header controls are not accessible using keyboard.
1. Open URL: SMB Scheduler (agentcalendardevone.azurewebsites.net) page in Edge Browser.
2. Provide valid 'Email address' in text field and activate 'Book New Appointment'.
3. Select any 'Time Zone' in dropdown and click 'View Available appointments' button.
4. Navigate to the table content.
5. Observe the issue that the controls in the table such as ("<", ">", "Today", calendar widget, "Week", "Click to the book") does not receive keyboard focus.
Actual Behavior:
'Month' Control on 'Calendar' popup is not accessible using keyboard.
Expected Behavior:
Control(s) must be accessible to Bluetooth keyboards and other assistive technology. Common causes of this problem include a) the element does not have a proper role assigned, b) the element needs tab-index="0" attribute to be focusable, or c) the component is not registering key presses.
RadCalendar and RadDatePicker cannot pass the following check by https://achecker.ca/checker/index.php WCAG 2.0 guideline Section 1.3 Adaptable: Create content that can be presented in different ways (for example simpler layout) without losing information or structure. Success Criteria 1.3.1 Info and Relationships (A) Check 245: Data table with more than one row/column of headers does not use id and headers attributes to identify cells. Repair: Add id and headers attributes to table cells so they identify the cells that relate to the headers. Error Line 597, Column 8: <table id="ctl00_ContentPlaceholder1_RadDatePicker1_calendar_Top" class="rcMainTable" summary="Table … Steps to reproduce Go to https://achecker.ca/checker/index.php Paste https://demos.telerik.com/aspnet-ajax/datepicker/accessibilityandinternationalization/wcag2.0andsection508accessibility/defaultcs.aspx or https://demos.telerik.com/aspnet-ajax/calendar/accessibility-and-internationalization/wcag-2.0-and-section-508-accessibility/defaultcs.aspx See the results -> Check 245: Data table with more than one row/column of headers does not use id and headers attributes to identify cells. Repair: Add id and headers attributes to table cells so they identify the cells that relate to the headers. Error Line 568, Column 8: <table id="ctl00_ContentPlaceholder1_RadDatePicker1_calendar_Top" class="rcMainTable" summary="Table ... ======================================= WORKAROUND: $telerik.$("table.rcMainTable tbody th").each(function (idx, el) { var thId = $telerik.$(el).attr("id"); $telerik.$(el).siblings("td").attr("header", thId); })
When MultiViewColumns > 2 the the month views of the Calendar are not aligned properly. The problem occurs if the week count in the months is different and the ShowOtherMonthsDays property is set to false.
Temporary workaround: Set the ShowOtherMonthsDays="True" property of RadCalendar.
Code to reproduce:
RadMonthYearPicker is missing form the SkinManager's ControlTypeToApplyskin collection
As I'm using RadDatePicker in my Grid, In RadGrid for the first time, the image beside the calendar control renders as expected. As soon as I enter into "InLine" edit mode there would be 2 images rendered beside the control. And after clicking on cancel there is no change in the image beside the control. Also attached the screenshot for the same.
Put more than two RadDatePicker with single SharedCalendar on page. some RadDatePicker are in side of UpdatePanel with a button in it. when I press that button RadDatePicker behaviour is strange. RadDatePicker inside UpdatePanel not opening Calendar popup while RadDatePicker outside UpdatePanel opens calendar popup but gives javascript error on any date selection. the javascript error is "Unable to get property '_selectedDates' of undefined or null reference". It looks like it is destroying shared calendar object on partial postback. Please find below sample code to replicate the issue. after clicking "Submit" button, it doesn't open calendar popup for "Date 2" and for "Date 1" it opens but doesn't allow to select date and gives JavaScript error. ---------------------- <asp:ScriptManager ID="sc1" runat="server" /> <telerik:RadCalendar ID="dtCal" runat="server" EnableMultiSelect="false" /> Date 1: <telerik:RadDatePicker ID="dt1" Width="103px" runat="server" SharedCalendarID="dtCal" /> <hr /> <asp:UpdatePanel runat="server" ID="up"> <ContentTemplate> Date 2: <telerik:RadDatePicker ID="dt2" Width="103px" runat="server" SharedCalendarID="dtCal" /> <br /> <asp:Button runat="server" ID="btnDT" Text="Submit" /> </ContentTemplate> </asp:UpdatePanel> ---------------------- When i add all controls in UpdatePanel it works properly. but Actual code is much more complex than above sample with too many lines of javascript code and many date pickers on single page and simply all Calendar and DatePicker controls can not be moved in UpdatePanel.
When using min/max date the invalid dates have almost identical styling as the valid ones, this makes it hard for the user to see what dates are valid. It would be nice of there was some way of telling them apart except by hovering over them. Also when using "metro theme" the invalid date overrides the styling for dates belonging to "other month".
Workaround 1) Use .resx files as the attached ones Workaround 2) Set properties to ViewState RadMonthYearPicker1.MonthYearNavigationSettings.ViewState["_mCancelButtonCaption"] = "my cancel"; RadMonthYearPicker1.MonthYearNavigationSettings.ViewState["_mTodayButtonCaption"] = "my today"; RadMonthYearPicker1.MonthYearNavigationSettings.ViewState["_mOkButtonCaption"] = "my ok";
Open a demo page https://demos.telerik.com/aspnet-ajax/datetimepicker/overview/defaultcs.aspx?skin=Bootstrap and select Bootstrap skin. You will see that the right corners of the clock button are cutted down. Workaround: .RadPicker .rcSelect { border-top-right-radius: 4px !important; border-bottom-right-radius: 4px !important; }
-> When DatePicker renders for the first time, it applies the CSS according to the selected skin. Reference Image: Comtrol in Filter Panel first time render.jpg -> But as soon as I enter into an edit mode or insert than the CSS is not applied to the control and the design of the RadCalender is breaking somehow. Reference Image: Control while Editing.jpg -> Also entering into edit or insert break the design of the other RadCalender control placed in filter panel. Reference Image: Control in Filter Panel.jpg
When the culture is set using Thread.CurrentThread.CurrentUICulture = new CultureInfo("it"); The following exception is thrown https://www.screencast.com/t/YnQstdBUrY
Hi, While tabout from my Telerik.RadDatePicker Control ,Some of my controls(i.e) in my UI. Disappears .Its not loading .If focus the raddatepicker again then those controls are reloaded. Because of this my Client can't enter his input and I am struggling with Raddatepicker control. Please help me how to rectify this serious problem . THanks & Regards, Muthu +91-8344434306