You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The {{ site.product }} DateTimePicker allows you to specify the time interval between the values in the time view of the popup list.
12
+
13
+
Depending on the [Component Type](% slug htmlhelpers_componenttype_timepicker_aspnetcore %), you can set the interval in two distinct ways.
14
+
15
+
## Setting the Interval in Classic Render Mode
16
+
17
+
When the [`ComponentType()`](https://docs.telerik.com/{{ site.platform }}/api/kendo.mvc.ui.fluent/datetimepickerbuilder#componenttypesystemstring) method is set to `classic`, the interval is specified in minutes (numeric values).
18
+
19
+
```HtmlHelper
20
+
@(Html.Kendo().DateTimePicker
21
+
.Name("datetimepicker")
22
+
.ComponentType("classic")
23
+
.Interval(7)
24
+
)
25
+
```
26
+
{% if site.core %}
27
+
```TagHelper
28
+
<kendo-datetimepicker name="datetimepicker"
29
+
component-type="classic"
30
+
interval="7">
31
+
</kendo-datetimepicker>
32
+
```
33
+
{% endif %}
34
+
35
+
When the `ComponentType()` is set to `classic`, the interval does not accept an object of hours, minutes, and seconds.
36
+
37
+
## Setting the Interval in Modern Render Mode
38
+
39
+
When the [`ComponentType()`](https://docs.telerik.com/{{ site.platform }}/api/kendo.mvc.ui.fluent/datetimepickerbuilder#componenttypesystemstring) method is set to `modern`, the interval is specified as an object of hours, minutes, and seconds.
Copy file name to clipboardExpand all lines: docs-aspnet/html-helpers/editors/datetimepicker/overview.md
+4-1Lines changed: 4 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -10,7 +10,7 @@ position: 0
10
10
# {{ site.framework }} DateTimePicker Overview
11
11
12
12
{% if site.core %}
13
-
The Telerik UI DataSource TagHelper and HtmlHelper for {{ site.framework }} are server-side wrappers for the Kendo UI DataSource widget.
13
+
The Telerik UI DateTimePicker TagHelper and HtmlHelper for {{ site.framework }} are server-side wrappers for the Kendo UI DateTimePicker widget.
14
14
{% else %}
15
15
The Telerik UI DateTimePicker HtmlHelper for {{ site.framework }} is a server-side wrapper for the Kendo UI DateTimePicker widget.
16
16
{% endif %}
@@ -107,8 +107,11 @@ The DateTimePicker component respects DataAnnotations when the `DateTimePickerFo
107
107
| Feature | Description |
108
108
|---------|-------------|
109
109
|[Disabled dates]({% slug disableddates_datetimepicker_aspnetcore %})|The DateTimePicker allows you to disable specific days that shouldn't be selected by the end user, such as weekends and national holidays.|
110
+
|[Component Type]({% slug htmlhelpers_componenttype_datetimepicker_aspnetcore %}) | The DateTimePicker allows you to choose between two rendering options: standard and modern appearance. |
110
111
|[Selected dates]({% slug selecteddates_datetimepicker_aspnetcore %})|The DateTimePicker allows you to render a pre-selected date and also define the minimum and maximum dates it displays.|
111
112
|[Start view and navigation depth]({% slug navdepth_datetimepicker_aspnetcore %})|The DateTimePicker enables you to set the rendered initial view and define the navigation depth of the views.|
113
+
|[Interval]({% slug htmlhelpers_datetimepicker_interval_aspnetcore %}) | You can configure the interval between the time values. |
114
+
|[Floating Labels]({% slug htmlhelpers_datetimepicker_floatinglabel_aspnetcore %}) | You can explicitly set a floating label which floats above the field and remains visible. |
112
115
|[Validation]({% slug validation_datetimepicker_aspnetcore %})|The DateTimePicker does not automatically update the typed text when the typed text is invalid. Such changes in the input value may lead to unexpected behavior.|
113
116
|[Date and time formatting]({% slug datetimeformatting_datetimepicker_aspnetcore %})|The DateTimePicker allows you to define its date and time formatting.|
114
117
|[Calendar types]({% slug calendartypes_datetimepicker_aspnetcore %})|By default, the DatePicker works with `Date` objects which support only the [Gregorian](https://en.wikipedia.org/wiki/Gregorian_calendar) calendar.|
description: "Get familiar with the Telerik UI TimePicker component for {{ site.framework }} and how to set its interval feature."
5
+
slug: htmlhelpers_timepicker_interval_aspnetcore
6
+
position: 9
7
+
---
8
+
9
+
# Interval
10
+
11
+
The {{ site.product }} TimePicker allows you to specify the time interval between values in the popup list.
12
+
13
+
Depending on the [Component Type](% slug htmlhelpers_componenttype_timepicker_aspnetcore %), you can set the interval in two distinct ways.
14
+
15
+
## Setting the Interval in Classic Render Mode
16
+
17
+
When the [`Component Type()`](https://docs.telerik.com/{{ site.platform }}/api/kendo.mvc.ui.fluent/timepickerbuilder#componenttypesystemstring) method is set to `classic`, the interval is specified in minutes (numeric values).
18
+
19
+
```HtmlHelper
20
+
@(Html.Kendo().TimePicker
21
+
.Name("timepicker")
22
+
.ComponentType("classic")
23
+
.Interval(7)
24
+
)
25
+
```
26
+
{% if site.core %}
27
+
```TagHelper
28
+
<kendo-timepicker name="timepicker"
29
+
component-type="classic"
30
+
interval="7">
31
+
</kendo-timepicker>
32
+
```
33
+
{% endif %}
34
+
35
+
> When the `ComponentType()` is set to `classic`, the interval does not accept an object of hours, minutes and seconds.
36
+
37
+
## Setting the Interval in Modern Render Mode
38
+
39
+
When the [`ComponentType()`](https://docs.telerik.com/{{ site.platform }}/api/kendo.mvc.ui.fluent/timepickerbuilder#componenttypesystemstring) method is set to `modern`, the interval is specified as an object of hours, minutes and seconds.
Copy file name to clipboardExpand all lines: docs-aspnet/html-helpers/editors/timepicker/overview.md
+13-8Lines changed: 13 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -87,14 +87,19 @@ The TimePicker component respects DataAnnotation attributes when using the `Time
87
87
88
88
## Functionality and Features
89
89
90
-
*[Selected time]({% slug htmlhelpers_timepicker_aspnetcore_selectedtimes %})—The TimePicker allows you to render a pre-selected time and also define the minimum and maximum time it displays.
91
-
*[Focused time]({% slug htmlhelpers_timepicker_aspnetcore_focusedtime %})—The TimePicker allows you to define focused time when the pop-up is opened.
92
-
*[Formats]({% slug formats_timepicker_aspnetcore %})—The TimePicker allows you to define its time formatting.
93
-
*[Validation]({% slug htmlhelpers_timepicker_aspnetcore_validation %})—The TimePicker is designed to keep its input value unchanged even when the typed time is invalid.
94
-
*[Globalization]({% slug globalization_timepicker_aspnetcore %})—The globalization process combines the translation of component messages (localization) with adapting them to specific cultures.
95
-
*[Accessibility]({% slug accessibility_timepicker_aspnetcore %})—The TimePicker is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.2, and keyboard support.
96
-
*[Automatic Correction]({% slug htmlhelpers_timepicker_autocorrect_aspnetcore %})—You can configure whether the component will autocorrect the user's input when the `Min` and `Max` values are set.
97
-
90
+
|Feature|Description|
91
+
|-------|-----------|
92
+
|[Adaptive Mode]({% slug htmlhelpers_timepicker_adaptive_mode_aspnetcore %}) | The TimePicker supports an adaptive mode that provides a mobile-friendly rendering of its popup. |
93
+
|[Component Type]({% slug htmlhelpers_componenttype_timepicker_aspnetcore %}) | The TimePicker allows you to choose from both a standard and a modern rendering appearance. |
94
+
|[Floating Labels]({% slug htmlhelpers_timepicker_floatinglabel_aspnetcore %}) | You can explicitly set a floating label which floats above the field and remains visible. |
95
+
|[Selected time]({% slug htmlhelpers_timepicker_aspnetcore_selectedtimes %}) | The TimePicker allows you to render a pre-selected time and also define the minimum and maximum time it displays. |
96
+
|[Focused time]({% slug htmlhelpers_timepicker_aspnetcore_focusedtime %}) |The TimePicker allows you to define focused time when the pop-up is opened. |
97
+
|[Interval]({% slug htmlhelpers_timepicker_interval_aspnetcore %}) | You can configure the interval between the time values. |
98
+
|[Formats]({% slug formats_timepicker_aspnetcore %}) | The TimePicker allows you to define its time formatting. |
99
+
|[Validation]({% slug htmlhelpers_timepicker_aspnetcore_validation %}) | The TimePicker is designed to keep its input value unchanged even when the typed time is invalid. |
100
+
|[Globalization]({% slug globalization_timepicker_aspnetcore %}) | The globalization process combines the translation of component messages (localization) with adapting them to specific cultures. |
101
+
|[Accessibility]({% slug accessibility_timepicker_aspnetcore %}) | The TimePicker is accessible for screen readers, supports WAI-ARIA attributes, delivers keyboard shortcuts for faster navigation, and allows you to render it in a right-to-left direction. |
102
+
|[Automatic Correction]({% slug htmlhelpers_timepicker_autocorrect_aspnetcore %})| You can configure whether the component will autocorrect the user's input when the `Min` and `Max` values are set. |
0 commit comments