Native Components / Date Inputs / DateInput

Floating Labels

Floating labels are part of the Material Design Guidelines and are fully supported by the Kendo UI for Vue Date Inputs components.

Basic Usage

To enable the floating label functionality, pass the label property to the Inputs component.

The following example demonstrates how to implement floating labels in the DateInput components and style them with the Kendo UI for Vue Material theme.

<div id="vueapp" class="vue-app">
    <div class="row">
        <div class="m-3">
            <p>DateInput</p>
            <dateinput
                :placeholder="''"
                :label="'Expected Hiring Date'" 
            >
            </dateinput>
        </div>
    </div>
</div>
import { DateInput } from '@progress/kendo-vue-dateinputs';
Vue.component('dateinput', DateInput);

new Vue({
    el: '#vueapp'
});

In this article