Date range in DatePicker

preview/Cargo.toml

@@ -11,7 +11,7 @@ dioxus-i18n = { git = "https://github.com/ealmloff/dioxus-i18n", branch = "bump-
 unic-langid = { version = "0.9", features = ["macros"] }
 strum = { version = "0.27.2", features = ["derive"] }
 tracing.workspace = true
-time = { version = "0.3.41", features = ["std", "macros"] }
+time = { version = "0.3.44", features = ["std", "macros"] }
 
 [build-dependencies]
 syntect = "5.2"

preview/src/components/calendar/component.rs

@@ -22,6 +22,7 @@ pub fn Calendar(props: CalendarProps) -> Element {
                 first_day_of_week: props.first_day_of_week,
                 min_date: props.min_date,
                 max_date: props.max_date,
+                month_count: props.month_count,
                 disabled_ranges: props.disabled_ranges,
                 attributes: props.attributes,
                 {props.children}
@@ -47,6 +48,7 @@ pub fn RangeCalendar(props: RangeCalendarProps) -> Element {
                 first_day_of_week: props.first_day_of_week,
                 min_date: props.min_date,
                 max_date: props.max_date,
+                month_count: props.month_count,
                 disabled_ranges: props.disabled_ranges,
                 attributes: props.attributes,
                 {props.children}

preview/src/components/calendar/style.css

@@ -59,7 +59,20 @@
     cursor: not-allowed;
 }
 
+.calendar-month-title {
+    display: flex;
+    width: 100%;
+    height: 1.75rem;
+    align-items: center;
+    justify-content: center;
+}
+
 /* Calendar Grid */
+.calendar-div {
+    display: flex;
+    flex-direction: row;
+}
+
 .calendar-grid {
     width: 100%;
     padding: 0.5rem;
@@ -72,7 +85,7 @@
 }
 
 .calendar-grid-day-header {
-    width: 2rem;
+    flex: 1;
     color: var(--secondary-color-5);
     font-size: 12px;
     font-weight: 300;
@@ -266,4 +279,4 @@ td:has(.calendar-grid-cell[data-selection-end="true"]) {
     stroke-linecap: round;
     stroke-linejoin: round;
     stroke-width: 2;
-}
+}

preview/src/components/calendar/variants/multi_month/mod.rs

@@ -0,0 +1,38 @@
+use super::super::component::*;
+use dioxus::prelude::*;
+use time::{macros::date, Date, UtcDateTime};
+
+use dioxus_primitives::calendar::DateRange;
+
+#[component]
+pub fn Demo() -> Element {
+    let mut selected_range = use_signal(|| None::<DateRange>);
+    let mut view_date = use_signal(|| UtcDateTime::now().date());
+    rsx! {
+        div { class: "calendar-example", style: "padding: 20px;",
+            RangeCalendar {
+                selected_range: selected_range(),
+                on_range_change: move |range| {
+                    tracing::info!("Selected range: {:?}", range);
+                    selected_range.set(range);
+                },
+                view_date: view_date(),
+                on_view_change: move |new_view: Date| {
+                    tracing::info!("View changed to: {}-{}", new_view.year(), new_view.month());
+                    view_date.set(new_view);
+                },
+                min_date: date!(1995 - 07 - 21),
+                max_date: date!(2035 - 09 - 11),
+                month_count: 3,
+                CalendarHeader {
+                    CalendarNavigation {
+                        CalendarPreviousMonthButton {}
+                        CalendarMonthTitle {}
+                        CalendarNextMonthButton {}
+                    }
+                }
+                CalendarGrid {}
+            }
+        }
+    }
+}

preview/src/components/date_picker/component.rs

@@ -1,7 +1,7 @@
 use dioxus::prelude::*;
 
 use dioxus_primitives::{
-    date_picker::{self, DatePickerInputProps, DatePickerProps},
+    date_picker::{self, DatePickerInputProps, DatePickerProps, DateRangePickerProps},
     popover::{PopoverContentProps, PopoverTriggerProps},
     ContentAlign,
 };
@@ -20,6 +20,37 @@ 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,
+                month_count: props.month_count,
+                disabled_ranges: props.disabled_ranges,
+                roving_loop: props.roving_loop,
+                attributes: props.attributes,
+                date_picker::DatePickerPopover {
+                    popover_root: PopoverRoot,
+                    {props.children}
+                }
+            }
+        }
+    }
+}
+
+#[component]
+pub fn DateRangePicker(props: DateRangePickerProps) -> Element {
+    rsx! {
+        document::Link { rel: "stylesheet", href: asset!("./style.css") }
+        div {
+            date_picker::DateRangePicker {
+                class: "date-picker",
+                on_range_change: props.on_range_change,
+                selected_range: props.selected_range,
+                disabled: props.disabled,
+                read_only: props.read_only,
+                min_date: props.min_date,
+                max_date: props.max_date,
+                month_count: props.month_count,
+                disabled_ranges: props.disabled_ranges,
+                roving_loop: props.roving_loop,
                 attributes: props.attributes,
                 date_picker::DatePickerPopover { popover_root: PopoverRoot, {props.children} }
             }
@@ -54,6 +85,35 @@ pub fn DatePickerInput(props: DatePickerInputProps) -> Element {
     }
 }
 
+#[component]
+pub fn DateRangePickerInput(props: DatePickerInputProps) -> Element {
+    rsx! {
+        date_picker::DateRangePickerInput {
+            on_format_day_placeholder: props.on_format_day_placeholder,
+            on_format_month_placeholder: props.on_format_month_placeholder,
+            on_format_year_placeholder: props.on_format_year_placeholder,
+            attributes: props.attributes,
+            {props.children}
+            DatePickerPopoverTrigger {}
+            DatePickerPopoverContent {
+                align: ContentAlign::Center,
+                date_picker::DateRangePickerCalendar {
+                    calendar: RangeCalendar,
+                    CalendarHeader {
+                        CalendarNavigation {
+                            CalendarPreviousMonthButton {}
+                            CalendarSelectMonth {}
+                            CalendarSelectYear {}
+                            CalendarNextMonthButton {}
+                        }
+                    }
+                    CalendarGrid {}
+                }
+            }
+        }
+    }
+}
+
 #[component]
 pub fn DatePickerPopoverTrigger(props: PopoverTriggerProps) -> Element {
     rsx! {

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

@@ -0,0 +1,27 @@
+use super::super::component::*;
+use dioxus::prelude::*;
+
+use dioxus_i18n::tid;
+use time::Date;
+
+#[component]
+pub fn Demo() -> Element {
+    let mut selected_date = use_signal(|| None::<Date>);
+
+    rsx! {
+        div {
+            DatePicker {
+                selected_date: selected_date(),
+                on_value_change: move |v| {
+                    tracing::info!("Selected date changed: {:?}", v);
+                    selected_date.set(v);
+                },
+                DatePickerInput {
+                    on_format_day_placeholder: || tid!("D_Abbr"),
+                    on_format_month_placeholder: || tid!("M_Abbr"),
+                    on_format_year_placeholder: || tid!("Y_Abbr"),
+                }
+            }
+        }
+    }
+}

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

@@ -1,7 +1,6 @@
 use super::super::component::*;
 use dioxus::prelude::*;
 
-use dioxus_i18n::tid;
 use time::Date;
 
 #[component]
@@ -16,11 +15,7 @@ pub fn Demo() -> Element {
                     tracing::info!("Selected date changed: {:?}", v);
                     selected_date.set(v);
                 },
-                DatePickerInput {
-                    on_format_day_placeholder: || tid!("D_Abbr"),
-                    on_format_month_placeholder: || tid!("M_Abbr"),
-                    on_format_year_placeholder: || tid!("Y_Abbr"),
-                }
+                DatePickerInput {}
             }
         }
     }

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

@@ -0,0 +1,23 @@
+use super::super::component::*;
+use dioxus::prelude::*;
+
+use dioxus_primitives::calendar::DateRange;
+
+#[component]
+pub fn Demo() -> Element {
+    let mut selected_range = use_signal(|| None::<DateRange>);
+
+    rsx! {
+        div {
+            DateRangePicker {
+                selected_range: selected_range(),
+                on_range_change: move |range| {
+                    tracing::info!("Selected range: {:?}", range);
+                    selected_range.set(range);
+                },
+                month_count: 2,
+                DateRangePickerInput {}
+            }
+        }
+    }
+}

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

@@ -0,0 +1,22 @@
+use super::super::component::*;
+use dioxus::prelude::*;
+
+use dioxus_primitives::calendar::DateRange;
+
+#[component]
+pub fn Demo() -> Element {
+    let mut selected_range = use_signal(|| None::<DateRange>);
+
+    rsx! {
+        div {
+            DateRangePicker {
+                selected_range: selected_range(),
+                on_range_change: move |range| {
+                    tracing::info!("Selected range: {:?}", range);
+                    selected_range.set(range);
+                },
+                DateRangePickerInput {}
+            }
+        }
+    }
+}

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

@@ -62,12 +62,11 @@ examples!(
     aspect_ratio,
     avatar,
     button,
-    calendar[simple, internationalized, range, unavailable_dates],
-    card,
+    calendar[simple, internationalized, range, multi_month, unavailable_dates],
     checkbox,
     collapsible,
     context_menu,
-    date_picker,
+    date_picker[internationalized, range, multi_month, unavailable_dates],
     dialog,
     dropdown_menu,
     hover_card,

primitives/Cargo.toml

@@ -14,7 +14,7 @@ repository = "https://github.com/DioxusLabs/components"
 [dependencies]
 dioxus.workspace = true
 dioxus-sdk-time = "0.7.0"
-time = { version = "0.3.41", features = ["std", "macros", "parsing"] }
+time = { version = "0.3.44", features = ["std", "macros", "parsing"] }
 num-integer = "0.1.46"
 tracing.workspace = true