BoldDesk®Help desk software offering ticketing, live chat, and omnichannel support, starting at $49/mo. for 10 agents. Try it for free.
[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>
|