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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Use FormValidator on DateRangePicker

Thread ID:

Created:

Updated:

Platform:

Replies:

142634 Feb 12,2019 10:04 PM UTC Feb 14,2019 10:37 AM UTC Vue 1
loading
Tags: DateRangePicker
Dan Johnson
Asked On February 12, 2019 10:04 PM UTC

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.

Christopher Issac Sunder K [Syncfusion]
Replied On 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.  

[index.vue

<template> 
    <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> 
                </div> 
            </div> 
        </form> 
    </div> 
</template> 
<script> 
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"; 
 
Vue.use(DateRangePickerPlugin); 
export default { 
  mounted() { 
      var options = { 
      rules: { 
        date: { required: true } 
      }, 
      customPlacement: function(element, errorElement) { 
        document.querySelector(".error-element").appendChild(errorElement); 
      }, 
    }; 
     // defines FormValidator to validate the dateRangePickerPicker 
        var formObject = new FormValidator("#form-element", options); 
  } 
} 
</script> 
 

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. 

Thanks, 
Christo

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

;