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 /.

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

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

Hi,

disabled dates are not working in DatePicker. When setting DisabledDates parameter nothing changes in DatePicker. Those dates can still be selected. It works as expected in Calendar control

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.

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

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 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.

Hi

I have created a REPL here: https://blazorrepl.telerik.com/QHYGbTPk59IqOcEU51

to reproduce the issue I am talking about:

1. click on the cell
2. Press the 'Delete' Key
3. Press the 'Enter' Key

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

1. click on the cell
2. Press the 'Delete' Key
3. Click outside the cell

The picture says it all!

Setting Min and Max should also prevent the user from writing a date that is out of their range. At the moment, it only disables the dates in the calendar.

In the meantime, you can use validation to limit the user input.

Hello,

I'm trying to integrate a blazor datepicker, and i will only want to display the months and navigate bye years.

But it does not work.

 <TelerikDatePicker View="@CalendarView.Year" BottomView="@CalendarView.Decade" Format="MM/yyyy"  @bind-Value="@selectedDate" @ref="theDatePicker"></TelerikDatePicker>

Thank you.