Skip to content

Commit 04491e9

Browse files
marin-bratanovmarin-bratanov
committed
docs(timePicker): initial docs
1 parent 6356aba commit 04491e9

File tree

2 files changed

+72
-59
lines changed

2 files changed

+72
-59
lines changed

‎_config.yml‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -245,7 +245,6 @@ intro_columns:
245245
title: "Scheduling"
246246
items:
247247
"Calendar": "components/calendar/overview"
248-
"Date Picker": "components/datepicker/overview"
249248
-
250249
categories:
251250
-
@@ -254,6 +253,8 @@ intro_columns:
254253
"Textbox": "components/textbox/overview"
255254
"Numeric Textbox": "components/numerictextbox/overview"
256255
"Date Input": "components/dateinput/overview"
256+
"Date Picker": "components/datepicker/overview"
257+
"Time Picker": "components/timepicker/overview"
257258
"DropDownList": "components/dropdownlist/overview"
258259

259260
-

‎common-features/input-validation.md‎

Lines changed: 70 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -38,70 +38,82 @@ Simple textbox-like inputs do not have any special behavior. You need to bind th
3838
@using Telerik.Blazor.Components.NumericTextBox
3939
@using Telerik.Blazor.Components.DateInput
4040
@using Telerik.Blazor.Components.DatePicker
41+
@using Telerik.Blazor.Components.TimePicker
4142
@using System.ComponentModel.DataAnnotations
4243
4344
<EditForm Model="@person" OnValidSubmit="@HandleValidSubmit">
44-
<DataAnnotationsValidator />
45-
<ValidationSummary />
46-
47-
<p class="name">
48-
Name: <TelerikTextBox @bind-Value="person.Name"></TelerikTextBox>
49-
<ValidationMessage For="@(() => person.Name)"></ValidationMessage>
50-
</p>
51-
<p class="height">
52-
Height (cm): <TelerikNumericTextBox @bind-Value="person.Height" />
53-
<ValidationMessage For="@(() => person.Height)"></ValidationMessage>
54-
</p>
55-
<p class="birthday">
56-
Birthday: <TelerikDateInput @bind-Value="person.Birthday" Format="dd MMMM yyyy"></TelerikDateInput>
57-
<ValidationMessage For="@(() => person.Birthday)"></ValidationMessage>
58-
</p>
59-
<p class="favorite-day">
60-
Favorite date: <TelerikDatePicker @bind-Value="person.FavoriteDay" Format="dd MMMM yyyy"></TelerikDatePicker>
61-
<ValidationMessage For="@(() => person.FavoriteDay)"></ValidationMessage>
62-
</p>
63-
<p class="accepts-terms">
64-
Accepts terms: <InputCheckbox @bind-Value="person.AcceptsTerms" />
65-
<ValidationMessage For="@(() => person.AcceptsTerms)"></ValidationMessage>
66-
</p>
67-
68-
<button type="submit">Submit</button>
45+
<DataAnnotationsValidator />
46+
<ValidationSummary />
47+
48+
<p class="name">
49+
Name: <TelerikTextBox @bind-Value="person.Name"></TelerikTextBox>
50+
<ValidationMessage For="@(() => person.Name)"></ValidationMessage>
51+
</p>
52+
<p class="height">
53+
Height (cm): <TelerikNumericTextBox @bind-Value="person.Height" />
54+
<ValidationMessage For="@(() => person.Height)"></ValidationMessage>
55+
</p>
56+
<p class="birthday">
57+
Birthday: <TelerikDateInput @bind-Value="person.Birthday" Format="dd MMMM yyyy"></TelerikDateInput>
58+
<ValidationMessage For="@(() => person.Birthday)"></ValidationMessage>
59+
</p>
60+
<p class="favorite-day">
61+
Favorite date: <TelerikDatePicker @bind-Value="person.FavoriteDay" Format="dd MMMM yyyy"></TelerikDatePicker>
62+
<ValidationMessage For="@(() => person.FavoriteDay)"></ValidationMessage>
63+
</p>
64+
<p class="daily-scrum">
65+
Daily scrum: <TelerikTimePicker @bind-Value="person.DailyScrum"></TelerikTimePicker>
66+
<ValidationMessage For="@(() => person.DailyScrum)"></ValidationMessage>
67+
</p>
68+
<p class="accepts-terms">
69+
Accepts terms: <InputCheckbox @bind-Value="person.AcceptsTerms" />
70+
<ValidationMessage For="@(() => person.AcceptsTerms)"></ValidationMessage>
71+
</p>
72+
73+
<button type="submit">Submit</button>
6974
</EditForm>
7075
7176
@code {
72-
// Usually this class would be in a different file
73-
public class Person
74-
{
75-
[Required(ErrorMessage = "Enter a name")]
76-
[StringLength(10, ErrorMessage = "That name is too long")]
77-
public string Name { get; set; }
78-
79-
[Required(ErrorMessage = "Provide your height in centimeters")]
80-
[Range(1, 300, ErrorMessage = "Nobody is that tall")]
81-
public int? Height { get; set; }
82-
83-
[Required]
84-
[Range(typeof(DateTime), "1/1/1900", "1/12/2000",
85-
ErrorMessage = "Value for {0} must be between {1:dd MMM yyyy} and {2:dd MMM yyyy}")]
86-
public DateTime Birthday { get; set; }
87-
88-
[Required]
89-
[Range(typeof(DateTime), "1/1/1999", "1/12/2019",
90-
ErrorMessage = "Value for {0} must be between {1:dd MMM yyyy} and {2:dd MMM yyyy}")]
91-
[Display(Name="Your Favourite Day")]
92-
public DateTime FavoriteDay { get; set; }
93-
94-
[Required]
95-
[Range(typeof(bool), "true", "true", ErrorMessage = "Must accept terms")]
96-
public bool AcceptsTerms { get; set; }
97-
}
98-
99-
Person person = new Person();
100-
101-
void HandleValidSubmit()
102-
{
103-
Console.WriteLine("OnValidSubmit");
104-
}
77+
// Usually this class would be in a different file
78+
public class Person
79+
{
80+
[Required(ErrorMessage = "Enter a name")]
81+
[StringLength(10, ErrorMessage = "That name is too long")]
82+
public string Name { get; set; }
83+
84+
[Required(ErrorMessage = "Provide your height in centimeters")]
85+
[Range(1, 300, ErrorMessage = "Nobody is that tall")]
86+
public int? Height { get; set; }
87+
88+
[Required]
89+
[Range(typeof(DateTime), "1/1/1900", "1/12/2000",
90+
ErrorMessage = "Value for {0} must be between {1:dd MMM yyyy} and {2:dd MMM yyyy}")]
91+
public DateTime Birthday { get; set; }
92+
93+
[Required]
94+
[Range(typeof(DateTime), "1/1/1999", "1/12/2019",
95+
ErrorMessage = "Value for {0} must be between {1:dd MMM yyyy} and {2:dd MMM yyyy}")]
96+
[Display(Name = "Your Favourite Day")]
97+
public DateTime FavoriteDay { get; set; }
98+
99+
[Required(ErrorMessage = "The daily standup is required")]
100+
[Range(typeof(DateTime), "1/1/1900 08:00:00", "1/1/1900 17:00:00", ErrorMessage = "Time should be in business hours, between 8AM and 5 PM.")]
101+
public DateTime? DailyScrum { get; set; }
102+
103+
[Required]
104+
[Range(typeof(bool), "true", "true", ErrorMessage = "Must accept terms")]
105+
public bool AcceptsTerms { get; set; }
106+
}
107+
108+
Person person = new Person()
109+
{
110+
DailyScrum = new DateTime(1900, 1, 1, 1, 1, 1) // must match the date portion of the range validation dates
111+
};
112+
113+
void HandleValidSubmit()
114+
{
115+
Console.WriteLine("OnValidSubmit");
116+
}
105117
}
106118
````
107119

0 commit comments

Comments
 (0)