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

Use FormValidator on DateRangePicker

Any guidance on how to use the DateRangePicker with the FormValidator?  Binding to value on the component does not seem to apply changes to the underlying value which leaves startDate and endDate to bind too, but I can't find a way to line up the name of the validation rule with the component given that it is 2 properties.

1 Reply

CI Christopher Issac Sunder K Syncfusion Team February 14, 2019 10:37 AM UTC

Hi Dan, 

Thank you for contacting Syncfusion support. 

To use the form validator with DateRangePicker component, We have prepared the sample based on your requirement. Please refer the below code example to use the DateRangePicker with form validator.  


    <div class="wrap"> 
        <form id="form-element" class="form-horizontal"> 
            <div class="form-group"> 
                <div class="col-sm-3 control-label">Select Range</div> 
                <div class="col-sm-6"> 
                    <ejs-daterangepicker id="daterangepicker" width="450px" name="date" class="form-control" placeholder="Select a range"></ejs-daterangepicker> 
                    <div class="error-element"></div> 
import Vue from 'vue'; 
import { DateRangePickerPlugin } from '@syncfusion/ej2-vue-calendars'; 
import { FormValidator } from "@syncfusion/ej2-vue-inputs"; 
import { queryParams } from "@syncfusion/ej2-base"; 
import { throws } from "assert"; 
export default { 
  mounted() { 
      var options = { 
      rules: { 
        date: { required: true } 
      customPlacement: function(element, errorElement) { 
     // defines FormValidator to validate the dateRangePickerPicker 
        var formObject = new FormValidator("#form-element", options); 

Please check the sample from the below link. 

To know more about form validator in the Vue platform, please refer the below UG documentation link. 

Note: Please download and extract the sample from the above link. And run the command “npm install” to install the required packages and “npm run dev” command to launch the sample in the browser.  

Please let us know if you require any further assistance. 


Live Chat Icon For mobile
Up arrow icon