When testing your datepicker control in NVDA, there are a number of accessibility issues.
I am using the latest version of NVDA 2021.3.3 on Chrome Version 98.0.4758.82 (Official Build) (64-bit). I will note that Jaws and Chrome work properly regarding the dropdown issues, so it may be an NVDA thing, but maybe some research can be done to see if there are some different aria attributes that will work so that if functions properly with both screen readers. For example this Aria Best Practices Date Combo Box example at least reads where the user is with the arrow keys. https://www.w3.org/TR/wai-aria-practices-1.2/examples/combobox/combobox-datepicker.html It is not perfect, but it is better than not being read at all.
And even outside of the date dropdown stuff, the date input portion (#1) above is an issue across the board. I know that it is a design decision that you guys have made, and that you have provided documentation as to why and how to use it, but most users are going to type in the slashes of a date, and it's not reasonable to write up a half page of documentation within my app to let users know how to use the control. I can't even put a short label that says enter date without slashes, because under some circumstances a slash is necessary, so it becomes confusing to the user, and screen reader users will get lost if they make a mistake because they are not informed that they have just switched to a different section.
Thanks.
The problematic setup:
<TelerikDatePicker Min="@Min"
Max="@Max"
@bind-Value="@selectedDate">
</TelerikDatePicker>
@code {
public DateTime Max = new DateTime(2021, 3, 29);
public DateTime Min = new DateTime(2021, 3, 1);
private DateTime? selectedDate;
}
When using a DateTime? for input and a specific format, for example yyyy-MM-dd. If you just want to change the month part and type 03 the focus shifts to the start of the input and the month part gets replaced by MM. Also applies to DateInput.
Reproduce:
https://blazorrepl.telerik.com/QGYFEfPU52ceM2wL03
Select the month part and type 03 for example. If using a non nullable DateTime, this does not happen.
This was marked as a duplicate for this issue: https://feedback.telerik.com/blazor/1468716-datepicker-loses-focus-when-the-input-date-starts-with-0
That issue is now "completed" but the issue I'm describing is not fixed.
DateInput shows minvalue by default when bound to a nullable DateTime with value null. While this might not be a bug, in almost all cases, it would be much better to have the default value set to DateTime.Now rather than DateTime.Min which seem to be the case today.
The normal InputDate in blazor has an @ondblclick event. The intellisense for TelerikDatePicker indicates that this should be available but gives the error "...does not have a property matching the name 'ondblclick'."
When using a DateTime? for input and a specific format, for example yyyy-MM-dd. If you just want to change the month part and type 03 the focus shifts to the start of the input and the month part gets replaced by MM.
Reproduce:
https://blazorrepl.telerik.com/QGYFEfPU52ceM2wL03
Select the month part and type 03 for example. If using a non nullable DateTime, this does not happen.
I want to apply some custom CSS to hide the disabled dates. However, it appears that k-state-disabled class is not applied to all of them.
For example, if I set the Max parameter to October 15th 2021, the remaining dates of October have the k-state-disabled but the ones in November only have k-other-month class.
The same behavior occurs when I set the Min parameter - the dates from the previous month do not have k-state-disabled class.
===========
ADMIN EDIT
===========
Note: This bug also affects Calendar, DateRangePicker and DateTimePicker components.
As a workaround for the time being you might try another approach - all the disabled cells have aria-disabled = "true" attribute which you can use as a CSS selector to target the disabled cells:
<style>
[aria-disabled="true"] {
visibility: hidden;
}
</style>
<TelerikDatePicker @bind-Value="datePickerValue" Max="@MaxValue"></TelerikDatePicker>
@code {
DateTime datePickerValue { get; set; } = new DateTime(2021, 10, 1);
DateTime MaxValue { get; set; } = DateTime.Now;
}
Steps to reproduce
Currently, when dates need to be disable in the DatePicker and DateRangePicker, a collection of induvial dates are provided. As a result, when I need to disable a 90 day or 180 day continuous range I need to add to the collection 90 or 180 day individual DateTime objects.
It would be more efficient to provide a range of dates to disable instead of induvial dates.
The DisabledDates should accept a collection of DisableDateItems that is similar to the below:
public class DisableDateItem
{
public DateTime RangeBegin { get; set; }
public DateTime RangeEnd { get; set; }
}
Using this collection I can disable an individual date by having the RangeBegin and RangeEnd dates be the same, as shown below:
var bankHoliday = new DisableDateTime
{
RangeBegin = new DateTime(2021, 09, 01),
RangeEnd = new DateTime(2021, 09, 01)
};
To disable a date range, for example the Eastern Good Friday Weekend, I would provide a DisableDateTime as:
var bankHoliday = new DisableDateTime
{
RangeBegin = new DateTime(2021, 04, 30),
RangeEnd = new DateTime(2021, 05, 02)
};
To disable a 90 day range, I would provide a DisableDateTime object as:
var bankHoliday = new DisableDateTime { RangeBegin = new DateTime(2021, 05, 01), RangeEnd = new DateTime(2021, 07, 30) };
I would like the following behavior in the date picker. Perhaps it can be achieved with a parameter similar to the one in UI for ASP.NET AJAX - the FocusedDate property (something like RadDatePicker1.FocusedDate = DateTime.Today.AddDays(30);).
The current behaviour is:
* if date is set, show month of set date
*else show month of current date (today)
Desired behaviour:
* if date is set, show month of set date
* else if min date's month is greater than current date month then show month of min date
* else show month of current date
Here is a code snippet to illustrate the issue:
Open the picker - it will start in the month with today's date, but I want it to start at the min date - one month later
<TelerikDatePicker @bind-Value="@theDate" Min="@minDate" Max="@maxDate"></TelerikDatePicker>
@code {
DateTime theDate = DateTime.Now;
DateTime minDate = DateTime.Now.AddDays(60);
DateTime maxDate = DateTime.Now.AddDays(230);
}
===
Ideas that would serve me:
If I set a Min-Date like this:
<TelerikDatePicker @bind-Value="myDate"
Format="dd.MM.yyyy"
Min="@DateTime.Today.AddDays(1)">
</TelerikDatePicker>
clicking on the "Today" link in the calendar does not do anything!
If I don't set Min then a click on "Today" correctly sets the current date.
Regards,
René
I would like to be able to disable a month or multiple months in the DatePicker/DateRangePicker or the Calendar.
<AdminEdit>
Currently, we look at this feature as an internal check if all dates in the month/months are disabled and if so to disable the entire month.
</AdminEdit>
When using DatePicker with Globalization the message that indicates that the component has an invalid date is still visible even after providing a correct date.
I'm making a wrapper on top of TelerikDatePicker and this is how my component is working
<TelerikDatePicker T="TDate"
Value="@_value"
ValueChanged="@ValueChanged"
ValueExpression="@ValueExpression"
Enabled="@Enabled"
Class="@ClassMapper.AsString()"
Format="@Format" />
@code {
// ... the other properties
[Parameter]
public virtual string Format { get; set; }
}
But here is the problem. This component will give me the error
Error: System.AggregateException: One or more errors occurred. (Value cannot be null. (Parameter 'input'))
---> System.ArgumentNullException: Value cannot be null. (Parameter 'input')
at System.Text.RegularExpressions.Regex.Replace(String input, String replacement)
at System.Text.RegularExpressions.Regex.Replace(String input, String pattern, String replacement)
at Telerik.Blazor.Common.DateHelpers.FormatHelper.ExpandFormat(String format)
at Telerik.Blazor.Common.DateHelpers.FormatHelper.ConvertToKendoIntl(String format)
at Telerik.Blazor.Components.TelerikDateInputBase`1.GetDateInputOptions()
at Telerik.Blazor.Components.TelerikDateInputBase`1.OnAfterRenderAsync(Boolean firstRender)
So another solution would be set it to string.Empty, but than it will have a different result when I don't pass the Format property.
Here are the cases:
[Parameter]
public virtual string Format { get; set; } // gives the error
[Parameter]
public virtual string Format { get; set; } = ""; // doesn't give the default result
I had to make a walkaround to not pass Format to the component for it to work
@if (!string.IsNullOrEmpty(Format))
{
<TelerikDatePicker T="TDate"
Value="@_value"
ValueChanged="@ValueChanged"
ValueExpression="@ValueExpression"
Enabled="@Enabled"
Class="@ClassMapper.AsString()"
Format="@Format" />
}
else
{
<TelerikDatePicker T="TDate"
Value="@_value"
ValueChanged="@ValueChanged"
ValueExpression="@ValueExpression"
Enabled="@Enabled"
Class="@ClassMapper.AsString()" />
}
What should I set as a default value to my wrapper's Format property so it doesn't give me the error and also get's the default value of Format?
Please don't say that I should keep the @if (!string.IsNullOrEmpty(Format)), it's so bad and I don't want to use telerik and still have to make walkarounds.