Add Android picker error haptics (#886)

Co-authored-by: Vetle Finstad <finstad@Vetles-MacBook-Pro-2.local>

Author: Vetle444

CHANGELOG.md

@@ -1,3 +1,6 @@
+## [60.2.5]
+- [Pickers][Android] Added error haptic feedback when TimePicker or DateAndTimePicker selections are clamped by minimum or maximum constraints.
+
 ## [60.2.4]
 - [NavigationListItem] Groups the row as one accessibility element, applies the platform button trait including when used in a CollectionView, and uses `Title` as the default screen reader description while still allowing consumers to override `SemanticProperties.Description`.
 

src/app/Playground/VetleSamples/VetlePage.xaml

@@ -90,6 +90,25 @@
                                                    HorizontalOptions="Start"/>
                      </dui:VerticalStackLayout>
 
+                     <!-- DatePicker MinimumDate/MaximumDate -->
+                     <Label Text="DatePicker Date Constraints"
+                            Style="{dui:Styles Label=SectionHeader}"
+                            Margin="{dui:Thickness Top=content_margin_large}"/>
+
+                     <dui:VerticalStackLayout Spacing="{dui:Sizes content_margin_small}"
+                                              Margin="{dui:Thickness Top=content_margin_small}">
+                            <Label Text="MaximumDate = DateTime.Now (today should stay selectable)"
+                                   Style="{dui:Styles Label=UI200}"/>
+                            <dui:DatePicker MaximumDate="{x:Static system:DateTime.Now}"
+                                            HorizontalOptions="Start"/>
+
+                            <Label Text="MinimumDate = DateTime.Now (today should stay selectable)"
+                                   Style="{dui:Styles Label=UI200}"
+                                   Margin="{dui:Thickness Top=content_margin_small}"/>
+                            <dui:DatePicker MinimumDate="{x:Static system:DateTime.Now}"
+                                            HorizontalOptions="Start"/>
+                     </dui:VerticalStackLayout>
+
                      <!-- TimePicker MinimumTime/MaximumTime -->
                      <Label Text="TimePicker Time Constraints"
                             Style="{dui:Styles Label=SectionHeader}"

src/library/DIPS.Mobile.UI/Components/Pickers/DateAndTimePicker/Android/DateAndTimePickerService.cs

@@ -1,12 +1,13 @@
+using DIPS.Mobile.UI.API.Vibration;
 using DIPS.Mobile.UI.Components.Pickers.DatePicker.Android;
 using DIPS.Mobile.UI.Components.Pickers.TimePicker.Android;
 
 namespace DIPS.Mobile.UI.Components.Pickers.DateAndTimePicker;
 
 public partial class DateAndTimePickerService
 {
-    private static MaterialDatePickerFragment? m_materialDatePicker;
-    private static MaterialTimePickerFragment? m_materialTimePicker;
+    private static MaterialDatePickerFragment? s_materialDatePicker;
+    private static MaterialTimePickerFragment? s_materialTimePicker;
 
     public static partial void Open(DateAndTimePicker dateAndTimePicker, View chipTapped, bool datePickerTapped)
     {
@@ -26,18 +27,25 @@ public static partial void Open(DateAndTimePicker dateAndTimePicker, View chipTa
                 MinimumDate = dateAndTimePicker.MinimumDate
             };
 
-            datePicker.SelectedDateCommand = new Command(() =>
+            datePicker.SelectedDateCommand = new Command<DateTime?>(selectedDate =>
             {
                 var selectedDateTime = new DateTime(datePicker.SelectedDate.Year, datePicker.SelectedDate.Month, datePicker.SelectedDate.Day, dateOnOpen.TimeOfDay.Hours, dateOnOpen.TimeOfDay.Minutes, 0, dateAndTimePicker.IgnoreLocalTime ? DateTimeKind.Utc : DateTimeKind.Local)
                     .ConvertDate(dateAndTimePicker.GetDateTimeKind());
+
+                if (!IsOutsideDateBounds(dateAndTimePicker, selectedDate) &&
+                    IsOutsideBounds(dateAndTimePicker, selectedDateTime))
+                {
+                    VibrationService.Error();
+                }
+
                 dateAndTimePicker.SetSelectedDateTime(selectedDateTime);
             });
 
-            m_materialDatePicker = new MaterialDatePickerFragment(datePicker);
+            s_materialDatePicker = new MaterialDatePickerFragment(datePicker);
         }
         else
         {
-            var timePicker = new TimePicker.TimePicker { SelectedTime = dateOnOpen.ConvertDate(dateAndTimePicker.IgnoreLocalTime).TimeOfDay };
+            var timePicker = CreateTimePicker(dateAndTimePicker, dateOnOpen);
 
             timePicker.SelectedTimeCommand = new Command(() =>
             {
@@ -48,21 +56,57 @@ public static partial void Open(DateAndTimePicker dateAndTimePicker, View chipTa
                 dateAndTimePicker.SetSelectedDateTime(selectedDateTime);
             });
 
-            m_materialTimePicker = new MaterialTimePickerFragment(timePicker);
+            s_materialTimePicker = new MaterialTimePickerFragment(timePicker);
+        }
+    }
+
+    private static TimePicker.TimePicker CreateTimePicker(DateAndTimePicker dateAndTimePicker, DateTime dateOnOpen)
+    {
+        var selectedDate = dateOnOpen.ConvertDate(dateAndTimePicker.IgnoreLocalTime);
+        var timePicker = new TimePicker.TimePicker { SelectedTime = selectedDate.TimeOfDay };
+
+        if (dateAndTimePicker.MaximumDate is { } maximumDate)
+        {
+            var convertedMaximumDate = maximumDate.ConvertDate(dateAndTimePicker.IgnoreLocalTime);
+            if (selectedDate.Date == convertedMaximumDate.Date)
+            {
+                timePicker.MaximumTime = convertedMaximumDate.TimeOfDay;
+            }
+        }
+
+        if (dateAndTimePicker.MinimumDate is { } minimumDate)
+        {
+            var convertedMinimumDate = minimumDate.ConvertDate(dateAndTimePicker.IgnoreLocalTime);
+            if (selectedDate.Date == convertedMinimumDate.Date)
+            {
+                timePicker.MinimumTime = convertedMinimumDate.TimeOfDay;
+            }
         }
+
+        return timePicker;
     }
 
+    private static bool IsOutsideBounds(DateAndTimePicker dateAndTimePicker, DateTime? selectedDateTime) =>
+        selectedDateTime is { } dateTime &&
+        (dateAndTimePicker.MinimumDate is { } minimumDate && dateTime < minimumDate ||
+         dateAndTimePicker.MaximumDate is { } maximumDate && dateTime > maximumDate);
+
+    private static bool IsOutsideDateBounds(DateAndTimePicker dateAndTimePicker, DateTime? selectedDateTime) =>
+        selectedDateTime is { } dateTime &&
+        (dateAndTimePicker.MinimumDate is { } minimumDate && dateTime.Date < minimumDate.Date ||
+         dateAndTimePicker.MaximumDate is { } maximumDate && dateTime.Date > maximumDate.Date);
+
     internal static partial bool IsOpen()
     {
-        if (m_materialDatePicker is not null && m_materialDatePicker.IsOpen())
+        if (s_materialDatePicker is not null && s_materialDatePicker.IsOpen())
             return true;
 
-        return m_materialTimePicker is not null && m_materialTimePicker.IsOpen();
+        return s_materialTimePicker is not null && s_materialTimePicker.IsOpen();
     }
 
     public static partial void Close()
     {
-        m_materialDatePicker?.Close();
-        m_materialTimePicker?.Close();
+        s_materialDatePicker?.Close();
+        s_materialTimePicker?.Close();
     }
 }

src/library/DIPS.Mobile.UI/Components/Pickers/DatePicker/Android/MaterialDatePickerFragment.cs

@@ -44,11 +44,11 @@ public MaterialDatePickerFragment(DatePicker datePicker)
         var listValidators = new List<CalendarConstraints.IDateValidator>();
         if (datePicker.MinimumDate != null) //TODO: Support only setting one of these as well
         {
-            listValidators.Add(DateValidatorPointForward.From(datePicker.MinimumDate.Value.ToLong()));
+            listValidators.Add(DateValidatorPointForward.From(datePicker.MinimumDate.Value.Date.ToLong()));
         }
         if (datePicker.MaximumDate != null)
         {
-            listValidators.Add(DateValidatorPointBackward.Before(datePicker.MaximumDate.Value.ToLong()));
+            listValidators.Add(DateValidatorPointBackward.Before(datePicker.MaximumDate.Value.Date.ToLong()));
         }
 
         if (listValidators.Any())

src/library/DIPS.Mobile.UI/Components/Pickers/TimePicker/Android/MaterialTimePickerFragment.cs

@@ -1,4 +1,5 @@
 using Android.Text.Format;
+using DIPS.Mobile.UI.API.Vibration;
 using DIPS.Mobile.UI.Components.Pickers.DatePickerShared.Android;
 using Google.Android.Material.TimePicker;
 using Microsoft.Maui.Platform;
@@ -49,6 +50,14 @@ public void Close()
 
     public void OnClick(View? v)
     {
-        m_timePicker.SetSelectedDateTime(new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, m_materialTimePicker.Hour, m_materialTimePicker.Minute, 0));
+        var selectedTime = new TimeSpan(m_materialTimePicker.Hour, m_materialTimePicker.Minute, 0);
+
+        if (m_timePicker.MinimumTime is { } minimumTime && selectedTime < minimumTime ||
+            m_timePicker.MaximumTime is { } maximumTime && selectedTime > maximumTime)
+        {
+            VibrationService.Error();
+        }
+
+        m_timePicker.SetSelectedDateTime(new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, selectedTime.Hours, selectedTime.Minutes, 0));
     }
 }

