[*] DatePicker: support disabled ranges

Author: ddudenin

preview/src/components/date_picker/component.rs

@@ -20,6 +20,10 @@ pub fn DatePicker(props: DatePickerProps) -> Element {
                 selected_date: props.selected_date,
                 disabled: props.disabled,
                 read_only: props.read_only,
+                min_date: props.min_date,
+                max_date: props.max_date,
+                disabled_ranges: props.disabled_ranges,
+                roving_loop: props.roving_loop,
                 attributes: props.attributes,
                 date_picker::DatePickerPopover {
                     popover_root: PopoverRoot,
@@ -41,6 +45,10 @@ pub fn DateRangePicker(props: DateRangePickerProps) -> Element {
                 selected_range: props.selected_range,
                 disabled: props.disabled,
                 read_only: props.read_only,
+                min_date: props.min_date,
+                max_date: props.max_date,
+                disabled_ranges: props.disabled_ranges,
+                roving_loop: props.roving_loop,
                 attributes: props.attributes,
                 date_picker::DatePickerPopover {
                     popover_root: PopoverRoot,

preview/src/components/date_picker/variants/unavailable_dates/mod.rs

@@ -0,0 +1,33 @@
+use super::super::component::*;
+use dioxus::prelude::*;
+
+use dioxus_primitives::calendar::DateRange;
+use time::{ext::NumericalDuration, UtcDateTime};
+
+#[component]
+pub fn Demo() -> Element {
+    let mut selected_range = use_signal(|| None::<DateRange>);
+
+    let now = UtcDateTime::now().date();
+    let disabled_ranges = use_signal(|| {
+        vec![
+            DateRange::new(now, now.saturating_add(3.days())),
+            DateRange::new(now.saturating_add(15.days()), now.saturating_add(18.days())),
+            DateRange::new(now.saturating_add(22.days()), now.saturating_add(23.days())),
+        ]
+    });
+
+    rsx! {
+        div {
+            DateRangePicker {
+                selected_range: selected_range(),
+                on_range_change: move |range| {
+                    tracing::info!("Selected range: {:?}", range);
+                    selected_range.set(range);
+                },
+                disabled_ranges: disabled_ranges,
+                DateRangePickerInput {}
+            }
+        }
+    }
+}

preview/src/components/mod.rs

@@ -66,7 +66,7 @@ examples!(
     checkbox,
     collapsible,
     context_menu,
-    date_picker[internationalized, range],
+    date_picker[internationalized, range, unavailable_dates],
     dialog,
     dropdown_menu,
     hover_card,

primitives/src/calendar.rs

@@ -201,14 +201,16 @@ impl Display for DateRange {
     }
 }
 
+/// Calendar available dates
 #[derive(Debug, Clone, PartialEq)]
-struct AvailableRanges {
+pub struct AvailableRanges {
     /// A sorted list of dates. Values after an odd number of elements are disabled.
     changes: Vec<Date>,
 }
 
 impl AvailableRanges {
-    fn new(disabled_ranges: &[DateRange]) -> Self {
+    /// Create a new available dates
+    pub fn new(disabled_ranges: &[DateRange]) -> Self {
         let mut sorted_range: Vec<_> = disabled_ranges
             .iter()
             .enumerate()
@@ -236,7 +238,8 @@ impl AvailableRanges {
         }
     }
 
-    fn valid_interval(&self, date: Date) -> bool {
+    /// Check the availability of given date
+    pub fn valid_interval(&self, date: Date) -> bool {
         match self.changes.binary_search(&date) {
             Ok(_) => false,
             Err(index) => index % 2 == 0,
@@ -266,6 +269,14 @@ impl AvailableRanges {
 
         Some(DateRange::new(start, end))
     }
+
+    /// Get disabled ranges
+    pub fn to_disabled_ranges(&self) -> Vec<DateRange> {
+        self.changes
+            .chunks(2)
+            .map(|d| DateRange::new(d[0], d[1]))
+            .collect()
+    }
 }
 
 /// The base context provided by the [`Calendar`] and the [`RangeCalendar`] component to its children.

primitives/src/date_picker.rs

@@ -1,7 +1,9 @@
 //! Defines the [`DatePicker`] and [`DateRangePicker`] components and its subcomponents, which allowing users to enter or select a date value
 
 use crate::{
-    calendar::{weekday_abbreviation, CalendarProps, DateRange, RangeCalendarProps},
+    calendar::{
+        weekday_abbreviation, AvailableRanges, CalendarProps, DateRange, RangeCalendarProps,
+    },
     dioxus_core::Properties,
     focus::{use_focus_controlled_item, use_focus_provider, FocusState},
     popover::*,
@@ -24,6 +26,7 @@ struct BaseDatePickerContext {
     disabled: ReadSignal<bool>,
     focus: FocusState,
     enabled_date_range: DateRange,
+    available_ranges: Memo<AvailableRanges>,
 }
 
 /// The context provided by the [`DatePicker`] component to its children.
@@ -69,6 +72,10 @@ pub struct DatePickerProps {
     #[props(default = date!(2050-12-31))]
     pub max_date: Date,
 
+    /// Unavailable dates
+    #[props(default)]
+    pub disabled_ranges: ReadSignal<Vec<DateRange>>,
+
     /// Whether focus should loop around when reaching the end.
     #[props(default = ReadSignal::new(Signal::new(false)))]
     pub roving_loop: ReadSignal<bool>,
@@ -128,6 +135,7 @@ pub struct DatePickerProps {
 pub fn DatePicker(props: DatePickerProps) -> Element {
     let open = use_signal(|| false);
     let focus = use_focus_provider(props.roving_loop);
+    let available_ranges = use_memo(move || AvailableRanges::new(&props.disabled_ranges.read()));
 
     // Create context provider for child components
     use_context_provider(|| BaseDatePickerContext {
@@ -136,6 +144,7 @@ pub fn DatePicker(props: DatePickerProps) -> Element {
         disabled: props.disabled,
         focus,
         enabled_date_range: DateRange::new(props.min_date, props.max_date),
+        available_ranges,
     });
 
     use_context_provider(|| DatePickerContext {
@@ -199,6 +208,10 @@ pub struct DateRangePickerProps {
     #[props(default = date!(2050-12-31))]
     pub max_date: Date,
 
+    /// Unavailable dates
+    #[props(default)]
+    pub disabled_ranges: ReadSignal<Vec<DateRange>>,
+
     /// Whether focus should loop around when reaching the end.
     #[props(default = ReadSignal::new(Signal::new(false)))]
     pub roving_loop: ReadSignal<bool>,
@@ -258,13 +271,16 @@ pub fn DateRangePicker(props: DateRangePickerProps) -> Element {
     let open = use_signal(|| false);
     let focus = use_focus_provider(props.roving_loop);
 
+    let available_ranges = use_memo(move || AvailableRanges::new(&props.disabled_ranges.read()));
+
     // Create context provider for child components
     use_context_provider(|| BaseDatePickerContext {
         open,
         read_only: props.read_only,
         disabled: props.disabled,
         focus,
         enabled_date_range: DateRange::new(props.min_date, props.max_date),
+        available_ranges,
     });
 
     let date_range = use_signal(|| (props.selected_range)());
@@ -410,6 +426,10 @@ pub struct DatePickerCalendarProps<T: Properties + PartialEq> {
     #[props(default = date!(2050-12-31))]
     pub max_date: Date,
 
+    /// Unavailable dates
+    #[props(default)]
+    pub disabled_ranges: ReadSignal<Vec<DateRange>>,
+
     /// Additional attributes to extend the calendar element
     #[props(extends = GlobalAttributes)]
     pub attributes: Vec<Attribute>,
@@ -484,6 +504,7 @@ pub fn DatePickerCalendar(props: DatePickerCalendarProps<CalendarProps>) -> Elem
                 ctx.set_date(date);
                 base_ctx.open.set(false);
             },
+            disabled_ranges: base_ctx.available_ranges.read().to_disabled_ranges(),
             on_format_weekday: props.on_format_weekday,
             on_format_month: props.on_format_month,
             view_date: view_date(),
@@ -561,6 +582,7 @@ pub fn DateRangePickerCalendar(props: DatePickerCalendarProps<RangeCalendarProps
                 ctx.set_range(range);
                 base_ctx.open.set(false);
             },
+            disabled_ranges: base_ctx.available_ranges.read().to_disabled_ranges(),
             on_format_weekday: props.on_format_weekday,
             on_format_month: props.on_format_month,
             view_date: view_date(),
@@ -857,8 +879,13 @@ fn DateElement(props: DateElementProps) -> Element {
                 .ok()
                 .filter(|date| ctx.enabled_date_range.contains(*date))
             {
+                let new_date = if ctx.available_ranges.read().valid_interval(date) {
+                    Some(date)
+                } else {
+                    None
+                };
                 tracing::info!("Parsed date: {date:?}");
-                props.on_date_change.call(Some(date));
+                props.on_date_change.call(new_date);
             }
         }
     });
@@ -1069,7 +1096,7 @@ pub fn DateRangePickerInput(props: DatePickerInputProps) -> Element {
     use_effect(move || {
         if let (Some(start), Some(end)) = (start_date(), end_date()) {
             let range = Some(DateRange::new(start, end));
-            tracing::info!("set range {range:?}");
+
             ctx.set_range(range);
         };
     });