Customization

The DatePicker enables the user to render custom components instead of the default ones and, in this way, to customize most of the child DatePicker components which are otherwise inaccessible.

The user can replace the following DatePicker components with custom ones:

  • DateInput—Renders the input field in the DatePicker.
  • Calendar—Renders the Calendar inside the popup week column of the DatePicker.
  • Popup—Renders the popup which contains the Calendar.
  • ToggleButton—Render the button which toggles the show state of the DatePicker.
  • PickerWrap—Render the wrapping element around the dateInput and toggleButton.

Customizing the DateInput

The DatePicker and the DateInput components communicate through the DateInputChangeEvent. In order for the DatePicker to work correctly with any form of date selection, provide a fully working input which calls the change property.

The following example demonstrates how to replace the default DateInput component with three native <input /> elements. To enable the user only to change a property and not have full control over the rendered content, pass a modified DateInput.

<div id="vueapp" class="vue-app">
    <datepicker
        :date-input="customDateInput"

        :default-value="new Date()"
        :style="{ width: '270px' }"
        :show="true"
    ></datepicker>
</div>
import Vue from 'vue';
import { DatePicker } from '@progress/kendo-vue-dateinputs';
import { CustomDateInput } from './app/customDateInput.js';
Vue.component('datepicker', DatePicker);

new Vue({
    el: '#vueapp',
    data: function() {
        return {
            customDateInput: CustomDateInput,
            value: new Date(2017, 2, 10, 13, 30, 0)
        };
    }
});

const CustomDateInput = {
    props: {
        value: Date
    },
    methods: {
        handleChange (event) {
            const date = {
                day: this.$props.value.getDate(),
                month: this.$props.value.getMonth(),
                year: this.$props.value.getFullYear()
            };
    
            date[event.target.getAttribute('data-section')] = Number(event.target.value);
    
            const value = new Date(date.year, date.month, date.day);
    
            this.$emit('change', {
                value,
                event
            });
        }
    },
    template: `
            <div>
            <input :style="{ width: '90px'}" type="number"
             data-section="day" :value="value.getDate()"
             @change="handleChange"></input>
            <input :style="{ width: '90px'}" type="number"
             data-section="month" :value="value.getMonth()"
             @change="handleChange"  ></input>
            <input :style="{ width: '90px'}" type="number"
             data-section="year" 
             :value="value.getFullYear()" @change="handleChange"  ></input>
             </div>
    `
};

export { CustomDateInput };

Customizing the Calendar

Similar to the custom rendering of the DateInput, the DatePicker and the Calendar communicate through the CalendarChangeEvent. You can replace the Calendar with any custom component that provides a date selection and calls change with a Date value, a vue event and an event target.

The following example demonstrates how to replace the default Calendar with a Calendar from the @progress/kendo-vue-dateinputs package.

<div id="vueapp" class="vue-app">
    <datepicker
        :calendar="customCalendar"
        :show="true"
    ></datepicker>
</div>
import Vue from 'vue';
import { DatePicker } from '@progress/kendo-vue-dateinputs';
import { CustomCalendar } from './app/customCalendar.js';
Vue.component('datepicker', DatePicker);

new Vue({
    el: '#vueapp',
    data: function() {
        return {
            customCalendar: CustomCalendar
        };
    }
});
import { Calendar } from '@progress/kendo-vue-dateinputs';

const CustomCalendar = {
    props: Calendar.props,
    components: {
        Calendar
    },
    methods: {
        handleChange (event) {
            this.$emit('change', event);
        }
    },
    template: `
            <Calendar
            :min="new Date()"
            :value="this.$props.value"
            @change="handleChange"
        />
    `
};

export { CustomCalendar };

Customizing the Popup

The Popup component inside the DatePicker acts as a container element with an absolute position. The DatePicker changes the show property on clicking the Toggle button or on blur. You can control show through the DatePicker.

The following example demonstrates how to further customize the Popup—the complete overriding of the Popup is also possible.

<div id="vueapp" class="vue-app">
    <div :style="{ textAlign: 'center' }">
        <datepicker
            ref="datepicker"
            :popup="customPopup"
            ></datepicker>
    </div>
</div>
import Vue from 'vue';
import { DatePicker } from '@progress/kendo-vue-dateinputs';
import { CustomPopup } from './app/customPopup.js';

Vue.component('datepicker', DatePicker);

new Vue({
    el: '#vueapp',
    data: function() {
        return {
            customPopup: CustomPopup
        };
    }
});

import { Popup } from '@progress/kendo-vue-popup';

const CustomPopup = {
    props: {
        show: Boolean
      },
    components: {
        Popup
    },
    template: `<Popup 
        :anchor="'datepicker'"
        :show="this.$props.show"
        :anchor-align="{
            horizontal: 'center',
            vertical: 'bottom'
        }"
        :popup-align="{
            horizontal: 'center',
            vertical: 'top'
        }"
    >
    <slot/>
    </Popup>`
};

export { CustomPopup };

Customizing the Toggle Button

The ToggleButton component inside the DatePicker acts as a initial toggle button for opening the calendar, or closing it without Date selection.

The following example demonstrates how to further customize the ToggleButton by passing another icon as a child.—the complete overriding of the ToggleButton is also possible.

<div id="vueapp" class="vue-app">
    <div :style="{ textAlign: 'center' }">
        <datepicker
            :toggle-button="customToggleButton"
            ></datepicker>
    </div>
</div>
import Vue from 'vue';
import { DatePicker } from '@progress/kendo-vue-dateinputs';
import { CustomToggleButton } from './app/customToggleButton.js';

Vue.component('datepicker', DatePicker);

new Vue({
    el: '#vueapp',
    data: function() {
        return {
            customToggleButton: CustomToggleButton
        };
    }
});

import { ToggleButton } from '@progress/kendo-vue-dateinputs';

const CustomToggleButton = {
    components: {
        'toggle-button': ToggleButton
    },
    template: `
        <toggle-button @click="handleClick">
            <span class="k-icon k-i-sort-desc-sm"></span>
        </toggle-button>
    `,
    methods: {
        handleClick: function(e) {
            this.$emit('click', e);
        }
    }
};

export { CustomToggleButton };

Customizing the Picker Wrap

The PickerWrap components inside the DatePicker acts as a container around the dateInput and toggleButton. In addition, the PickerWrap applies the k-picker-wrap className which is used to apply specific styles.

The following example demonstrates how to render a DatePicker without the dateInput, customizing the component to look like a regular button which opens a Calendar for Date selection.

<div id="vueapp" class="vue-app">
    <div :style="{ textAlign: 'center' }">
        <datepicker
            :date-input="{}"
            :toggle-button="customToggleButton"
            :picker-wrap="customPickerWrap"
            ></datepicker>
    </div>
</div>
import Vue from 'vue';
import { DatePicker } from '@progress/kendo-vue-dateinputs';
import { CustomPickerWrap } from './app/customPickerWrap.js';
import { CustomToggleButton } from './app/customToggleButton.js';

Vue.component('datepicker', DatePicker);

new Vue({
    el: '#vueapp',
    data: function() {
        return {
            customPickerWrap: CustomPickerWrap,
            customToggleButton: CustomToggleButton
        };
    }
});
const CustomPickerWrap = {
    template: `
        <span>
        <slot/>
        </span>
    `
};

export { CustomPickerWrap };
const CustomToggleButton = {
    template: `<button @click="handleClick" class="k-button k-link">
                <slot/>
                Pick a Date
            </button>`,
    methods: {
        handleClick: function(e) {
            this.$emit('click', e);
        }
    }
};

export { CustomToggleButton };

In this article