Skip to content

Commit 476fe4f

Browse files
marin-bratanovmarin-bratanov
authored
Date picker (#2)
* docs(dateInput): min and max * docs(datePicker): add preliminary docs * docs(datePicker): improved docks * docs(datePicker): remove validation example from own article * docs(datePicker): validation example
1 parent 260ee74 commit 476fe4f

File tree

5 files changed

+121
-23
lines changed

5 files changed

+121
-23
lines changed

‎_config.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -243,6 +243,7 @@ intro_columns:
243243
title: "Scheduling"
244244
items:
245245
"Calendar": "components/calendar/overview"
246+
"Date Picker": "components/datepicker/overview"
246247
-
247248
title: "Layout"
248249
items:

‎common-features/input-validation.md‎

Lines changed: 33 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -37,31 +37,36 @@ Simple textbox-like inputs do not have any special behavior. You need to bind th
3737
@using Telerik.Blazor.Components.TextBox
3838
@using Telerik.Blazor.Components.NumericTextBox
3939
@using Telerik.Blazor.Components.DateInput
40+
@using Telerik.Blazor.Components.DatePicker
4041
@using System.ComponentModel.DataAnnotations
4142
42-
<EditForm Model="@person" OnValidSubmit="@HandleValidSubmit">
43-
<DataAnnotationsValidator />
44-
<ValidationSummary />
45-
46-
<p class="name">
47-
Name: <TelerikTextBox bind-Value="@person.Name"></TelerikTextBox>
48-
<ValidationMessage For="@(() => person.Name)"></ValidationMessage>
49-
</p>
50-
<p class="height">
51-
Height (cm): <TelerikNumericTextBox bind-Value="@person.Height" />
52-
<ValidationMessage For="@(() => person.Height)"></ValidationMessage>
53-
</p>
54-
<p class="birthday">
55-
Birthday: <TelerikDateInput bind-Value="@person.Birthday" Format="dd MMMM yyyy"></TelerikDateInput>
56-
<ValidationMessage For="@(() => person.Birthday)"></ValidationMessage>
57-
</p>
58-
<p class="accepts-terms">
59-
Accepts terms: <InputCheckbox bind-Value="@person.AcceptsTerms" />
60-
<ValidationMessage For="@(() => person.AcceptsTerms)"></ValidationMessage>
61-
</p>
62-
63-
<button type="submit">Submit</button>
64-
</EditForm>
43+
<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+
Birthday: <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>
69+
</EditForm>
6570
6671
@functions {
6772
// Usually this class would be in a different file
@@ -80,6 +85,11 @@ Simple textbox-like inputs do not have any special behavior. You need to bind th
8085
ErrorMessage = "Value for {0} must be between {1:dd MMM yyyy} and {2:dd MMM yyyy}")]
8186
public DateTime Birthday { get; set; }
8287
88+
[Required(ErrorMessage = "You must surely have a favorite day.")]
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+
public DateTime FavoriteDay { get; set; }
92+
8393
[Required]
8494
[Range(typeof(bool), "true", "true", ErrorMessage = "Must accept terms")]
8595
public bool AcceptsTerms { get; set; }

‎components/dateinput/overview.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,8 @@ The date input provides the following features:
6565
* `Class` - the CSS class that will be rendered on the `input` element.
6666
* `Enabled` - whether the `input` is enabled.
6767
* `Format` - the date format that the user input must match.
68+
* `Max` - the maximum date the user can enter. Defaults to 31 Dec 2099.
69+
* `Min` - the minimum date the user can enter. Defaults to 1 Jan 1900.
6870
* `ParsingErrorMessage` - a hint that is displayed to the user through validation when their input cannot be parsed in the required format
6971
* `Placeholder` - the `placeholder` attribute rendered on the `input` element that serves as a hint when there is no value in the input.
7072
* `Value` - get/set the value of the input, can be used for binding.

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

9.78 KB
Loading

