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

Date Editing

The Telerik UI DateInput for ASP.NET Core exposes several configuration methods that allow you to control the behavior of the component when a user edits the date.

Auto-Switch Parts

The following example demonstrates how to enable switching to the next segment of the date automatically when a valid input is set with the AutoSwitchParts configuration method.

    @(Html.Kendo().DateInput()
        .Name("dateinput")
        .AutoSwitchParts(true)
    )
    <kendo-dateinput name="dateinput" auto-switch-parts="false">
    </kendo-dateinput>

Auto-Switch Keys

The AutoSwitchKeys configuration enables you to set up custom symbols that switch to the next segment of the date when entered.

    @(Html.Kendo().DateInput()
        .Name("dateinput")
        .AutoSwitchKeys(new string[]{"+"})
    )
    <kendo-dateinput name="dateinput" 
        auto-switch-keys='new string[] { "+" }'>
    </kendo-dateinput>

Mouse Wheel

When set to true, the EnableMouseWheel setting allows the user to change the selected date segment by scrolling the mouse wheel.

    @(Html.Kendo().DateInput()
        .Name("dateinput")
        .EnableMouseWheel(true)
    )
    <kendo-dateinput name="dateinput" 
        enable-mouse-wheel="true">
    </kendo-dateinput>

Auto-Correct

The AutoCorrect configuration turns on or off auto-correct of the date segments.

    @(Html.Kendo().DateInput()
        .Name("dateinput")
        .AutoCorrect(true)
    )
    <kendo-dateinput name="dateinput" auto-correct="true">
    </kendo-dateinput>

Steps

The following example demonstrates how to configure the step change for each date segment when the user navigates with the mouse wheel or the keyboard arrows. Based on the preferred format of the DateInput's date, the available Step configurations are Year, Month, Day, Minute, Second, and Millisecond.

    @(Html.Kendo().DateInput()
        .Name("dateinput")
        .Steps(steps=>{
            steps.Year(4);
            steps.Month(6);
            steps.Day(14);
        })
    )
    <kendo-dateinput name="dateinput">
        <steps year="4" month="6" day="14" />
    </kendo-dateinput>

See Also

In this article