Date picker

_config.yml

@@ -243,6 +243,7 @@ intro_columns:
     title: "Scheduling"
     items:
       "Calendar": "components/calendar/overview"
+      "Date Picker": "components/datepicker/overview"
   -
     title: "Layout"
     items:

common-features/input-validation.md

@@ -37,31 +37,36 @@ Simple textbox-like inputs do not have any special behavior. You need to bind th
 @using Telerik.Blazor.Components.TextBox
 @using Telerik.Blazor.Components.NumericTextBox
 @using Telerik.Blazor.Components.DateInput
+@using Telerik.Blazor.Components.DatePicker
 @using System.ComponentModel.DataAnnotations
 
-<EditForm Model="@person" OnValidSubmit="@HandleValidSubmit">
-	<DataAnnotationsValidator />
-	<ValidationSummary />
-
-	<p class="name">
-		Name: <TelerikTextBox bind-Value="@person.Name"></TelerikTextBox>
-		<ValidationMessage For="@(() => person.Name)"></ValidationMessage>
-	</p>
-	<p class="height">
-		Height (cm): <TelerikNumericTextBox bind-Value="@person.Height" />
-		 <ValidationMessage For="@(() => person.Height)"></ValidationMessage>
-	</p>
-	<p class="birthday">
-		Birthday: <TelerikDateInput bind-Value="@person.Birthday" Format="dd MMMM yyyy"></TelerikDateInput>
-		<ValidationMessage For="@(() => person.Birthday)"></ValidationMessage>
-	</p>
-	<p class="accepts-terms">
-		Accepts terms: <InputCheckbox bind-Value="@person.AcceptsTerms" />
-		<ValidationMessage For="@(() => person.AcceptsTerms)"></ValidationMessage>
-	</p>
-
-	<button type="submit">Submit</button>
-</EditForm>
+	<EditForm Model="@person" OnValidSubmit="@HandleValidSubmit">
+		<DataAnnotationsValidator />
+		<ValidationSummary />
+
+		<p class="name">
+			Name: <TelerikTextBox bind-Value="@person.Name"></TelerikTextBox>
+			<ValidationMessage For="@(() => person.Name)"></ValidationMessage>
+		</p>
+		<p class="height">
+			Height (cm): <TelerikNumericTextBox bind-Value="@person.Height" />
+			<ValidationMessage For="@(() => person.Height)"></ValidationMessage>
+		</p>
+		<p class="birthday">
+			Birthday: <TelerikDateInput bind-Value="@person.Birthday" Format="dd MMMM yyyy"></TelerikDateInput>
+			<ValidationMessage For="@(() => person.Birthday)"></ValidationMessage>
+		</p>
+		<p class="favorite-day">
+			Birthday: <TelerikDatePicker bind-Value="@person.FavoriteDay" Format="dd MMMM yyyy"></TelerikDatePicker>
+			<ValidationMessage For="@(() => person.FavoriteDay)"></ValidationMessage>
+		</p>
+		<p class="accepts-terms">
+			Accepts terms: <InputCheckbox bind-Value="@person.AcceptsTerms" />
+			<ValidationMessage For="@(() => person.AcceptsTerms)"></ValidationMessage>
+		</p>
+
+		<button type="submit">Submit</button>
+	</EditForm>
 
 @functions {
 	// 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
 			ErrorMessage = "Value for {0} must be between {1:dd MMM yyyy} and {2:dd MMM yyyy}")]
 		public DateTime Birthday { get; set; }
 
+		[Required(ErrorMessage = "You must surely have a favorite day.")]
+		[Range(typeof(DateTime), "1/1/1999", "1/12/2019",
+			ErrorMessage = "Value for {0} must be between {1:dd MMM yyyy} and {2:dd MMM yyyy}")]
+		public DateTime FavoriteDay { get; set; }
+
 		[Required]
 		[Range(typeof(bool), "true", "true", ErrorMessage = "Must accept terms")]
 		public bool AcceptsTerms { get; set; }

components/dateinput/overview.md