wiki/Components/Pickers.md

@@ -161,6 +161,8 @@ There are three types of date/time pickers:
 ## Date Picker
 A date picker should be used by you to let people pick a date. The date picker is an in-line button with a title that people tap to start picking the date. When a date is picked, the date will be displayed as a part of the in-line button.
 
+When `MinimumDate` or `MaximumDate` is set, Android disables dates outside the allowed range.
+
 ### Usage
 ```xml
 <dui:DatePicker SelectedDate="{Binding SelectedBirthday}"/>
@@ -191,7 +193,7 @@ A `TimePicker` should be used by you to let people pick a time. The `TimePicker`
 ```
 
 ### Constraining selectable times
-You can set `MinimumTime` and `MaximumTime` to restrict the range of times people can choose. On iOS the time picker wheel prevents out-of-range selection. On Android the selected time is clamped after confirmation.
+You can set `MinimumTime` and `MaximumTime` to restrict the range of times people can choose. On iOS the time picker wheel prevents out-of-range selection. On Android the selected time is clamped after confirmation, and out-of-range confirmations give error haptic feedback.
 
 ```xml
 <dui:TimePicker SelectedTime="{Binding SelectedTime}"
@@ -207,7 +209,7 @@ Inspect the [components properties class](https://github.com/DIPSAS/DIPS.Mobile.
 ## DateAndTime Picker
 A `DateAndTimePicker` should be used by you to let people pick both a date -and time. The `DateAndTimePicker` is two in-line buttons with a title that people tap to start picking the date or time. When date is picked, the date or time will be displayed as part of the in-line button.
 
-When `MaximumDate` or `MinimumDate` is set and the selected date equals the boundary date, the time picker is also constrained to the boundary time. On iOS the time wheel prevents out-of-range selection; on Android the value is clamped after confirmation.
+When `MaximumDate` or `MinimumDate` is set and the selected date equals the boundary date, the time picker is also constrained to the boundary time. On iOS the time wheel prevents out-of-range selection; on Android the value is clamped after confirmation, and out-of-range confirmations give error haptic feedback.
 
 ### Usage
 ```xml