Formats

You can control the format of the DateInput by using the format property, which accepts string parameters.

By default, the format property is set to 'd'. For more information on the date and number formats Kendo UI for Vue supports, refer to the kendo-intl GitHub repository.

<div id="vueapp" class="vue-app">
      <div class="example-wrapper">
                <div class="col-xs-12 col-sm-6 example-col">
                    <p>Select a long date:</p>
                    <dateinput
                        :format="'dd-MMM-yyyy HH:mm:ss'"
                        v-model="value"
                    ></dateinput>
                </div>
                <div class="col-xs-12 col-sm-6 example-col">
                    <p>Select a short date:</p>
                    <dateinput
                        :format="'MMMM yyyy'"
                        v-model="value"
                    ></dateinput>
                </div>
                <div class="col-xs-12 col-sm-6 example-col">
                    <p>Custom Skeleton:</p>
                    <dateinput
                        :format="{
                            skeleton: 'yMMMdEHm'
                        }"
                        v-model="value"
                     ></dateinput>
                </div>
                <div class="col-xs-12 col-sm-6 example-col">
                    <p>Custom Format:</p>
                    <dateinput
                        :format='{
                            year: "numeric", 
                            month: "short" 
                        }'
                        v-model="value"
                     ></dateinput>
            </div>
        </div>
</div>
import { DateInput } from '@progress/kendo-vue-dateinputs';
Vue.component('dateinput', DateInput);

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

In this article