Skip to content

Files

Latest commit

 

History

History
49 lines (40 loc) · 1.66 KB

date-ranges-formats.md

File metadata and controls

49 lines (40 loc) · 1.66 KB
title page_title description slug canonicalLink position
Date Ranges and Formats
Date Ranges and Formats - DateTimePicker - Kendo UI for Vue
Set the date ranges and the format in which the Kendo UI DateTimePicker wrapper for Vue renders them.
daterangesformats_datetimepicker_wrapper
3

Date Ranges and Formats

The DateTimePicker enables you to set date ranges and formats.

To configure the date ranges, use the min and max properties. To set the date and time formats, use the format property.

{% meta height:450 %} {% embed_file datetimepicker/ranges/main.vue preview %} {% embed_file datetimepicker/ranges/main.js %} {% endmeta %}

The following example demonstrates how to configure the date format for the time view.

<div id="vueapp" class="vue-app">
   <kendo-datetimepicker :value="currentDate"
                          :format="'yyyy/MMMM/dd hh:mm'"
                          :time-format="'(hh:mm)'"
                          style="width: 250px">
    </kendo-datetimepicker>
</div>

Vue.use(DateinputsInstaller);
new Vue({
    el: '#vueapp',
    data: {
        minDate: new Date(2018, 9, 1),
        maxDate: new Date(2018, 10, 1),
        currentDate: new Date(2018, 9, 15)
    }
})

Suggested Links