Unplanned
Last Updated: 15 Sep 2022 11:25 by ADMIN
Created by: Stewart
Comments: 1
Category: DatePicker
Type: Bug Report
2

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

Completed
Last Updated: 18 Aug 2022 08:01 by ADMIN
Release 3.6.0 (14 Sep 2022) (R3 2022)
The Date / Time pickers render an aria-controls attribute with an ID that does not exist on the page, because the component popup is not rendered when it's not visible.
Unplanned
Last Updated: 26 Jul 2022 07:41 by ADMIN
Created by: Mike
Comments: 4
Category: DatePicker
Type: Bug Report
0

When testing your datepicker control in NVDA, there are a number of accessibility issues.

  1. The dateinput portion of the control does not account for users entering full dates into the control, meaning if a person was to try to type 2/23/2022 into the input where they included the slashes, it would throw them into the year section when they thought they were entering the day section.  My suggestion via this forum link (https://www.telerik.com/forums/ignore-forward-slash-allow-various-formats-when-using-date-input) is to alter your date entry logic to allow users to both enter the dates without the slashes (which is what you have now except under a few edge cases where a slash is needed to move to the next section like 2 2/ 2022) as well as include the slashes where if the user is on the first digit of the day section and the / is pressed, do NOT advance them to the year section.  While this can be an annoyance for a sited user because they end up accidentally entering the day in the year section when they try to use the slashes, they can at least see what went wrong, and then go back and fix it. For a screen reader user, they are not notified of the auto advancement, and so they have no idea that they have entered an invalid date until the leave the control and then tab back to it, or if they were to try to submit the form and get an error.
  2. The dropdown portion of the control is not being read properly by NVDA.  When you first drop it down via alt-down arrow, it will actually write all of the table text to the Speech Viewer window, but nothing is read. 
  3. Then, once you try to arrow to a date, nothing is read at all. You can tab to the month and previous/next buttons and they are read.
  4. Opening the Month section of the dropdown doesn't read the month out when arrowing through the months.
  5. Tabbing to the previous or next buttons and then pressing them with enter reads all of the dates in the table.
  6. Arrowing up or down within the days reads all of the dates in the table when it advances to a new month, but reads nothing otherwise.

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.

Completed
Last Updated: 28 Jun 2022 07:51 by ADMIN
Release 3.5.0
Created by: Hannes
Comments: 0
Category: DatePicker
Type: Bug Report
1
I am trying to add a custom CSS class to the DatePicker through its Class property. However, the provided class is not added to the wrapping element of the component. Same applies for the DateInput, DateTimePicker and TimePicker.
Completed
Last Updated: 02 Jun 2022 08:22 by ADMIN
Release 3.4.0

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;
}

Unplanned
Last Updated: 19 May 2022 06:56 by web

Steps to reproduce

  1. Add a DatePicker
  2. Bind it to nullable DateTime object
  3. Use the dd.MMM.yyyy format
  4. Select any date and when the popup is closed press any numeric key on the keyboard.
Unplanned
Last Updated: 16 May 2022 12:09 by Mark

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.

Unplanned
Last Updated: 13 May 2022 08:47 by Mark
The DatePicker indicates that there is a new value, even if such is not provided
Completed
Last Updated: 04 Apr 2022 19:10 by ADMIN
Release 3.2.0

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;
}


 

Completed
Last Updated: 28 Feb 2022 09:32 by ADMIN
Release 3.1.0

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.

Duplicated
Last Updated: 31 Jan 2022 15:34 by ADMIN

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.

 

 

Declined
Last Updated: 20 Jan 2022 16:26 by ADMIN

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. 

 

Completed
Last Updated: 04 Mar 2021 17:27 by ADMIN
Release 2.23.0

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.

Completed
Last Updated: 04 Mar 2021 08:22 by ADMIN
Release 2.23.0

Delete the input, choose a date from the dropdown. The issue is that the first picker remains invalid, while it is valid, a keyboard interaction with the input is required to clear the invalid state.

Reproducible:

@using System.ComponentModel.DataAnnotations;

    <EditForm Model="ModelData">
        <DataAnnotationsValidator />
        <ValidationSummary />
        <br /><br />
        <span>Not nullable</span> @ModelData.Date<br />
        <Telerik.Blazor.Components.TelerikDatePicker @bind-Value="ModelData.Date" Min="DateTime.MinValue" Max="DateTime.MaxValue"></Telerik.Blazor.Components.TelerikDatePicker><br /><br />
        <span>Nullable</span> @ModelData.Date2<br />
        <Telerik.Blazor.Components.TelerikDatePicker @bind-Value="ModelData.Date2" Min="DateTime.MinValue" Max="DateTime.MaxValue"></Telerik.Blazor.Components.TelerikDatePicker><br /><br />
    </EditForm>

@code  {

    public MyModel ModelData { get; set; }

    protected override void OnInitialized()
    {
        ModelData = new MyModel();
    }

    public class MyModel
    {
        public string Name { get; set; }

        [Required(ErrorMessage = "Non nullable required")]
        public DateTime Date { get; set; } = DateTime.Today;

        [Required(ErrorMessage = "Nullable required")]
        public DateTime? Date2 { get; set; } = DateTime.Today;
    }
}

Declined
Last Updated: 08 Jan 2021 12:52 by René

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é

Completed
Last Updated: 15 May 2020 18:56 by ADMIN
Release 2.14.0
Only under WASM, when you double click the icon fopr the calendar/time popup, you get an exception. Can happen with a bit slower click before the animation has finished, but it's hard to reproduce (you have to be quite fast and slow enough so it isn't a double-click).
Completed
Last Updated: 11 May 2020 10:11 by ADMIN
Release 2.13.0

Many users would prefer to not have to use their mouse when entering data. This makes their job much more efficient when they can keep their hands in one place. I would expect to be able to type "05/22/2020" and also "05222020" into the datepicker but it keeps getting stuck on the day part. If you look at the demo for MVC, when you type those values, it accepts them but the demo for the Blazor datepicker does not.

ADMIN EDIT:

The MVC date picker does not have the described behavior. By default it is a simple <input> without validation so it will take any input, but typing in the numbers in sequence like that won't select a date. See the rest of the discussion and the updated title for more details on the behavior and issue this will fix.

</ADMIN EDIT>

To reproduce, go to https://demos.telerik.com/blazor-ui/datepicker/overview and tab into the datepicker input. Try typing "05/22/2020" and you will get a result of "5/20/yyyy" because it gets stuck on the dd section. 

To see the expected functionality, go to the MVC demo site (https://demos.telerik.com/aspnet-mvc/datepicker) and tab into the datepicker. Try typing "05/22/2020" and you will get a value of "05/22/2020" which is what it should be.

This should work when typing both "05/22/2020" and "05222020" since users will be even more efficient if they don't need to type the /.

Completed
Last Updated: 28 Apr 2020 17:34 by ADMIN
Release 2.11.0

When you use the DisabledDates parameter of the picker and it is null, the component throws an error that it cannot Select from the IEnumerable:

 

<TelerikDatePicker @bind-Value="@theValue" DisabledDates="@DisabledDates" />

@code{
    DateTime theValue { get; set; }
    List<DateTime> DisabledDates { get; set; }
}

 

Unplanned
Last Updated: 06 Apr 2020 13:53 by ADMIN
Created by: Wuttichai
Comments: 1
Category: DatePicker
Type: Bug Report
2
For example, a Thai calendar causes exceptions in WASM because day names are missing
Declined
Last Updated: 20 Mar 2020 08:01 by ADMIN

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.

1 2