‎components/datepicker/overview.md‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
---
2+
title: Overview
3+
page_title: Date Picker for Blazor Overview
4+
description: Overview of the Date Picker for Blazor
5+
slug: components/datepicker/overview
6+
tags: telerik,blazor,date,picker,datepicker,overview
7+
published: True
8+
position: 0
9+
---
10+
11+
# Date Picker Overview
12+
13+
The Date Picker component allows the user to choose a date from a visual list ([calendar]({%slug components/calendar/overview%})) or to type it into a [date input]({%slug components/dateinput/overview%}) that can accept only dates. You can control the format shown in the input, the min and max date the user can select, and dates the user cannot select.
14+
15+
To use a Telerik Date Picker for Blazor:
16+
17+
1. @[template](/_contentTemplates/common/js-interop-file.md#add-blazor-js-file-to-list)
18+
19+
1. add the `TelerikDatePicker` tag
20+
21+
>caption Basic date picker with its key features, and ValueChanged event handling
22+
23+
@[template](/_contentTemplates/common/issues-and-warnings.md#generic-component-event-issue)
24+
25+
````CSHTML
26+
@using Telerik.Blazor.Components.DatePicker
27+
28+
<TelerikDatePicker Min="@Min" Max="@Max" ValueChanged="@ValueChanged"></TelerikDatePicker>
29+
30+
<br />The selected date is: @selectedDate?.ToShortDateString()
31+
32+
@functions {
33+
public DateTime Max = new DateTime(2050, 12, 31);
34+
public DateTime Min = new DateTime(1950, 1, 1);
35+
private DateTime? selectedDate;
36+
37+
protected void ValueChanged(DateTime newValue)
38+
{
39+
selectedDate = newValue;
40+
}
41+
}
42+
````
43+
44+
![](images/datepicker-first-look.png)
45+
46+
The Date Picker is a generic component and takes its type from the value the developer provides. This is reflected in the way a reference is obtained.
47+
48+
>caption Component namespace and reference
49+
50+
````CSHTML
51+
@using Telerik.Blazor.Components.DatePicker
52+
53+
<TelerikDatePicker ref="@theDatePicker" bind-Value-ValueChanged="@datePickerValue"></TelerikDateInput>
54+
55+
@functions {
56+
Telerik.Blazor.Components.DatePicker.TelerikDatePicker<DateTime> theDatePicker;
57+
58+
DateTime datePickerValue { get; set; } = DateTime.Now;
59+
}
60+
````
61+
62+
The Date Picker component exposes the following features:
63+
64+
* `BottomView` - Defines the bottommost view in the popup calendar to which the user can navigate to. Defaults to `CalendarView.Month`.
65+
* `DisabledDates` - Specifies a list of dates that can not be selected.
66+
* `Enabled` - Specifies whether typing in the input is allowed.
67+
* `Height` - Defines the height of the DatePicker. Defaults to 28.
68+
* `Format` - Specifies the format of the DateInput of the DatePicker. Defaults to `yyyy-MM-dd`.
69+
* `Min` - Sets the minimum allowed date of the date picker. Defaults to 1 Jan 1900.
70+
* `Max` - Sets the maximum allowed date of the date picker. Defaults to 31 Dec 2099.
71+
* `PopupHeight` - Defines the height of the DatePicker's Popup. Defaults to 280;
72+
* `PopupWidth` - Defines the width of the DatePicker's Popup. Defaults to 320.
73+
* `Value` - The current value of the input. Can be used for binding.
74+
* `View` - Specifies the current view that will be displayed in the popup calendar.
75+
* `Width` - Defines the width of the DatePicker. Defaults to 280.
76+
* Validation - see the [Input Validation]({%slug common-features/input-validation%}) article.
77+
78+
The date picker is, essentially, a [date input]({%slug components/dateinput/overview%}) and a [calendar]({%slug components/calendar/overview%}) and the properties it exposes are mapped to the corresponding properties of these two components. You can read more about their behavior in the respective components' documentation.
79+
80+
81+
82+
## See Also
83+
84+
* [Live Demo: Date Picker](https://demos.telerik.com/blazor/datepicker/index)
85+
* [Input Validation]({%slug common-features/input-validation%})

0 commit comments

Comments
 (0)