[*] DatePicker: date range selection

  - Fix date range selection
  - 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.
@@ -557,7 +568,6 @@ pub fn Calendar(props: CalendarProps) -> Element {
 pub struct RangeCalendarContext {
     // The date that the user clicked on to begin range selection
     anchor_date: Signal<Option<Date>>,
-    set_anchor_date: Callback<Option<Date>>,
     // Currently highlighted date range
     highlighted_range: Signal<Option<DateRange>>,
     set_selected_range: Callback<Option<DateRange>>,
@@ -570,7 +580,6 @@ impl RangeCalendarContext {
             Some(anchor) => {
                 if let Some(date) = date {
                     self.anchor_date.set(None);
-                    self.set_anchor_date.call(None);
 
                     let range = DateRange::new(date, anchor);
                     self.set_selected_range.call(Some(range));
@@ -579,7 +588,6 @@ impl RangeCalendarContext {
             }
             None => {
                 self.anchor_date.set(date);
-                self.set_anchor_date.call(date);
 
                 let range = date.map(|d| DateRange::new(d, d));
                 self.highlighted_range.set(range);
@@ -598,7 +606,6 @@ impl RangeCalendarContext {
     /// Set previous selected range
     pub fn reset_selection(&mut self, range: Option<DateRange>) {
         self.anchor_date.set(None);
-        self.set_anchor_date.call(None);
         self.highlighted_range.set(range);
     }
 }
@@ -614,10 +621,6 @@ pub struct RangeCalendarProps {
     #[props(default)]
     pub on_range_change: Callback<Option<DateRange>>,
 
-    /// Callback when anchor date changes
-    #[props(default)]
-    pub(crate) on_anchor_change: Callback<Option<Date>>,
-
     /// Callback when display weekday
     #[props(default = Callback::new(|weekday: Weekday| weekday_abbreviation(weekday).to_string()))]
     pub on_format_weekday: Callback<Weekday, String>,
@@ -739,7 +742,6 @@ pub fn RangeCalendar(props: RangeCalendarProps) -> Element {
     // Create RangeCalendar context provider for child components
     let mut ctx = use_context_provider(|| RangeCalendarContext {
         anchor_date,
-        set_anchor_date: props.on_anchor_change,
         highlighted_range,
         set_selected_range: props.on_range_change,
     });