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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Validation of DatePicker component

Thread ID:

Created:

Updated:

Platform:

Replies:

142807 Feb 20,2019 01:59 PM UTC Mar 1,2019 01:13 PM UTC React - EJ 2 3
loading
Tags: DatePicker
TOKO FIDELE
Asked On February 20, 2019 01:59 PM UTC

hello, 
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,   

Deepa Loganathan [Syncfusion]
Replied On February 26, 2019 05:42 AM UTC

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; 
         console.log(difference); 
       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) => { 
                inputElement.parentElement.parentElement.appendChild(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.  
 
 
Regards,  
Deepa L. 


TOKO FIDELE
Replied On March 1, 2019 11:28 AM UTC

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,   

Deepa Loganathan [Syncfusion]
Replied On March 1, 2019 01:13 PM UTC

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. 
 
 
 
 
Regards, 
 
Deepa L.
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon