The DateTimePicker is available for UI customization that can be achieved by using available properties and events in the component.
The DateTimePicker is available for UI customization based on your application requirements.
It can be achieved by using renderDayCell
event that provides an option to customize each day cell on rendering.
The following example disables the weekends of every month by using renderDayCell
event.
<template>
<div id="app">
<div class='wrapper'>
<ejs-datetimepicker :renderDayCell="disableDate" :placeholder="waterMark"></ejs-datetimepicker>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { DateTimePickerPlugin } from '@syncfusion/ej2-vue-calendars';
Vue.use(DateTimePickerPlugin);
export default {
data () {
return {
waterMark : 'Select a date and time'
}
},
methods: {
disableDate: function(args) {
if (args.date.getDay() === 0 || args.date.getDay() === 6) {
args.isDisabled = 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-lists/styles/material.css';
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
.wrapper {
max-width: 250px;
margin: 0 auto;
}
</style>
You can add a mandatory asterisk(*)
to placeholder and float label using .e-input-group.e-control-wrapper.e-float-input .e-float-text::after class.
<template>
<div id="app">
<div class='wrapper'>
<ejs-datetimepicker :placeholder="Select Date" :floatLabelType="auto"></ejs-datetimepicker>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { DateTimePickerPlugin } from '@syncfusion/ej2-vue-calendars';
Vue.use(DateTimePickerPlugin);
export default {
data () {
return {
waterMark : 'Select a datetime'
}
}
}
</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-lists/styles/material.css';
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
.wrapper {
max-width: 250px;
margin: 0 auto;
}
.e-input-group.e-control-wrapper.e-float-input .e-float-text::after {
content: '*';
color: red;
}
</style>