diff --git a/_config.yml b/_config.yml index 5d462e10b9..754e265a03 100644 --- a/_config.yml +++ b/_config.yml @@ -243,6 +243,7 @@ intro_columns: title: "Scheduling" items: "Calendar": "components/calendar/overview" + "Date Picker": "components/datepicker/overview" - title: "Layout" items: diff --git a/common-features/input-validation.md b/common-features/input-validation.md index 1322f9107a..459352fa77 100644 --- a/common-features/input-validation.md +++ b/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 - - - - -

- Name: - -

-

- Height (cm): - -

-

- Birthday: - -

-

- Accepts terms: - -

- - - + + + + +

+ Name: + +

+

+ Height (cm): + +

+

+ Birthday: + +

+

+ Birthday: + +

+

+ Accepts terms: + +

+ + + @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; } diff --git a/components/dateinput/overview.md b/components/dateinput/overview.md index b70daffc71..81c199ac4f 100644 --- a/components/dateinput/overview.md +++ b/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. diff --git a/components/datepicker/images/datepicker-first-look.png b/components/datepicker/images/datepicker-first-look.png new file mode 100644 index 0000000000..eaa3401294 Binary files /dev/null and b/components/datepicker/images/datepicker-first-look.png differ diff --git a/components/datepicker/overview.md b/components/datepicker/overview.md new file mode 100644 index 0000000000..ee8c8aa91b --- /dev/null +++ b/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 + + + +
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 + + + + @functions { + Telerik.Blazor.Components.DatePicker.TelerikDatePicker 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%}) \ No newline at end of file