Skip to content

Commit 510b547

Browse files
marin-bratanovmarin-bratanov
committed
docs(datePicker): actual docs
1 parent 04491e9 commit 510b547

File tree

3 files changed

+213
-0
lines changed

3 files changed

+213
-0
lines changed

‎components/timepicker/events.md

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
---
2+
title: Events
3+
page_title: TimePicker for Blazor | Events
4+
description: Events in the TimePicker for Blazor
5+
slug: components/timepicker/events
6+
tags: telerik,blazor,TimePicker,events
7+
published: true
8+
position: 20
9+
---
10+
11+
# Events
12+
13+
This article explains the events available in the Telerik TimePicker for Blazor:
14+
<!--
15+
* [OnChange](#onchange)
16+
* [ValueChanged](#valuechanged)
17+
18+
## OnChange
19+
20+
when the new value is commited by the user either by pressing Enter, or when the input loses focus.
21+
22+
The `OnChange` event fires when the new value is commited by the user either by editing the input (typing, using the arrows) and pressing `Enter` after that, or by setting the time through the dropdown and its `Set` button.
23+
24+
The date picker is a generic component, so you must provide either a `Value`, or a type to the `T` parameter of the component.
25+
26+
>caption Handle OnChange
27+
28+
````CSHTML
29+
@using Telerik.Blazor.Components.TimePicker
30+
31+
<TelerikTimePicker T="DateTime" OnChange="@MyOnChangeHandler"></TelerikTimePicker>
32+
33+
<br />
34+
@result
35+
36+
@code {
37+
string result;
38+
39+
private void MyOnChangeHandler(object theUserInput)
40+
{
41+
// the handler receives an object that you may need to cast to the type of the component
42+
// if you do not provide a Value, you must provide the Type parameter to the component
43+
result = string.Format("The user entered: {0:HH:mm:ss}", (DateTime)theUserInput);
44+
}
45+
}
46+
````
47+
48+
@[template](/_contentTemplates/common/general-info.md#event-callback-can-be-async)
49+
50+
>tip The `OnChange` event is a custom event and does not interfere with bindings, so you can use it together with models and forms.
51+
52+
>caption Handle OnChange and use two-way binding
53+
54+
````CSHTML
55+
@using Telerik.Blazor.Components.TimePicker
56+
57+
<TelerikTimePicker @bind-Value="@thePickerValue" OnChange="@MyOnChangeHandler"></TelerikTimePicker>
58+
59+
<br />
60+
@result
61+
<br />
62+
model value: @thePickerValue
63+
64+
@code {
65+
string result;
66+
67+
DateTime? thePickerValue { get; set; } = DateTime.Now;
68+
69+
private void MyOnChangeHandler(object theUserInput)
70+
{
71+
// the handler receives an object that you may need to cast to the type of the component
72+
// if you do not provide a Value, you must provide the Type parameter to the component
73+
result = string.Format("The user entered: {0}", (theUserInput as DateTime?).Value);
74+
}
75+
}
76+
````
77+
-->
78+
79+
## ValueChanged
80+
81+
The `ValueChanged` event fires upon every change (for example, keystroke) in the input, and upon clicking the `Set` or `Now` buttons in the dropdown.
82+
83+
>caption Handle ValueChanged
84+
85+
````CSHTML
86+
@using Telerik.Blazor.Components.TimePicker
87+
88+
<TelerikTimePicker ValueChanged="@( (DateTime d) => MyValueChangeHandler(d) )"></TelerikTimePicker>
89+
90+
<br />
91+
@result
92+
93+
@code {
94+
string result;
95+
96+
private void MyValueChangeHandler(DateTime theUserInput)
97+
{
98+
result = string.Format("The user entered: {0}", theUserInput);
99+
}
100+
}
101+
````
102+
103+
@[template](/_contentTemplates/common/general-info.md#event-callback-can-be-async)
104+
105+
@[template](/_contentTemplates/common/issues-and-warnings.md#valuechanged-lambda-required)
106+
107+
>caption Handle ValueChanged and provide initial value
108+
109+
````CSHTML
110+
@using Telerik.Blazor.Components.TimePicker
111+
112+
<TelerikTimePicker Value="@thePickerValue" ValueChanged="@( (DateTime d) => MyValueChangeHandler(d) )"></TelerikTimePicker>
113+
114+
<br />
115+
@result
116+
<br />
117+
model value: @thePickerValue
118+
119+
@code {
120+
string result;
121+
122+
DateTime thePickerValue { get; set; } = DateTime.Now;
123+
124+
private void MyValueChangeHandler(DateTime theUserInput)
125+
{
126+
result = $"The user entered: {theUserInput}";
127+
128+
//you have to update the model manually because handling the ValueChanged event does not let you use @bind-Value
129+
thePickerValue = theUserInput;
130+
}
131+
}
132+
````
133+
134+
## See Also
135+
136+
* [ValueChanged and Validation]({%slug value-changed-validation-model%})

‎components/timepicker/images/timepicker-first-look.png

12.6 KB
Loading

‎components/timepicker/overview.md

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
---
2+
title: Overview
3+
page_title: Time Picker for Blazor Overview
4+
description: Overview of the Time Picker for Blazor
5+
slug: components/timepicker/overview
6+
tags: telerik,blazor,time,picker,timepicker,overview
7+
published: True
8+
position: 0
9+
---
10+
11+
# Time Picker Overview
12+
13+
The Time Picker component allows the user to choose a time from a visual list in a dropdown, or to type it into a [date input]({%slug components/dateinput/overview%}) that can accept only DateTime values. You can control the format shown in the input and respond to [events]({%slug components/timepicker/events %}).
14+
15+
To use a Telerik Time Picker for Blazor, add the `TelerikTimePicker` tag.
16+
17+
>caption Basic time picker with custom format, min and max
18+
19+
````CSHTML
20+
@using Telerik.Blazor.Components.TimePicker
21+
22+
<TelerikTimePicker Min="@Min" Max="@Max" Format="hh:mm:ss tt" @bind-Value="@selectedTime"></TelerikTimePicker>
23+
24+
Selected time: @selectedTime?.ToLongTimeString()
25+
26+
@code {
27+
private DateTime? selectedTime = DateTime.Now;
28+
29+
// only the time portions are used
30+
public DateTime Min = new DateTime(1900, 1, 1, 8, 15, 0);
31+
public DateTime Max = new DateTime(1900, 1, 1, 19, 30, 45);
32+
}
33+
````
34+
35+
![](images/timepicker-first-look.png)
36+
37+
>caption Component namespace and reference
38+
39+
````CSHTML
40+
@using Telerik.Blazor.Components.TimePicker
41+
42+
<TelerikTimePicker @bind-Value="@theTimePickerValue"></TelerikTimePicker>
43+
@theTimePickerValue
44+
45+
@code {
46+
DateTime? theTimePickerValue { get; set; }
47+
48+
// the time picker is a generic component and its type comes from the value field type
49+
Telerik.Blazor.Components.TimePicker.TelerikTimePicker<DateTime?> theTimePicker;
50+
}
51+
````
52+
53+
The Time Picker component exposes the following features:
54+
55+
* `Enabled` - Specifies whether typing in the input is allowed.
56+
* `Height` - Defines the height of the TimePicker. Defaults to `28px`. See the [Dimensions]({%slug common-features/dimensions%}) article.
57+
* `Format` - Specifies the format of the DateInput of the TimePicker. Defaults to `HH:mm` (24 hour time format). Read more in the [Supported Formats]({%slug components/dateinput/supported-formats%}) article. Note that format specifiers for non-time portions will only be editable in the input and will not have a representation in the time picker dropdown.
58+
* `Min` - The earliest time that the user can select.
59+
* `Max` - The latest time that the user can select.
60+
* `Value` - The current value of the input. Can be used for binding.
61+
* `Width` - Defines the width of the TimePicker.
62+
* Validation - see the [Input Validation]({%slug common-features/input-validation%}) article.
63+
64+
The `Min` and `Max` properties require a `DateTime` object, but will only use the time portion from it. Thus, the date itself is not important. The hours, minutes, seconds and AM/PM portions control the range of the tumblers in the time picker dropdown. They do not impose validation/limitations on the input editing.
65+
66+
When using the dropdown to edit dates, you must click the "Set" button to commit the date. Clicking "Cancel", or outside of the dropdown without clicking "Set", will revert the time to the original value. You can also commit a date by clicking the "NOW" button which will choose the current time.
67+
68+
The time format specifiers in the `Format` control the tumblers available in the dropdown. For example, the `HH` specifier will result in a hour selector in a 24 hour format. If you also add the `tt` specifier, you will also get the AM/PM tumbler, but the 24 hour format will still be used. This means that you can also add several tumblers for the same time portion if the format string repeats them.
69+
70+
The Time Picker component supports `DateTime`, `DateTime?`, `DateTimeOffset` and `DateTimeOffset?` types.
71+
72+
73+
## See Also
74+
75+
* [Live Demo: Time Picker](https://demos.telerik.com/blazor-ui/timepicker/index)
76+
* [Input Validation]({%slug common-features/input-validation%})
77+
* [Supported Input Date Formats]({%slug components/dateinput/supported-formats%})

0 commit comments

Comments
 (0)