Forms Support

The Vue DatePicker component supports a native Kendo UI for Vue implementation of HTML5 form validation.

The forms supports enables you to validate input values and prevent the submission of forms which are in an invalid state.

Functionality and Features

Setting Validation Requirements

The DatePicker supports props for setting basic validation requirements—for example, the minimum and maximum date. The min, max, and required properties enable the user to pre-define minimum requirements which define the validity state of the component and allow a successful form submission.

<div id="vueapp" class="vue-app">
<div class="row example-wrapper">
    <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
        <div class="card">
            <div class="card-block">
                <form class="k-form" @submit="handleSubmit">
                    <fieldset>
                        <legend>Please select dates of your stay:</legend>
                        <label class="k-form-field">
                            <span>Check-In</span>
                            <datepicker
                                :style="{ width: '100%' }"
                                :name="'checkin'"
                                :required="true"
                                :min="today"
                            ></datepicker>
                        </label>
                        <label class="k-form-field">
                            <span>Check-Out</span>
                            <datepicker
                                :style="{ width: '100%' }"
                                :name="'checkout'"
                                :required="true"
                                :min="today"
                            />
                        </label>
                    </fieldset>
                    <input type="submit" class="k-button k-primary" value="Search"
                     ></input>
                </form>
            </div>
        </div>
    </div>
        <div v-if="success"
            class="alert alert-success"
            :style="{ position: 'absolute' }"
        >
            Form submitted!
        </div>
</div>
</div>
import Vue from 'vue';
import { DatePicker } from '@progress/kendo-vue-dateinputs';
Vue.component('datepicker', DatePicker);

new Vue({
    el: '#vueapp',
    data: function() {
        return {
            success: false,
            today: new Date()
        };
    },
    methods: {
        handleSubmit (event) {
            event.preventDefault();
            this.success = true;
            setTimeout(
                () => { 
                    this.success= false; 
                }, 
                3000);
        }
    }
});

Setting Custom Validation Messages

You can implement custom error messages which will be displayed when the DatePicker is in an invalid state and the user tries to submit the form. To render a custom validation message, set the validationMessage prop.

<div id="vueapp" class="vue-app">
    <div class="row example-wrapper">
        <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
            <div class="card">
                <div class="card-block">
                    <form class="k-form" @submit="handleSubmit">
                        <fieldset>
                            <legend>Please select dates of your stay:</legend>
                            <label class="k-form-field">
                                <span>Check-In</span>
                                <datepicker
                                    :style="{ width: '100%' }"
                                    :name="'checkin'"
                                    :default-value="new Date(2018, 1, 20)"
                                    :required="true"
                                    :min="today"
                                    :validation-message="checkInValidationMessage"
                                ></datepicker>
                            </label>
                            <label class="k-form-field">
                                <span>Check-Out</span>
                                <datepicker
                                    :style="{ width: '100%' }"
                                    :name="'checkout'"
                                    :required="true"
                                    :min="today"
                                    :validation-message="checkOutValidationMessage"
                                />
                            </label>
                        </fieldset>
                        <input type="submit" class="k-button k-primary" value="Search" />
                    </form>
                </div>
            </div>
        </div>
        <div v-if="success"
            class="alert alert-success"
            :style="{ position: 'absolute' }"
        >
            Form submitted!
        </div>
    </div>
</div>
import Vue from 'vue';
import { DatePicker } from '@progress/kendo-vue-dateinputs';
Vue.component('datepicker', DatePicker);

new Vue({
    el: '#vueapp',
    data: function() {
        return {
            success: false,
            today: new Date(),
            checkInValidationMessage: "Dates in the past are not valid Check-In dates.",
            checkOutValidationMessage: "The Check-Out date is required."
        };
    },
    methods: {
        handleSubmit (event) {
            event.preventDefault();
            this.success= true ;
            setTimeout(() => { this.success= false; }, 3000);
        }
    }
});

Enforcing the Validity State

The DatePicker enables you to set its validity state by utilizing its props. Setting the validity state allows for the implementation of complex validation scenarios that are based on multiple sources. To override the current validity state and apply the corresponding styles, use the valid prop.

