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,115 @@
+use dioxus::prelude::*;
+
+use dioxus_primitives::{
+    calendar::CalendarProps,
+    date_picker::{self, DatePickerInputProps, DatePickerProps},
+    popover::{PopoverContentProps, PopoverRootProps, PopoverTriggerProps},
+};
+
+use crate::components::calendar::component::*;
+
+#[component]
+pub fn DatePicker(props: DatePickerProps) -> Element {
+    rsx! {
+        document::Link { rel: "stylesheet", href: asset!("./style.css") }
+        div {
+            date_picker::DatePicker {
+                class: "date-picker",
+                value: props.value,
+                on_value_change: props.on_value_change,
+                selected_date: props.selected_date,
+                disabled: props.disabled,
+                read_only: props.read_only,
+                attributes: props.attributes,
+                {props.children}
+            }
+        }
+    }
+}
+
+#[component]
+pub fn DatePickerInput(props: DatePickerInputProps) -> Element {
+    rsx! {
+        date_picker::DatePickerInput {
+            class: "date-picker-input",
+            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}
+        }
+    }
+}
+
+#[component]
+pub fn DatePickerPopover(props: PopoverRootProps) -> Element {
+    rsx! {
+        date_picker::DatePickerPopover {
+            class: "popover",
+            is_modal: props.is_modal,
+            default_open: props.default_open,
+            attributes: props.attributes,
+            {props.children}
+        }
+    }
+}
+
+#[component]
+pub fn DatePickerPopoverTrigger(props: PopoverTriggerProps) -> Element {
+    rsx! {
+        date_picker::DatePickerPopoverTrigger {
+            class: "date-picker-trigger",
+            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! {
+        date_picker::DatePickerPopoverContent {
+            class: "popover-content",
+            id: props.id,
+            side: props.side,
+            align: props.align,
+            attributes: props.attributes,
+            {props.children}
+        }
+    }
+}
+
+#[component]
+pub fn DatePickerCalendar(props: CalendarProps) -> Element {
+    rsx! {
+        date_picker::DatePickerCalendar {
+            class: "calendar",
+            selected_date: props.selected_date,
+            on_date_change: props.on_date_change,
+            on_format_weekday: props.on_format_weekday,
+            on_format_month: props.on_format_month,
+            view_date: props.view_date,
+            today: props.today,
+            on_view_change: props.on_view_change,
+            disabled: props.disabled,
+            first_day_of_week: props.first_day_of_week,
+            min_date: props.min_date,
+            max_date: props.max_date,
+            attributes: props.attributes,
+            CalendarHeader {
+                CalendarNavigation {
+                    CalendarPreviousMonthButton {}
+                    CalendarSelectMonth {}
+                    CalendarSelectYear {}
+                    CalendarNextMonthButton {}
+                }
+            }
+            CalendarGrid {}
+        }
+    }
+}

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,111 @@
+.date-picker {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.date-picker-input {
+  position: relative;
+  display: flex;
+  box-sizing: border-box;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.25rem;
+  padding: 8px 40px 8px 12px;
+  border: none;
+  border-radius: 0.5rem;
+  border-radius: calc(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;
+}
+
+.date-picker-trigger {
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  position: relative;
+  margin-left: -35px;
+}
+
+.date-picker-input {
+  color: var(--secondary-color-5);
+}
+
+.date-picker[data-state="open"] .date-picker-input {
+  pointer-events: none;
+}
+
+.date-picker-expand-icon {
+  width: 20px;
+  height: 20px;
+  fill: none;
+  stroke: var(--primary-color-7);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 2;
+}
+
+.date-picker[data-disabled="true"] .date-picker-input {
+  color: var(--secondary-color-5);
+  cursor: not-allowed;
+}
+
+.date-picker-input:hover:not([data-disabled="true"]),
+.date-picker-input:focus-visible {
+  background: var(--light, var(--primary-color-4))
+    var(--dark, var(--primary-color-5));
+  color: var(--secondary-color-1);
+  outline: none;
+}
+
+[data-disabled="true"] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.date-picker-group {
+  align-items: center;
+  width: fit-content;
+  display: flex;
+}
+
+.date-picker-container {
+  display: inline;
+  box-sizing: border-box;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.25rem;
+  padding: 8px 40px 8px 12px;
+  border: none;
+  border-radius: 0.5rem;
+  border-radius: calc(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;
+  width: fit-content;
+  min-width: 150px;
+}
+
+.date-segment {
+  padding: 0 2px;
+  caret-color: transparent;
+}
+
+.date-segment[no-date="true"] {
+  color: var(--secondary-color-5);
+}
+
+.date-segment[is-separator="true"] {
+  padding: 0;
+}

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

@@ -0,0 +1,46 @@
+use super::super::component::*;
+use dioxus::prelude::*;
+
+use dioxus_i18n::tid;
+use dioxus_primitives::{date_picker::DatePickerValue, ContentAlign};
+
+use time::{Date, Month, Weekday};
+
+#[component]
+pub fn Demo() -> Element {
+    let v = DatePickerValue::new_day(None);
+    let mut value = use_signal(|| v);
+
+    let mut selected_date = use_signal(|| None::<Date>);
+
+    rsx! {
+        div {
+            DatePicker {
+                value: value(),
+                selected_date: selected_date(),
+                on_value_change: move |v| {
+                    tracing::info!("Date changed to: {v}");
+                    value.set(v);
+                    selected_date.set(v.date());
+                },
+                DatePickerInput {
+                    on_format_day_placeholder: || tid!("D_Abbr"),
+                    on_format_month_placeholder: || tid!("M_Abbr"),
+                    on_format_year_placeholder: || tid!("Y_Abbr"),
+                    DatePickerPopover {
+                        DatePickerPopoverTrigger {}
+                        DatePickerPopoverContent {
+                            align: ContentAlign::End,
+                            DatePickerCalendar {
+                                selected_date: selected_date(),
+                                on_date_change: move |date| selected_date.set(date),
+                                on_format_weekday: |weekday: Weekday| tid!(& weekday.to_string()),
+                                on_format_month: |month: Month| tid!(& month.to_string()),
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

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