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.

Composition API (~/src/App.vue)

<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>

Options API (~/src/App.vue)

<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>