We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Validation of DatePicker component

I have two problems with the DatePicker Component
1: Prohibit the seizure of the user and authorize the opening of the popup not only to click on the econ but also to the focus or click on the component.
2: Validate only dates between 18 and 70 years old. knowing that at the opening of the popup we have the date of the day. in other words, is there a date interval validation rule?

Thanks in advance and regards,   

5 Replies

DL Deepa Loganathan Syncfusion Team February 26, 2019 12:42 AM

Hi Toko,  
Thanks for contacting Syncfusion support.  
We understood your requirement to validate the Datepicker input to ensure if the date is selected in Datepicker input and if the selected Date falls in the range of 18 to 70 years. 
This can be achieved by using our built-in form validator library by adding custom range validation as given in the below code.  
<DatePickerComponent name="date" ref={calendar => this.datepickerInstance = calendar}  
 blur={this.onFocusOut.bind(this)} change={this.onChange.bind(this)}></DatePickerComponent> 
rendereComplete() {  
     var customFn = function() { 
       this.todayDate = new Date().getFullYear(); 
       this.valueYear = this.datepickerInstance.value.getFullYear() 
         let difference = this.todayDate - this.valueYear; 
       if(this.valueYear <= this.todayDate){ 
      console.log(18 < difference && 70 > difference) 
         return ( 18 <= difference && 70 >= difference); 
        this.formValidator = { 
            // Defines the validation rules 
            rules: { 
                'date': { 
                    required: [true, 'Value is required !'] 
          // Custom validation takes place when value is changed. 
            customPlacement: (inputElement, errorElement) => { 
        this.formObject = new FormValidator('#formTemp', this.formValidator); 
        this.formObject.addRules('date', { 
            range: [customFn.bind(this), "Please select a date range of 18 to 70 years from current Date."] 
        this.formObject = new FormValidator('#formTemp', this.formValidator); 
We have prepared a simple sample based on your requirement. Please check the below link.  
Deepa L. 

TF TOKO FIDELE March 1, 2019 06:28 AM

Hello Deepa Loganathan.

thank you for your prompt reply. it fully satisfies my request 2. however I would like to my request 1 can open the popup of the component DatePicker to click on the field and prevent the user to enter the date on the keyboard.

Thanks in advance and regards,   

DL Deepa Loganathan Syncfusion Team March 1, 2019 08:13 AM

Hi Toko, 
You can achieve this requirement to disable editing in Datepicker by disabling AllowEdit API of Datepicker to false as given in the below code. 
 <DatePickerComponent name="date" ref={calendar => this.datepickerInstance =  
calendar}  blur={this.onFocusOut.bind(this)}  change= {this.onChange.bind(this)} allowEdit={false}></DatePickerComponent> 
Please find the edited sample for your reference. 
However, there is a known issue in Datepicker – Clear icon will not show up when allow editing is disabled. We have already considered this an issue and the fix for this will be included in upcoming Volume 1 release tentatively scheduled for roll out in the second week of March.  
We suggest you go through our below help pages to explore more about Datepicker component. 
Deepa L.

SA Sabyasachi December 14, 2021 06:11 AM

Thanks a lot. THis is very helpful. I had the same problem!!

BC Berly Christopher Syncfusion Team December 15, 2021 01:02 AM

Hi Sabyasachi, 
We are glad to know that the issue is resolved in your end. Please let us know if you need further assistance on this. 
Berly B.C 

Live Chat Icon For mobile
Up arrow icon