1. Home
  2. Forum
  3. Blazor
  4. Masked DatePicker

Masked DatePicker

Hi,

is it possible to set an input-mask on the datepicker-control?
I need to get a masked input with _ _._ _._ _ _ _  or _ _/_ _/_ _ _ _

Or is it possible to exchange the input textfield?

Kind regards

13 Replies 1 reply marked as answer
SP Sureshkumar P Syncfusion Team August 11, 2020 07:59 AM UTC

Hi Timo,  
  
We have checked with your query for enabling mask for the DatePicker component input control to restrict the date entry based on the format. At present, we are not providing the masking support for the DatePicker. We have already considered to provide this feature in any of our upcoming releases. We appreciate your patience until then.     
    
You can also track the details regarding this feature with our Feedback portal from the below link.  
  
  
Regards,  
Sureshkumar P 


CH Christian September 19, 2020 05:03 PM UTC

I got a note that this feature is now available. How do we use it within Blazor?

SP Sureshkumar P Syncfusion Team September 21, 2020 09:06 AM UTC

Hi Christian, 
 
Thanks for your update. 
 
We have achieved the Datepicker mask requirement in Blazor platform by using js interop. Please find the sample in the below link. 
 
 
Regards, 
Sureshkumar P 


Marked as answer
WM Walter Martin December 1, 2020 07:33 AM UTC

Hello
the last sample works but how can I get the date value ?
I changed the source using a @ref inside the SfMaskedTextBox  and then I used TxTstart.Value inside the Button click, but what I have is a string like "01122020"
Do I have to split it manually ? Or can I get the date value from the calendar built below the input tag ?

<input id="datepicker" style="padding-left:15px;" />
        <SfMaskedTextBox @ref="TxTstart" ID="@MaskId" Mask="@Mask" Created="OnMaskInitialized" Width="300"></SfMaskedTextBox>

<SfButton OnClick="PdfExport" Content="Pdf Export"></SfButton>
@code {
 SfMaskedTextBox TxTstart;
public void OnMaskInitialized()
    {
        this.JSRuntime.InvokeVoidAsync("onMaskInitialized", "" + this.DatepickerID, "" + this.MaskId);
    }
public async Task PdfExport()
    {
        TxTstart.Value //here it's a string, not a date and without the "/" so difficult to split
        await Grigliapdf.PdfExport();
    }
}

BC Berly Christopher Syncfusion Team December 2, 2020 04:02 PM UTC

Hi Walter, 

We can get the date value which is entered in the DatePicker input with help of public method of the MaskedTextBox component called “GetMaskedValue”. Please refer the below code example.  


<input id="datepicker" /> 
<SfMaskedTextBox @ref="TxTstart" ID="@MaskId" Mask="@Mask" Created="OnMaskInitialized"></SfMaskedTextBox> 
 
<SfButton @onclick="@PdfExport" Content="Pdf Export"></SfButton> 
 
@code { 
    SfMaskedTextBox TxTstart; 
    public string DatepickerID = "date"; 
    public string MaskId = "mask"; 
    public string Mask = "[0-1][0-9]/[0-3][0-9]/[1-2][0-9][0-9][0-9]"; 
 
    public void OnMaskInitialized() 
    { 
        this.JSRuntime.InvokeVoidAsync("onMaskInitialized", "" + this.DatepickerID, "" + this.MaskId); 
    } 
    public async Task PdfExport() 
    { 
        var dateValue = await this.TxTstart.GetMaskedValue(); 
 
    } 
 
} 

  

  
Regards, 
Berly B.C

WM Walter Martin December 10, 2020 09:20 PM UTC

Thanks, your solution works.
How is it possible to show the calendar in Italian language ? In my web application I'm using the sfResources.it.resx file successfully to translate all the components in Italian but this calendar is showed in English

VS Vignesh Srinivasan Syncfusion Team December 14, 2020 10:10 AM UTC

Hi Walter, 
 
We have created calendar component with Italian culture in Blazor platform. Please find the sample in below link. 
 
 
Please refer the documentation link below for your reference. 
 
 
Kindly check with the above sample. Please get back us if you need further assistance. 
 
Regards, 
 
Vignesh Srinivasan. 


WM Walter Martin December 16, 2020 03:50 PM UTC

Hello Vignesh
the problem was not in the sfcalendar.

I was already using the sfcalendar successfully in italian language using the resources files (as you showed me in your sample) but in the sfcalendar, there's no option to mask the input in the way I need: __/__/__
For this reason you suggested me the right way using the sfmaskedtextbox with the use of some script lines, but the calendar showed in this way, has the sentences in English, so, is there a way to use the sfcalendar in italian but together with a masked option or to use the sfmaskedtextbox with a calendar in Italian language?


VS Vignesh Srinivasan Syncfusion Team December 17, 2020 06:57 AM UTC

Hi Walter, 
 
We would like to inform you that, we have planned for the mask support feature at our end, which does not allow the DatePicker component to enter an invalid date. Your requirement can be achieved with the required validation once it has been implemented.  
 
The feature will be included in any of the upcoming releases. Now you can track the status on the feedback link below.  
 
 
Regards, 
 
Vignesh Srinivasan.        
 


RB Rodrigo Bernardi replied to Berly Christopher August 24, 2022 09:15 PM UTC

Hello syncfusion team, I did some tests with this example you provided, but this solution only works up to version 18.3.0.53 because in the latest versions it doesn't bring the code for the "ej2_instances" property in javascript.

Can you give me another solution?



UD UdhayaKumar Duraisamy Syncfusion Team August 25, 2022 12:38 PM UTC

Hi Rodrigo,


We have created tha sample for the requested requirement and shared it below for reference.


Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Datepicker-514166914


Kindly try the above sample and let us know if this meets your requirement.


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


Regards,

Udhaya Kumar D


RB Rodrigo Bernardi August 25, 2022 07:51 PM UTC

Hello syncfusion team,


The solution worked.


Thanks.


UD UdhayaKumar Duraisamy Syncfusion Team August 26, 2022 05:06 AM UTC

Hi Rodrigo,


We are glad that your requirement has been fulfilled on your end. We are always happy to assist you.


Regards,

Udhaya Kumar D


Loader.
Up arrow icon