Date Picker component

README.md

@@ -33,7 +33,7 @@ Building styled and more featured component libraries on top of Dioxus Primitive
 
 We're still in the early days - Many components are still being created and stabilized.
 
-28/28
+28/29
 
 - [x] Accordion
 - [x] Alert Dialog
@@ -43,6 +43,7 @@ We're still in the early days - Many components are still being created and stab
 - [x] Checkbox
 - [x] Collapsible
 - [x] Context Menu
+- [ ] Date Picker
 - [x] Dialog
 - [x] Dropdown Menu
 - [x] Hover Card

component.json

@@ -32,6 +32,7 @@
     "preview/src/components/toggle_group",
     "preview/src/components/context_menu",
     "preview/src/components/aspect_ratio",
-    "preview/src/components/scroll_area"
+    "preview/src/components/scroll_area",
+    "preview/src/components/date_picker"
   ]
 }

preview/src/components/date_picker/component.json

@@ -0,0 +1,13 @@
+{
+  "name": "date_picker",
+  "description": "A date picker component to select or input dates.",
+  "authors": ["Evan Almloff"],
+  "exclude": ["variants", "docs.md", "component.json"],
+  "cargoDependencies": [
+    {
+      "name": "dioxus-primitives",
+      "git": "https://github.com/DioxusLabs/components"
+    }
+  ],
+  "globalAssets": ["../../../assets/dx-components-theme.css"]
+}

preview/src/components/date_picker/component.rs

