Date range in DatePicker

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,
 };
@@ -30,6 +30,27 @@ pub fn DatePicker(props: DatePickerProps) -> Element {
     }
 }
 
+#[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,
+                attributes: props.attributes,
+                date_picker::DatePickerPopover {
+                    popover_root: PopoverRoot,
+                    {props.children}
+                }
+            }
+        }
+    }
+}
+
 #[component]
 pub fn DatePickerInput(props: DatePickerInputProps) -> Element {
     rsx! {
@@ -59,6 +80,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/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/mod.rs

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