Set the readonly in Vue Datepicker component

28 Feb 20231 minute to read

The following example demonstrates how to set readonly in DatePicker component. You can achieve this by using readonly property.

app.vue

<template>
  <div id="app">
        <div class='wrap'>
           <ejs-datepicker id='date' placeholder="Select Date" :readonly='read' :value='dateval'></ejs-datepicker>
        </div>
  </div>
</template>
<script>
import Vue from "vue";
import { DatePickerPlugin } from "@syncfusion/ej2-vue-calendars";

Vue.use(DatePickerPlugin);
export default {
    data () {
        return{
            dateval: new Date(),
            read: true
        }
    }
}
</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>