From 9328cfcdae3c9d3b25816aaf64ee33df06c03526 Mon Sep 17 00:00:00 2001 From: Dobrinka Yordanova Date: Fri, 4 Oct 2024 17:03:17 +0300 Subject: [PATCH 1/2] Add dateonly and timeonly support to pickers. --- controls/datepicker/dateonly.md | 43 +++++++++++++++++++++++++++++ controls/datepicker/overview.md | 1 + controls/timepicker/overview.md | 2 ++ controls/timepicker/timeonly.md | 43 +++++++++++++++++++++++++++++ controls/timespanpicker/overview.md | 2 ++ controls/timespanpicker/timeonly.md | 42 ++++++++++++++++++++++++++++ 6 files changed, 133 insertions(+) create mode 100644 controls/datepicker/dateonly.md create mode 100644 controls/timepicker/timeonly.md create mode 100644 controls/timespanpicker/timeonly.md diff --git a/controls/datepicker/dateonly.md b/controls/datepicker/dateonly.md new file mode 100644 index 000000000..b48b2cd52 --- /dev/null +++ b/controls/datepicker/dateonly.md @@ -0,0 +1,43 @@ +--- +title: Date Only Support +page_title: .NET MAUI Date Picker Documentation - Date Only Support +description: Set date only type in the Telerik UI for .NET MAUI DatePicker. +position: 4 +slug: datepicker-dateonly +--- + +# Date Only Support in .NET MAUI DatePicker + +The DatePicker has a support for `DateOnly`. You can set a `DateOnly` value to the `MinimumDate`, `MaximumDate`, `Date` and `DefaultHighlightedDate` properties by using the Telerik `DateOnlyToDateTimeConverter `converter. The converter converts `System.DateOnly` to `System.DateTime` and converts back `System.DateTime` to `System.DateOnly`. + +Here is the converter definition in XAML: + + + +The following example demonstrates how to set `DateOnly` in the DatePicker using a converter. + +**1.** Define the control and the properties: + + + +**2.** Define the converter in the Page's resource: + + + +**3.** Add the following namespace: + + ```XAML +xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui" + ``` + + **4.** Add the `ViewModel`: + + + +## See Also + +- [Formatting the Telerik UI for .NET MAUI DatePicker]({%slug datepicker-formatting%}) +- [.NET MAUI DatePicker Templates]({%slug datepicker-templates%}) +- [.NET MAUI DatePicker Selection]({%slug datepicker-selection%}) +- [.NET MAUI DatePicker Styling]({%slug datepicker-styling%}) +- [.NET MAUI DatePicker Product Page](https://www.telerik.com/maui-ui/datepicker) diff --git a/controls/datepicker/overview.md b/controls/datepicker/overview.md index 93726811e..f584d91f3 100644 --- a/controls/datepicker/overview.md +++ b/controls/datepicker/overview.md @@ -20,6 +20,7 @@ The Telerik UI for .NET MAUI DatePicker allows you to select a date and visualiz * [Templates]({%slug datepicker-templates%})—The DatePicker provides templates for its header and footer as well as exposes templates for its placeholder and display text. * [Text upon selection]({%slug datepicker-formatting%}#setting-the-closed-dialog-string-format)—You can set the text that will be displayed when a date is selected by using the `DisplayStringFormat` property of the DatePicker. * [Date ranges]({%slug datepicker-date-range%})—You can also define date ranges by setting minimum and maximum date values, and choose a date within that range. +* [DateOnly Support]({%slug datepicker-dateonly%})—The DatePicker provides a support for DateOnly type using a converter. * [Flexible styling API]({%slug datepicker-styling%})—The DatePicker provides a number of styling capabilities, which enable you to style its spinners, popup and popup header and footer, the displayed text displayed after a date is selected, and more. * [Commands support]({%slug datepicker-commands%})—The DatePicker exposes commands that allow you to clear the selected date and to open and close the popup. * [Localization support]({%slug datepicker-localization%})—Translate the used across the DatePicker text to other languages, so that your app can be adapted to different regions. diff --git a/controls/timepicker/overview.md b/controls/timepicker/overview.md index 91e5c4ab0..acc58f35a 100644 --- a/controls/timepicker/overview.md +++ b/controls/timepicker/overview.md @@ -19,6 +19,8 @@ The TimePicker provides a number of features which allow you to set a time range * [Time ranges]({%slug timepicker-time-range%})—The TimePicker allows you to define a time range by setting minimum and maximum time values and enables users to choose a time within that range. +* [TimeOnly Support]({%slug timepicker-timeonly%})—The TimePicker provides a support for TimeOnly type using a converter. + * [Spinner format]({%slug timepicker-formatting%}#spinner-format)—The TimePicker for .NET MAUI allows you to use a standard or a custom time format string through the `TimePicker.SpinnerFormat` property. Depending on the types of the format that is set, the picker visualizes spinner controls with pre-populated values that can be picked. * [Picker mode]({%slug timepicker-picker-mode%})—You can choose between `Popup` and `DropDown` UI for showing the spinner controls with the available time values. For Desktop the default picker mode is `DropDown` while for mobile it's `Popup`. diff --git a/controls/timepicker/timeonly.md b/controls/timepicker/timeonly.md new file mode 100644 index 000000000..015a690ab --- /dev/null +++ b/controls/timepicker/timeonly.md @@ -0,0 +1,43 @@ +--- +title: TimeOnly Support +page_title: .NET MAUI TimePicker Documentation - TimeOnly Support +description: Set date only type in the Telerik UI for .NET MAUI TimePicker. +position: 4 +slug: timepicker-timeonly +--- + +# TimeOnly Support in .NET MAUI TimePicker + +The TimePicker has a support for `TimeOnly`. You can set a `TimeOnly` value to the `MinimumTime`, `MaximumTime`, `Time` and `DefaultHighlightedTime` properties by using the Telerik `TimeOnlyToTimeSpanConverter `converter. The converter converts `System.TimeOnly` to `System.TimeSpan` and converts back `System.TimeSpan` to `System.TimeOnly`. + +Here is the converter definition in XAML: + + + +The following example demonstrates how to set `TimeOnly` in the TimePicker using a converter. + +**1.** Define the TimePicker control and the time properties: + + + +**2.** Define the converter in the Page's resource: + + + +**3.** Add the following namespace: + + ```XAML +xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui" + ``` + + **4.** Add the `ViewModel`: + + + +## See Also + +- [Templates]({%slug timepicker-templates%}) +- [Time Format Strings]({%slug timepicker-formatting%}) +- [Styling]({%slug timepicker-styling%}) +- [Selection]({%slug timepicker-selection%}) +- [Commands]({%slug timepicker-commands%}) diff --git a/controls/timespanpicker/overview.md b/controls/timespanpicker/overview.md index 4709c8bc3..54abe6162 100644 --- a/controls/timespanpicker/overview.md +++ b/controls/timespanpicker/overview.md @@ -25,6 +25,8 @@ The Telerik UI for .NET MAUI TimeSpanPicker provides an easy way to select a tim * [Time range]({%slug timespanpicker-timespan-range%})—The TimeSpanPicker allows you to define a time range by setting minimum and maximum time values and enables users to choose a time within that range. +* [TimeOnly Support]({%slug timespanpicker-timeonly%})—The TimeSpanPicker provides a support for TimeOnly type using a converter. + * [Time interval selection]({%slug timespanpicker-selection%})—You can set a currently selected time interval to the TimeSpanPicker or define a default highlighted time interval. * [Incremental time steps]({%slug timespanpicker-timespan-steps%})—You can also change the default time interval steps to days, hours, minutes, or seconds. diff --git a/controls/timespanpicker/timeonly.md b/controls/timespanpicker/timeonly.md new file mode 100644 index 000000000..559220c28 --- /dev/null +++ b/controls/timespanpicker/timeonly.md @@ -0,0 +1,42 @@ +--- +title: TimeOnly Support +page_title: .NET MAUI TimeSpanPicker Documentation - TimeOnly Support +description: Set date only type in the Telerik UI for .NET MAUI TimeSpanPicker. +position: 4 +slug: timespanpicker-timeonly +--- + +# TimeOnly Support in .NET MAUI TimeSpanPicker + +The TimePicker has a support for `TimeOnly`. Set a `TimeOnly` value to the `MinimumTime`, `MaximumTime`, `Time` and `DefaultHighlightedTime` properties by using the Telerik `TimeOnlyToTimeSpanConverter `converter. The converter converts `System.TimeOnly` to `System.TimeSpan` and converts back `System.TimeSpan` to `System.TimeOnly`. + +Here is the converter definition in XAML: + + + +The following example demonstrates how to set `TimeOnly` in the TimeSpanPicker using a converter. + +**1.** Define the TimeSpanPicker control and the time properties: + + + +**2.** Define the converter in the Page's resource: + + + +**3.** Add the following namespace: + + ```XAML +xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui" + ``` + + **4.** Add the `ViewModel`: + + + +## See Also + +- [Templates]({%slug timespanpicker-templates%}) +- [Styling]({%slug timespanpicker-styling%}) +- [Commands]({%slug timespanpicker-commands%}) +- [Selection]({%slug timespanpicker-selection%}) From f40e809bca8bc4068ecc670722643c54ffc32d73 Mon Sep 17 00:00:00 2001 From: Dobrinka Yordanova Date: Fri, 4 Oct 2024 17:04:50 +0300 Subject: [PATCH 2/2] fix namespace --- controls/datepicker/dateonly.md | 2 +- controls/timepicker/timeonly.md | 2 +- controls/timespanpicker/timeonly.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/controls/datepicker/dateonly.md b/controls/datepicker/dateonly.md index b48b2cd52..9d5c60641 100644 --- a/controls/datepicker/dateonly.md +++ b/controls/datepicker/dateonly.md @@ -24,7 +24,7 @@ The following example demonstrates how to set `DateOnly` in the DatePicker using -**3.** Add the following namespace: +**3.** Add the `telerik` namespace: ```XAML xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui" diff --git a/controls/timepicker/timeonly.md b/controls/timepicker/timeonly.md index 015a690ab..47fe66220 100644 --- a/controls/timepicker/timeonly.md +++ b/controls/timepicker/timeonly.md @@ -24,7 +24,7 @@ The following example demonstrates how to set `TimeOnly` in the TimePicker using -**3.** Add the following namespace: +**3.** Add the `telerik` namespace: ```XAML xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui" diff --git a/controls/timespanpicker/timeonly.md b/controls/timespanpicker/timeonly.md index 559220c28..175152e25 100644 --- a/controls/timespanpicker/timeonly.md +++ b/controls/timespanpicker/timeonly.md @@ -24,7 +24,7 @@ The following example demonstrates how to set `TimeOnly` in the TimeSpanPicker u -**3.** Add the following namespace: +**3.** Add the `telerik` namespace: ```XAML xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"