[*] DatePicker: implement new functionality

  - Add popover with calendar
  - Pass Calendar as child
  - Correct input validation
  - Split from preview
  - Fix add Calendar empty cells
  - Localization

Author: ddudenin

Cargo.lock

@@ -0,0 +1,85 @@
+use crate::components::calendar::component::*;
+use dioxus::prelude::*;
+use dioxus_primitives::calendar::CalendarProps;
+use dioxus_primitives::date_picker::{
+    self, DatePickerInputProps, DatePickerProps, DatePickerTriggerProps,
+};
+
+use time::UtcDateTime;
+
+#[component]
+pub fn DatePicker(props: DatePickerProps) -> Element {
+    rsx! {
+        document::Link {
+            rel: "stylesheet",
+            href: asset!("/src/components/date_picker/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,
+                separator: props.separator,
+                on_format_placeholder: props.on_format_placeholder,
+                attributes: props.attributes,
+                {props.children}
+            }
+        }
+    }
+}
+
+#[component]
+pub fn DatePickerInput(props: DatePickerInputProps) -> Element {
+    rsx! {
+        date_picker::DatePickerInput {
+            class: "date-picker-input",
+            attributes: props.attributes,
+            {props.children}
+        }
+    }
+}
+
+#[component]
+pub fn DatePickerTrigger(props: DatePickerTriggerProps) -> Element {
+    rsx! {
+        date_picker::DatePickerTrigger {
+            class: "date-picker-trigger",
+            attributes: props.attributes,
+            {props.children}
+        }
+    }
+}
+
+#[component]
+pub fn DatePickerCalendar(props: CalendarProps) -> Element {
+    let mut view_date = use_signal(|| UtcDateTime::now().date());
+
+    rsx! {
+        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: view_date(),
+            today: props.today,
+            on_view_change: move |date| view_date.set(date),
+            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/component.rs

@@ -22,19 +22,16 @@
   box-shadow: inset 0 0 0 1px var(--light, var(--primary-color-6))
     var(--dark, var(--primary-color-7));
   color: var(--secondary-color-4);
-  cursor: text;
   gap: 0.25rem;
   transition: background-color 100ms ease-out;
 }
 
 .date-picker-trigger {
-  position: absolute;
-  right: 0;
   border: none;
   background-color: transparent;
   cursor: pointer;
-  padding: 0.25rem;
-  padding: 8px 12px;
+  position: relative;
+  margin-left: -35px;
 }
 
 .date-picker-input input::placeholder {

preview/src/components/date_picker/variants/main/style.css renamed to preview/src/components/date_picker/style.css

@@ -1,39 +1,40 @@
+use super::super::component::*;
 use dioxus::prelude::*;
-use dioxus_primitives::date_picker::{
-    DatePicker, DatePickerCalendar, DatePickerInput, DatePickerTrigger, DatePickerValue,
-};
+
+use dioxus_i18n::tid;
+use dioxus_primitives::date_picker::DatePickerValue;
+
+use time::{Date, Month, Weekday};
 
 #[component]
 pub fn Demo() -> Element {
-    let mut value = use_signal(|| None::<DatePickerValue>);
+    let v = DatePickerValue::range_none();
+    let mut value = use_signal(|| v);
+
+    let mut selected_date = use_signal(|| None::<Date>);
 
     rsx! {
-        document::Link {
-            rel: "stylesheet",
-            href: asset!("/src/components/date_picker/variants/main/style.css"),
-        }
         div {
             DatePicker {
-                class: "date-picker",
                 value: value(),
-                on_value_change: move |date| {
-                    tracing::info!("Selected date: {:?}", date);
-                    value.set(date);
+                selected_date: selected_date(),
+                on_value_change: move |v| {
+                    tracing::info!("Selected: {v}");
+                    value.set(v);
                 },
+                on_format_placeholder: || tid!("YMD"),
+                read_only: true,
                 DatePickerInput {
-                    class: "date-picker-input",
                     DatePickerTrigger {
-                    class: "date-picker-trigger",
-                    aria_label: "DatePicker Trigger",
-                    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" }
+                        aria_label: "DatePicker Trigger",
+                        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()),
+                        }
                     }
                 }
-                }
-                DatePickerCalendar { class: "date-picker-calendar" }
             }
         }
     }

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

@@ -19,4 +19,7 @@ Wednesday = Mi
 Thursday = Do
 Friday = Fr
 Saturday = Sa
-Sunday = So
+Sunday = So
+
+## Date
+YMD = JJJJ-MM-TT

preview/src/i18n/de-DE.ftl

@@ -19,4 +19,7 @@ Wednesday = We
 Thursday = Th
 Friday = Fr
 Saturday = Sa
-Sunday = Su
+Sunday = Su
+
+## Date
+YMD = YYYY-MM-DD

preview/src/i18n/en-US.ftl

@@ -19,4 +19,7 @@ Wednesday = Mi
 Thursday = Ju
 Friday = Vi
 Saturday = Sa
-Sunday = Do
+Sunday = Do
+
+## Date
+YMD = YYYY-MM-DD

preview/src/i18n/es-ES.ftl

@@ -19,4 +19,7 @@ Wednesday = Me
 Thursday = Je
 Friday = Ve
 Saturday = Sa
-Sunday = Di
+Sunday = Di
+
+## Date
+YMD = AAAA-MM-JJ

preview/src/i18n/fr-FR.ftl

@@ -230,6 +230,7 @@ pub struct CalendarProps {
     pub on_format_month: Callback<Month, String>,
 
     /// The month being viewed
+    #[props(default = ReadOnlySignal::new(Signal::new(UtcDateTime::now().date())))]
     pub view_date: ReadOnlySignal<Date>,
 
     /// The current date (used for highlighting today)
@@ -896,24 +897,22 @@ pub fn CalendarGrid(props: CalendarGridProps) -> Element {
             date = date.next_day().expect("invalid or out-of-range date");
         }
 
+        let mut date = view_date;
         // Add days of the month
         let num_days_in_month = view_date.month().length(view_date.year());
         for day in 1..=num_days_in_month {
-            grid.push(
-                view_date
-                    .replace_day(day)
-                    .expect("invalid or out-of-range date"),
-            );
+            date = view_date
+                .replace_day(day)
+                .expect("invalid or out-of-range date");
+            grid.push(date);
         }
 
         // Add empty cells to complete the grid (for a clean layout)
         let remainder = grid.len() % 7;
         if remainder > 0 {
-            if let Some(mut date) = next_month(view_date) {
-                for _ in 1..=(7 - remainder) {
-                    grid.push(date);
-                    date = date.next_day().expect("invalid or out-of-range date");
-                }
+            for _ in 1..=(7 - remainder) {
+                date = date.next_day().expect("invalid or out-of-range date");
+                grid.push(date);
             }
         }