How To

The following section explains how the DatePicker can be easily customizable in various aspects.

Disabled State

To disable the DatePicker, use its enable property.

The following example demonstrates the DatePicker in a disabled state.

Source
Preview
app.vue
<template>
  <div id="app">
        <div class='wrap'>
           <ejs-datepicker id='date' :enabled="enable"></ejs-datepicker>
        </div>
  </div>
</template>
<script>
import Vue from "vue";
import { DatePickerPlugin } from "@syncfusion/ej2-vue-calendars";

Vue.use(DatePickerPlugin);
export default {
    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>

Set the placeholder

The following example demonstrates how to set placholder in the DatePicker component.

Using placeholder you can display a short hint in the input element.

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

Vue.use(DatePickerPlugin);
export default {
}
</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>

Set the readonly

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

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

Prevent the popup close

To prevent the DatePicker popup from closing, use the preventDefault method from the PreventableEventArgs.

The following example demonstrates how to prevent the popup from closing.

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

Vue.use(DatePickerPlugin);
export default {
    methods:{
        onClose: function(args){
            args.preventDefault();
        }
    }
    data () {
        return{
            dateval: new Date()
        }
    }
}
</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>

Client side validation

To achieve the client side validation in a DatePicker component by using Essential JavaScript 2 FormValidator. It provides an option to customize the feedback error messages to the corresponding fields to take action to resolve the issue.

In this below example, the required field validation is implemented by mapping the name attribute value to the rules property. It will validate the DatePicker component and display the validation message when the textbox value is empty during form post back or focus out.

Source
Preview
app.vue
<template>
  <div id="app">
    <div class='wrap'>
      <form id="form-element" class="form-horizontal">
        <div class="form-group">
        <div class="col-sm-3 control-label">Required</div>
          <div class="col-sm-6">
            <ejs-datepicker id="datepicker" name="date" class="form-control" placeholder='Select a date'></ejs-datepicker>
          </div>
         </div>
      </form>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { DatePickerPlugin } from "@syncfusion/ej2-vue-calendars";
import { FormValidator, FormValidatorModel } from '@syncfusion/ej2-inputs';

Vue.use(DatePickerPlugin);
export default {
  data () {
    // sets required property in the FormValidator rules collection
    var options = {
        rules: {
            'date': { required: true },
        },
    };
    // defines FormValidator to validate the TimePicker
    var formObject = new FormValidator('#form-element', options);

    // places error label outside the TimePicker using the customPlacement event of FormValidator

    formObject.customPlacement = function (element, errorElement) {
        element.parentNode.appendChild(errorElement);
    };
    return {}
  },

}
</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-inputs/styles/material.css";
 .wrap {
    margin: 0 auto;
    width: 240px;
}
</style>