Set the readonly in Vue Datepicker component

11 Jun 20242 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>