Incremental Steps

By default, the DateInput increments or decrements each part of its date values by one step.

To change the default setup, use the steps property.

The available options are:

  • year: Number—Controls the incremental step of the year value.
  • month: Number—Controls the incremental step of the month value.
  • day: Number—Controls the incremental step of the day value.
  • hour: Number—Controls the incremental step of the hour value.
  • minute: Number—Controls the incremental step of the minute value.
  • second: Number—Controls the incremental step of the second value.
<div id="vueapp" class="vue-app">
    <div>
                <div class="col-xs-12 col-sm-6 example-col">
                    <p>Incremental steps:</p>
                    <p  v-for="step in Object.keys(steps)" :key="step">
                    {{step}} - {{steps[step]}}
                    </p>
                    <dateinput
                        :format="'MM/dd/yyyy hh:mm a'"
                        :steps="steps"
                        v-model="value"
                    />
                </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),
            steps: { year: 10, day: 5, hour: 2, minute: 15 }
        };
    }
});

In this article