New to Telerik UI for ASP.NET Core? Download free 30-day trial

Floating Label

A floating label is a placeholder text for form or input fields, which floats above that field and remains visible once the user starts interacting with that field.

To implement a floating label in the Telerik UI DateTimePicker for ASP.NET Core, define it either as a string or from a function handler.

The following example demonstrates how to set the floating label as a string:

    @(Html.Kendo().DateTimePicker()
            .Name("datetimepicker")
            .Label(label => {
                label.Content("Remind me on");
                label.Floating(true);
            })
            .HtmlAttributes(new { style = "width: 100%", title = "datetimepicker" })
    )
    <kendo-datetimepicker name="datetimepicker" title="datetimepicker" style="width:100%">
        <label content="Remind me on" floating="true" />
    </kendo-datetimepicker>

The following example demonstrates how to set the floating label from a function handler:

    @(Html.Kendo().DateTimePicker()
            .Name("datetimepicker")
            .Label(label => {
                label.ContentHandler("contentHandler");
                label.Floating(true);
            })
            .HtmlAttributes(new { style = "width: 100%", title = "datetimepicker" })
    )

    <script>
        function contentHandler(){
            return "Remind me on";
        }
    </script>
    <kendo-datetimepicker name="datetimepicker" title="datetimepicker" style="width:100%">
        <label content-handler="contentHandler" floating="true" />
    </kendo-datetimepicker>

    <script>
        function contentHandler(){
            return "Remind me on";
        }
    </script>

See Also

In this article