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

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.

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

Hello,

I have an issue with TelerikDatePicker globalization. It works fine at all, but "Today" has the same translation.

I've used code like this:

CultureInfo.DefaultThreadCurrentCulture = new CultureInfo(MyStringLanguage);

And it still works only for "days" and "months". Could you please tell about current situation about localization and globalization or maybe to suggest some different solution.

Thanks for your help.

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

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

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.

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

How to remove placeholder from DatePicker?

If I set DateFormat to "d" then DatePicker will have "d" as a placeholder which confuses my users. How can I set custom placeholder or remove the placeholder from the DatePicker control?

Best regards,

Robert

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.

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

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

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.

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