Placeholders for the Date*Pickers (#521)

* chore(dateinput): placeholder docs

* chore(datepicker): placeholder docs

* chore(daterangepicker): placeholder docs

* chore(datetimepicker): placeholder docs

* chore(timepicker): placeholder docs

* chore(placeholders): format placeholders

Author: svdimitr

_contentTemplates/common/format-placeholders.md

@@ -0,0 +1,42 @@
+#format-placeholder
+
+## Format Placeholder
+
+The `FormatPlaceholder` parameter allows you to set custom strings as placeholders for each DateTime segment and is available for the following Telerik UI for Blazor components:
+
+* DateInput
+* DatePicker
+* DateTimePicker
+* DateRangePicker
+* TimePicker
+
+To set up the `FormatPlaceholder`, you should use the `<*Component*FormatPlaceholder>` nested tag. It allows you to set format placeholders by using the following parameters:
+
+* `Day`
+* `Month`
+* `Year`
+* `Hour`
+* `Minute`
+* `Second`
+* `Weekday`
+
+By default the value for all parameters would be `null`, the full format specifier for would be applied. 
+
+>caption Provide a custom string to the day, month, and year segments
+
+````CSHTML
+@* Provide custom rendering of the day, month, and year segments *@
+
+<TelerikDatePicker @bind-Value="@DateValue">
+    <DatePickerFormatPlaceholder Day="Day"
+                                 Month="Month"
+                                 Year="YEAR">
+    </DatePickerFormatPlaceholder>
+</TelerikDatePicker>
+
+@code {
+    public DateTime? DateValue { get; set; }
+}
+````
+
+#end

_contentTemplates/date-inputs/format-placeholders.md

@@ -0,0 +1,25 @@
+#format-placeholder
+
+### Format Placeholder
+
+The `FormatPlaceholder` parameter allows you to set custom strings as placeholders for each DateTime segment and is available for the following Telerik UI for Blazor components:
+
+* DateInput
+* DatePicker
+* DateTimePicker
+* DateRangePicker
+* TimePicker
+
+To set up the `FormatPlaceholder`, you should use the `<*Component*FormatPlaceholder>` nested tag. It allows you to set format placeholders by using the following parameters:
+
+* `Day`
+* `Month`
+* `Year`
+* `Hour`
+* `Minute`
+* `Second`
+* `Weekday`
+
+By default the value for all parameters would be `null`, the full format specifier for would be applied. 
+
+#end

components/chart/types/column.md

@@ -18,6 +18,8 @@ The <a href="https://www.telerik.com/blazor-ui/column-chart" target="_blank">Bla
 
 @[template](/_contentTemplates/chart/link-to-basics.md#understand-basics-and-databinding-first)
 
+@[template](/_contentTemplates/date-inputs/format-placeholders.md#format-placeholder)
+
 #### To create a column chart:
 
 1. add a `ChartSeries` to the `ChartSeriesItems` collection

components/dateinput/overview.md

@@ -56,8 +56,12 @@ The date input provides the following features:
 
 * `TabIndex` - maps to the `tabindex` attribute of the HTML element. You can use it to customize the order in which the inputs in your form focus with the `Tab` key.
 
+* `Placeholder` - `string` - maps to the `placeholder` attribute of the HTML element. The `Placeholder` will appear if the component is bound to nullable DateTime object - `DateTime?`, but will not be rendered if the component is bound to the default value of a non-nullable DateTime object. 
+
 * Validation - see the [Input Validation]({%slug common-features/input-validation%}) article.
 
+@[template](/_contentTemplates/date-inputs/format-placeholders.md#format-placeholder)
+
 ## DateTime and Nullable DateTime
 
 The behavior of the component will depend on the type of field it is bound to, and this can result in different user experience and values that it will output:

components/datepicker/overview.md

@@ -67,11 +67,13 @@ The Blazor Date Picker component exposes the following features:
 
 * `TabIndex` - maps to the `tabindex` attribute of the HTML element. You can use it to customize the order in which the inputs in your form focus with the `Tab` key.
 
+* `Placeholder` - `string` - maps to the `placeholder` attribute of the HTML element. The `Placeholder` will appear if the component is bound to **nullable** DateTime object - `DateTime?`, but will not be rendered if the component is bound to the default value of a non-nullable DateTime object. 
+
 * 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.
 
-
+@[template](/_contentTemplates/date-inputs/format-placeholders.md#format-placeholder)
 
 ## See Also
 

components/daterangepicker/overview.md

@@ -64,14 +64,16 @@ The Blazor Date Range Picker component exposes the following features:
 
 * `TabIndex` - maps to the `tabindex` attribute of both `input` HTML elements in the component and them both will have the same `tabindex`. You can use it to customize the order in which the inputs in your form focus with the `Tab` key.
 
+* `Placeholder` - `string` - maps to the `placeholder` attribute of the HTML element. The `Placeholder` will appear if the component is bound to **nullable** DateTime object - `DateTime?`, but will not be rendered if the component is bound to the default value of a non-nullable DateTime object. 
+
 * Validation - see the [Input Validation]({%slug common-features/input-validation%}) article. 
     * To restrict the user from writing dates in the input so that the end is after the start, you must implement a custom data annotation attribute (you can find an example in the article linked above). The DateRangePicker component does not do this out-of-the-box in order to provide smooth user experience - the code cannot know what the user intent is and they might fix the range if they are given the chance, so correcting the input immediately may prevent them from using it comfortably. The component can fully control the user experience in the popup calendar and it ensures there that the range values are valid (start is before the end). If the user chooses an end date before the start, this date becomes the new start and they can choose the end again.
 
 * [Events]({%slug daterangepicker-events %}) - a set of events that let you respond to the user actions with the component, and also to extract the data from it.
 
 The date range 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.
 
-
+@[template](/_contentTemplates/date-inputs/format-placeholders.md#format-placeholder)
 
 ## See Also
 

components/datetimepicker/overview.md

@@ -70,14 +70,16 @@ The DateTimePicker component exposes the following features:
 
 * `TabIndex` - maps to the `tabindex` attribute of the HTML element. You can use it to customize the order in which the inputs in your form focus with the `Tab` key.
 
-* Validation - see the [Input Validation]({%slug common-features/input-validation%}) article.
-
+* `Placeholder` - `string` - maps to the `placeholder` attribute of the HTML element. The `Placeholder` will appear if the component is bound to **nullable** DateTime object - `DateTime?`, but will not be rendered if the component is bound to the default value of a non-nullable DateTime object. 
 
+* Validation - see the [Input Validation]({%slug common-features/input-validation%}) article.
 
 When using the dropdown to edit dates, you must click the "Set" button to commit the date. It is located in the Time portion of the dropdown (you will be navigated to it automatically upon selecting a 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.
 
 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.
 
+@[template](/_contentTemplates/date-inputs/format-placeholders.md#format-placeholder)
+
 
 ## See Also
 

components/timepicker/overview.md

@@ -70,6 +70,8 @@ The Time Picker component exposes the following features:
 * `Width` - Defines the width of the TimePicker.
 
 * `TabIndex` - maps to the `tabindex` attribute of the HTML element. You can use it to customize the order in which the inputs in your form focus with the `Tab` key.
+* 
+* `Placeholder` - `string` - maps to the `placeholder` attribute of the HTML element. The `Placeholder` will appear if the component is bound to **nullable** DateTime object - `DateTime?`, but will not be rendered if the component is bound to the default value of a non-nullable DateTime object. 
 
 * Validation - see the [Input Validation]({%slug common-features/input-validation%}) article.
 
@@ -81,6 +83,7 @@ The time format specifiers in the `Format` control the tumblers available in the
 
 The Time Picker component supports `DateTime`, `DateTime?`, `DateTimeOffset` and `DateTimeOffset?` types.
 
+@[template](/_contentTemplates/date-inputs/format-placeholders.md#format-placeholder)
 
 ## See Also