<div id="vueapp" class="vue-app">
    <div class="row example-wrapper">
        <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
            <div class="card">
                <div class="card-block">
                    <form class="k-form"  @submit="handleSubmit">
                        <fieldset>
                            <legend>Please select dates of your stay:</legend>
                            <label class="k-form-field">
                                <span>Check-In</span>
                                <datepicker
                                    :style="{ width: '100%' }"
                                    :name="'checkin'"
                                    :required="true"
                                    :format="'dd-MMM-yyyy'"
                                    :min="today"
                                    :value="checkin"
                                    @change='handleChange'
                                    :validation-message="checkin === null
                                        ? 'Check-In date is required!'
                                        : 'Check-In date cannot be in the past!'"
                                ></datepicker>
                            </label>
                            <label class="k-form-field">
                                <span>Check-Out</span>
                                <datepicker
                                    :style="{ width: '100%' }"
                                    :name="'checkout'"
                                    :required="true"
                                    :format="'dd-MMM-yyyy'"
                                    :valid="(checkin !== null && checkout !== null)
                                        && (checkin.getTime() < checkout.getTime())"

                                    :value="checkout"
                                    @change="handleChange"
                                    :validation-message="checkout === null
                                        ? 'Check-Out date is required!'
                                        : 'Check-Out date cannot be before Check-In date!'"
                                ></datepicker>
                            </label>
                            <label class="k-form-field">
                                <span>Additional Comments</span>
                                <textarea
                                    class="k-textarea"
                                    :style="{ width: '100%' }"
                                    :name="'additionalComments'"
                                    :value="additionalComments"
                                    @change="handleChange"
                                ></textarea>
                            </label>
                        </fieldset>
                        <input type="submit" class="k-button k-primary" value="Search" />
                    </form>
                </div>
            </div>
        </div>
        <div v-if="success"
            class="alert alert-success"
            :style="{ position: 'absolute' }"
        >
            Form submitted!
        </div>
    </div>
</div>
import Vue from 'vue';
import { DatePicker } from '@progress/kendo-vue-dateinputs';
Vue.component('datepicker', DatePicker);

new Vue({
    el: '#vueapp',
    data: function() {
        return {
            checkin: null,
            checkout: null,
            additionalComments: '',
            success: false,
            today: new Date()
        };
    },
    methods: {
        handleChange (event) {
            this[event.target.name]= event.target.value;
        },
        handleSubmit (event) {
            event.preventDefault();
            this.success= true;
            setTimeout(() => { this.success = false; }, 3000);
        }
    }
});

Disabling the Validation Styling

By default, to achieve a visual representation of its invalid state, the DatePicker applies the k-state-invalid class name to the wrapping component. To disable the utilization of k-state-invalid, set the validityStyles property to false.

<div id="vueapp" class="vue-app">
    <div class="row example-wrapper">
        <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
            <div class="card">
                <div class="card-block">
                    <form class="k-form" @submit="handleSubmit">
                        <fieldset>
                            <legend>Please select dates of your stay:</legend>
                            <label class="k-form-field">
                                <span>Check-In</span>
                                <datepicker
                                    :style="{ width: '100%' }"
                                    :name="'checkin'"
                                    :required="true"
                                    :format="'dd-MMM-yyyy'"
                                    :min='today'
                                    :value='checkin'
                                    @change='handleChange'
                                    :validation-message="checkin === null
                                        ? 'Check-In date is required!'
                                        : 'Check-In date cannot be in the past!'"
                                ></datepicker>
                            </label>
                            <label class="k-form-field">
                                <span>Check-Out</span>
                                <datepicker
                                    :style="{ width: '100%' }"
                                    :validity-styles="false"
                                    :name="'checkout'"
                                    :required="true"
                                    :format="'dd-MMM-yyyy'"
                                    :valid="(checkin !== null && checkout !== null)
                                        && (checkin.getTime() < checkout.getTime())"
                                    :value='checkout'
                                    @change="handleChange"
                                    :validation-message="checkout === null
                                        ? 'Check-Out date is required!'
                                        : 'Check-Out date cannot be before Check-In date!'"
                                ></datepicker>
                            </label>
                            <label class="k-form-field">
                                <span>Additional Comments</span>
                                <textarea
                                    class="k-textarea"
                                    :style="{ width: '100%' }"
                                    :name="'additionalComments'"
                                    :value="additionalComments"
                                    @change="handleChange"
                                ></textarea>
                            </label>
                        </fieldset>
                        <input type="submit" class="k-button k-primary" value="Search" />
                    </form>
                </div>
            </div>
        </div>
        <div v-if="success"
            class="alert alert-success"
            :style="{ position: 'absolute' }"
        >
            Form submitted!
        </div>
    </div>
</div>
import Vue from 'vue';
import { DatePicker } from '@progress/kendo-vue-dateinputs';
Vue.component('datepicker', DatePicker);

new Vue({
    el: '#vueapp',
    data: function() {
        return {
            checkin: new Date(2022, 1, 20),
            checkout: null,
            additionalComments: '',
            success: false,
            today: new Date()
        };
    },
    methods: {
        handleChange (event) {
            this[event.target.name]= event.target.value;
        },
        handleSubmit (event) {
            event.preventDefault();
            this.success = true;
            setTimeout(() => { this.success = false; }, 3000);
        }
    }
});

In this article