@@ -0,0 +1,89 @@
+use dioxus::prelude::*;
+
+use dioxus_primitives::{
+    date_picker::{self, DatePickerInputProps, DatePickerProps},
+    popover::{PopoverContentProps, PopoverTriggerProps},
+    ContentAlign,
+};
+
+use super::super::calendar::component::*;
+use super::super::popover::component::*;
+
+#[component]
+pub fn DatePicker(props: DatePickerProps) -> Element {
+    rsx! {
+        document::Link { rel: "stylesheet", href: asset!("./style.css") }
+        div {
+            date_picker::DatePicker {
+                class: "date-picker",
+                on_value_change: props.on_value_change,
+                selected_date: props.selected_date,
+                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! {
+        date_picker::DatePickerInput {
+            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::DatePickerCalendar {
+                    calendar: Calendar,
+                    CalendarHeader {
+                        CalendarNavigation {
+                            CalendarPreviousMonthButton {}
+                            CalendarSelectMonth {}
+                            CalendarSelectYear {}
+                            CalendarNextMonthButton {}
+                        }
+                    }
+                    CalendarGrid {}
+                }
+            }
+        }
+    }
+}
+
+#[component]
+pub fn DatePickerPopoverTrigger(props: PopoverTriggerProps) -> Element {
+    rsx! {
+        PopoverTrigger {
+            attributes: props.attributes,
+            svg {
+                class: "date-picker-expand-icon",
+                view_box: "0 0 24 24",
+                xmlns: "http://www.w3.org/2000/svg",
+                polyline { points: "6 9 12 15 18 9" }
+            }
+        }
+    }
+}
+
+#[component]
+pub fn DatePickerPopoverContent(props: PopoverContentProps) -> Element {
+    rsx! {
+        PopoverContent {
+            class: "popover-content",
+            id: props.id,
+            side: props.side,
+            align: props.align,
+            attributes: props.attributes,
+            {props.children}
+        }
+    }
+}

preview/src/components/date_picker/docs.md

@@ -0,0 +1,36 @@
+The DatePicker component is used to display a date input and a Calendar popover, allowing users to enter or select a date value.
+
+## Component Structure
+
+```rust
+DatePicker {
+    // The currently value in the date picker (type DatePickerValue).
+    value,
+    // The currently selected date in the date picker (if any).
+    selected_date,
+    on_value_change: move |v: DatePickerValue| {
+        // This callback is triggered when a date is selected in the
+        // calendar or the user entered it from the keyboard.
+        // The date parameter contains the selected date.
+    },
+    // Allows the user to enter a date using the keyboard. 
+    // The input field should contain a button to display the calendar and the calendar itself.
+    DatePickerInput {
+        // The DatePickerPopover is the root popover component that contains the trigger and Calendar.
+        DatePickerPopover {
+            // The DatePickerPopoverTrigger contains the elements that will trigger the popover 
+            // to display Calendar when clicked.
+            DatePickerPopoverTrigger {}
+            // The DatePickerPopoverContent contains the Calendar that will be displayed when
+            // the user clicks on the trigger.
+            DatePickerPopoverContent {
+                // The alignment of the DatePickerPopoverContent relative to the DatePickerPopoverTrigger. 
+                // Can be one of Start, Center, or End. Recommended use End for default value.
+                align: ContentAlign::End,
+                // Customized Calendar components
+                DatePickerCalendar {}
+            }
+        }
+    }
+}
+```

preview/src/components/date_picker/mod.rs

@@ -0,0 +1,2 @@
+mod component;
+pub use component::*;

preview/src/components/date_picker/style.css

@@ -0,0 +1,80 @@
+.date-picker {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+}
+
+.date-picker-group .popover-trigger {
+    border: none;
+    background-color: transparent;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    transition: rotate 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.popover[data-state="open"] div .date-picker-trigger {
+    rotate: 180deg;
+}
+
+.date-picker-expand-icon {
+    width: 20px;
+    height: 20px;
+    fill: none;
+    stroke: var(--primary-color-7);
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: 2;
+}
+
+[data-disabled="true"] {
+    cursor: not-allowed;
+    opacity: 0.5;
+}
+
+.date-picker-group {
+    align-items: center;
+    width: fit-content;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem;
+    border: none;
+    border-radius: 0.5rem;
+    background: none;
+    background: var(--light, var(--primary-color))
+        var(--dark, var(--primary-color-3));
+    box-shadow: inset 0 0 0 1px var(--light, var(--primary-color-6))
+        var(--dark, var(--primary-color-7));
+    color: var(--secondary-color-4);
+    gap: 0.25rem;
+    transition: background-color 100ms ease-out;
+    min-width: 150px;
+}
+
+.date-picker-group .popover-content {
+    padding: 0;
+    max-width: unset;
+}
+
+.date-segment {
+    caret-color: transparent;
+}
+
+.date-segment[no-date="true"] {
+    color: var(--secondary-color-5);
+}
+
+.date-segment[is-separator="true"] {
+    padding: 0;
+}
+
+.date-segment:focus-visible {
+    background: var(--secondary-color-3);
+    border-radius: 0.25rem;
+    outline: none;
+    color: var(--primary-color);
+}

preview/src/components/date_picker/variants/main/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/mod.rs

@@ -64,6 +64,7 @@ examples!(
     checkbox,
     collapsible,
     context_menu,
+    date_picker,
     dialog,
     dropdown_menu,
     hover_card,

preview/src/i18n/de-DE.ftl

@@ -19,4 +19,9 @@ Wednesday = Mi
 Thursday = Do
 Friday = Fr
 Saturday = Sa
-Sunday = So
+Sunday = So
+
+## Date
+D_Abbr = T
+M_Abbr = M
+Y_Abbr = J

preview/src/i18n/en-US.ftl

@@ -19,4 +19,9 @@ Wednesday = We
 Thursday = Th
 Friday = Fr
 Saturday = Sa
-Sunday = Su
+Sunday = Su
+
+## Date
+D_Abbr = D
+M_Abbr = M
+Y_Abbr = Y

preview/src/i18n/es-ES.ftl

@@ -19,4 +19,9 @@ Wednesday = Mi
 Thursday = Ju
 Friday = Vi
 Saturday = Sa
-Sunday = Do
+Sunday = Do
+
+## Date
+D_Abbr = D
+M_Abbr = M
+Y_Abbr = Y

preview/src/i18n/fr-FR.ftl

@@ -19,4 +19,9 @@ Wednesday = Me
 Thursday = Je
 Friday = Ve
 Saturday = Sa
-Sunday = Di
+Sunday = Di
+
+## Date
+D_Abbr = J
+M_Abbr = M
+Y_Abbr = A

primitives/Cargo.toml

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