How to prevent unwanted characters in a DatePicker

[Roberto]

How can I prevent user from entering characters like this in a DatePicker

[Sureshkumar P]

Hi Roberto,

We would like to inform you that, we have already considered the reported requirement “Provide mask support for Date and Time picker components in Blazor platform” as a feature at our end and this support will be included in any one of our upcoming releases. We will implement the feature based on the customer request count and priority.      

You can track the status of the requested requirement from the below feedback link.     

https://www.syncfusion.com/feedback/16575          

To make it count, please cast your vote. We will prioritize the features based on the demands of each release If you have more specifications/suggestions on the request for the feature, you can add them to the portal as a comment.      

Regards,

Sureshkumar P

[Roberto]

Is nice to know that you guys are contemplating adding mask support. For the time being would you mind helping me with a temporary solution where only "0,1,2,3,4,5,6,7,8,9,0,/" are allowed? I already follow without success the code in the feedback link provided by Mark: 

https://syncfusion-feedback.s3.amazonaws.com/16575/MaskedDateInput.razor_593f2923.txt

[Deepak Ramakrishnan]

Hi Roberto,

We will check the possibilities and update the details in two business days (Aug 16 2022 ) . 

Thanks,

Deepak R.

[Sureshkumar P]

Hi Roberto,

We suggest you enable the property strictMode which is similar behavior, it allows only valid dates and if an invalid date is typed and focused out, the value is removed from the input.

API: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_StrictMode

<EditForm Model="@_exampleModel" OnInvalidSubmit="OnInvalidSubmit" OnValidSubmit="HandleValidSubmit"> 

    <DataAnnotationsValidator /> 

    <SfDatePicker TValue="DateTime?" @bind-Value="@_exampleModel.DateValue" StrictMode="true"></SfDatePicker> 

    <ValidationMessage For="@(() => @_exampleModel.DateValue)" /> 

</EditForm> 

 

Note: If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Regards,

Sureshkumar P

[Roberto]

Hi  Sureshkumar,

Entering invalid characters into a SfDatePicker makes it look very unprofessional. Is nice to know that you guys are contemplating adding mask support. For the time being would you mind helping me with a temporary solution where only valid characters are displayed?

[Sureshkumar P]

Hi Roberto,    

We validated the reported requirement. We checked whether the entered date is valid or not using TryParseExact method by getting the date from the input event. We displayed the invalid error messages based on the validation. The validation message will appear and disappear when typing the date value on the input element. Kindly refer the below code and sample. 

@using Syncfusion.Blazor.Popups

@using Syncfusion.Blazor.Buttons

 

<EditForm id="form" Model="@_exampleModel" OnInvalidSubmit="OnInvalidSubmit" OnValidSubmit="HandleValidSubmit">

    <DataAnnotationsValidator />

         <SfDatePicker @ref="datePickerObj" TValue="DateTime?" @bind-Value="@_exampleModel.DateValue" StrictMode="true" @oninput="onInput">

         </SfDatePicker>

         @if(isValidDate ){

            <div id="ValidationMessage">Entered date is invalid</div>

         }

</EditForm>

 

@code{

    DateTime dt;

 

    SfDatePicker<DateTime?> datePickerObj { get; set; }

 

    public bool isValidDate { get; set; }

 

    public bool isFirstRender { get; set; } = false;

 

    private ExampleModel _exampleModel = new ExampleModel();

 

    public void onInput(Microsoft.AspNetCore.Components.ChangeEventArgs e)

    {

        DateTime fromDateValue;

        var formats = "M/d/yyyy";

        if (DateTime.TryParseExact(e.Value.ToString(), formats, System.Globalization.CultureInfo.InvariantCulture, System.Globalization.DateTimeStyles.None, out fromDateValue))

        {

            isValidDate = false;

        }

        else

 

        {

            isValidDate = true;

        }

    }

    public void HandleValidSubmit()

    {

 

    }

    private void OnInvalidSubmit(Microsoft.AspNetCore.Components.Forms.EditContext args)

    {

        datePickerObj.Show();

    }

 

    private bool IsVisible { get; set; } = true;

 

 

    public class ExampleModel

    {

        public DateTime? DateValue { get; set; }

    }

}

Find the sample in the attachment:

Note: If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Regards,

Sureshkumar P.

Attachment: Blazor_Date_App_5376b703.zip

[Roberto]

Hi Sureshkumar,

Is it possible for invalid characters to not show up inside the box?

[Sureshkumar P]

Hi Roberto,

As per our previous updates, we cannot have support to restrict the invalid characters from not showing up inside the box. But we can remove the invalid character entered values after focusing out the component based on previous updates. So, we suggest you use the above solutions until we provide the mask support to the datepicker component.

Regards,

Sureshkumar P