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>