Search results

Disable the DateRangePicker Component in Vue DateRangePicker component

24 May 2022 / 1 minute to read

DateRangePicker can be inactivated on a page, by setting enabled value as false that will disable the component completely from all the user interactions including in form post. The following example demonstrates the disabled component.

Source
Preview
app.vue
Copied to clipboard
<template>
    <div id="app">
      <div class='wrapper'>
        <ejs-daterangepicker :enabled="enable" :placeholder="waterMark"></ejs-daterangepicker>
      </div>
    </div>
</template>
<script>
import Vue from 'vue';
import { DateRangePickerPlugin } from '@syncfusion/ej2-vue-calendars';

Vue.use(DateRangePickerPlugin);
export default {
   data () {
        return {
            waterMark:'Select a Range',
            enable : false

        }
    }
}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
 .wrapper {
    max-width: 250px;
    margin: 0 auto;
  }
</style>