How to set readonly in Vue DatePicker

21 Aug 20262 minutes to read

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

Composition API (~/src/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 setup>

import { DatePickerComponent as EjsDatepicker } from "@syncfusion/ej2-vue-calendars";

const dateval = new Date();
const 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>

Options API (~/src/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 { DatePickerComponent } from "@syncfusion/ej2-vue-calendars";

export default {
    name: "App",
    components: {
        "ejs-datepicker": DatePickerComponent
    },
    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>