@@ -65,6 +65,8 @@ The date input provides the following features:
 * `Class` - the CSS class that will be rendered on the `input` element.
 * `Enabled` - whether the `input` is enabled.
 * `Format` - the date format that the user input must match.
+*  `Max` - the maximum date the user can enter. Defaults to 31 Dec 2099.
+*  `Min` - the minimum date the user can enter. Defaults to 1 Jan 1900.
 * `ParsingErrorMessage` - a hint that is displayed to the user through validation when their input cannot be parsed in the required format
 * `Placeholder` - the `placeholder` attribute rendered on the `input` element that serves as a hint when there is no value in the input.
 * `Value` - get/set the value of the input, can be used for binding.

components/datepicker/overview.md

@@ -0,0 +1,85 @@
+---
+title: Overview
+page_title: Date Picker for Blazor Overview
+description: Overview of the Date Picker for Blazor
+slug: components/datepicker/overview
+tags: telerik,blazor,date,picker,datepicker,overview
+published: True
+position: 0
+---
+
+# Date Picker Overview
+
+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.
+
+To use a Telerik Date Picker for Blazor:
+
+1. @[template](/_contentTemplates/common/js-interop-file.md#add-blazor-js-file-to-list)
+
+1. add the `TelerikDatePicker` tag
+
+>caption Basic date picker with its key features, and ValueChanged event handling
+
+@[template](/_contentTemplates/common/issues-and-warnings.md#generic-component-event-issue)
+
+````CSHTML
+@using Telerik.Blazor.Components.DatePicker
+
+<TelerikDatePicker Min="@Min" Max="@Max" ValueChanged="@ValueChanged"></TelerikDatePicker>
+
+<br />The selected date is: @selectedDate?.ToShortDateString()
+
+@functions  {
+    public DateTime Max = new DateTime(2050, 12, 31);
+    public DateTime Min = new DateTime(1950, 1, 1);
+    private DateTime? selectedDate;
+
+    protected void ValueChanged(DateTime newValue)
+    {
+        selectedDate = newValue;
+    }
+}
+````
+
+![](images/datepicker-first-look.png)
+
+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.
+
+>caption Component namespace and reference
+
+````CSHTML
+@using Telerik.Blazor.Components.DatePicker
+
+	<TelerikDatePicker ref="@theDatePicker" bind-Value-ValueChanged="@datePickerValue"></TelerikDateInput>
+
+	@functions {
+		Telerik.Blazor.Components.DatePicker.TelerikDatePicker<DateTime> theDatePicker;
+
+		DateTime datePickerValue { get; set; } = DateTime.Now;
+	}
+````
+
+The Date Picker component exposes the following features:
+
+*  `BottomView` - Defines the bottommost view in the popup calendar to which the user can navigate to. Defaults to `CalendarView.Month`.
+* `DisabledDates` - Specifies a list of dates that can not be selected.
+* `Enabled` - Specifies whether typing in the input is allowed.
+* `Height` - Defines the height of the DatePicker. Defaults to 28.
+* `Format` - Specifies the format of the DateInput of the DatePicker. Defaults to `yyyy-MM-dd`.
+* `Min` - Sets the minimum allowed date of the date picker. Defaults to 1 Jan 1900.
+* `Max` - Sets the maximum allowed date of the date picker. Defaults to 31 Dec 2099.
+* `PopupHeight` - Defines the height of the DatePicker's Popup. Defaults to 280;
+* `PopupWidth` - Defines the width of the DatePicker's Popup. Defaults to 320.
+* `Value` - The current value of the input. Can be used for binding.
+* `View` - Specifies the current view that will be displayed in the popup calendar.
+* `Width` - Defines the width of the DatePicker. Defaults to 280.
+* Validation - see the [Input Validation]({%slug common-features/input-validation%}) article.
+
+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.
+
+
+
+## See Also
+
+  * [Live Demo: Date Picker](https://demos.telerik.com/blazor/datepicker/index)
+  * [Input Validation]({%slug common-features/input-validation%})