Having trouble getting help?
Contact Support
Contact Support
Disabled the datepicker component in Vue Datepicker component
11 Jun 20242 minutes to read
To disable the DatePicker, use its enable
property.
The following example demonstrates the DatePicker in a disabled state.
<template>
<div id="app">
<div class='wrap'>
<ejs-datepicker id='date' :enabled="enable"></ejs-datepicker>
</div>
</div>
</template>
<script setup>
import { DatePickerComponent as EjsDatepicker } from "@syncfusion/ej2-vue-calendars";
const 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-vue-calendars/styles/material.css";
.wrap {
margin: 35px auto;
width: 240px;
}
</style>
<template>
<div id="app">
<div class='wrap'>
<ejs-datepicker id='date' :enabled="enable"></ejs-datepicker>
</div>
</div>
</template>
<script>
import { DatePickerComponent } from "@syncfusion/ej2-vue-calendars";
export default {
name: "App",
components: {
"ejs-datepicker": DatePickerComponent
},
data() {
return {
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-vue-calendars/styles/material.css";
.wrap {
margin: 35px auto;
width: 240px;
}
</style>