Currently, if the ReadOnly parameter value is set to 'true,' the user can modify the value of the DateInput by using the arrow keys.
Reproduction: https://blazorrepl.telerik.com/mxaiabvd178zy7p948
When attempting to insert a date of February 29th (2/29) in the DatePicker component with the AutoCorrectParts feature disabled, users are unable to input the year. The component only allows the insertion of the digits 0, 4, and 8, preventing users from selecting other year values.
Reproduction: https://blazorrepl.telerik.com/mxagmaPm39IQbjHw19
Hi
When you focus on the DatePicker input element the cursor is at the end of the input instead of the start.
Here is an example
https://blazorrepl.telerik.com/ccOtaTOZ59tdXv1J10
Any help would be appreciated
Regards
Stewart
DatePicker cursor not advancing after month input. The problem arises when dd/MMM/yyyy format is applied.
To reproduce the issue open this REPL example. Type any date in the second DatePicker. When inserting a month value the cursor is not moved to the year section.
After inserting a month the cursor should be moved to the year section. As when no format is applied (the first DatePicker)Hi
I have created a REPL here: https://blazorrepl.telerik.com/QHYGbTPk59IqOcEU51
to reproduce the issue I am talking about:
you will notice that the value displayed below the table is what was previously in the cell
I would have expected the value to be null which can be achieved via
<Admin>
As a workaround, you can add the DebounceDelay parameter with a high number as in this REPL link.
</Admin>
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;
}
Steps to reproduce
When using an abbreviated month in the date format, the picker will not automatically move to the next element (year) after entering a month. If I enter 04 for example, the focus remains on the month.
When using a numeric month in the date format, the picker will automatically move to the year after entering a month.
See an example: https://blazorrepl.telerik.com/cmOzPgFc08d1woml09.
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;
}
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.
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.
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.