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

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.

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

1. See the DatePicker Validation Demo
2. Highlight the year
3. Start typing 2029
4. See that even on the first input stroke the validation is triggered.

<Admin>

As a workaround, you can add the DebounceDelay parameter with a high number as in this REPL link. 

</Admin>

TELERIK EDIT: This appears to be fixed in version 6.0.0

====

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
   

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.

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.

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.