[*] DatePicker: updates

  - Alignment between the days of the week and the calendar grid
  - Simple title variant in demo
  - Fix 'aria_label'
  - Update time crate version (support PartialOrd for Month)
  - Fix view day on next/previous button click

Author: ddudenin

Cargo.lock

@@ -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/Cargo.toml

@@ -77,7 +77,7 @@
 }
 
 .calendar-grid-day-header {
-    width: 2rem;
+    flex: 1;
     color: var(--secondary-color-5);
     font-size: 12px;
     font-weight: 300;

preview/src/components/calendar/style.css

@@ -27,8 +27,7 @@ pub fn Demo() -> Element {
                 CalendarHeader {
                     CalendarNavigation {
                         CalendarPreviousMonthButton {}
-                        CalendarSelectMonth {}
-                        CalendarSelectYear {}
+                        CalendarMonthTitle {}
                         CalendarNextMonthButton {}
                     }
                 }

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

@@ -14,7 +14,7 @@ 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", "parsing"] }
+time = { version = "0.3.44", features = ["std", "macros", "parsing"] }
 num-integer = "0.1.46"
 tracing.workspace = true
 

primitives/Cargo.toml

@@ -154,32 +154,13 @@ fn replace_month(date: Date, month: Month) -> Date {
         .expect("invalid or out-of-range date")
 }
 
-fn gt(lhs_month: Month, rhs_month: Month) -> bool {
-    let lhs = lhs_month as u8;
-    let rhs = rhs_month as u8;
-    lhs > rhs
-}
-
-fn nth_month_prev(date: Date, n: u8) -> Option<Date> {
-    match n {
-        0 => Some(date),
-        n => {
-            let month = date.month();
-            let nth_month: Month = month.nth_prev(n);
-            let year = date.year() - if gt(month, nth_month) { 0 } else { 1 };
-            let max_day = nth_month.length(year);
-            Date::from_calendar_date(year, nth_month, date.day().min(max_day)).ok()
-        }
-    }
-}
-
 fn nth_month_next(date: Date, n: u8) -> Option<Date> {
     match n {
         0 => Some(date),
         n => {
             let month = date.month();
             let nth_month = month.nth_next(n);
-            let year = date.year() + if gt(month, nth_month) { 1 } else { 0 };
+            let year = date.year() + if month > nth_month { 1 } else { 0 };
             let max_day = nth_month.length(year);
             Date::from_calendar_date(year, nth_month, date.day().min(max_day)).ok()
         }
@@ -328,6 +309,7 @@ pub struct BaseCalendarContext {
     today: Date,
     first_day_of_week: Weekday,
     enabled_date_range: DateRange,
+    month_count: u8
 }
 
 impl BaseCalendarContext {
@@ -524,6 +506,7 @@ pub fn Calendar(props: CalendarProps) -> Element {
         today: props.today,
         first_day_of_week: props.first_day_of_week,
         enabled_date_range: DateRange::new(props.min_date, props.max_date),
+        month_count: props.month_count,
     });
     // Create Calendar context provider for child components
     use_context_provider(|| CalendarContext {
@@ -781,6 +764,7 @@ pub fn RangeCalendar(props: RangeCalendarProps) -> Element {
         today: props.today,
         first_day_of_week: props.first_day_of_week,
         enabled_date_range: DateRange::new(props.min_date, props.max_date),
+        month_count: props.month_count,
     });
 
     // Create RangeCalendar context provider for child components
@@ -890,7 +874,7 @@ struct CalendarViewProps {
     pub children: Element,
 }
 
-#[derive(Clone, PartialEq)]
+#[derive(Copy, Clone, PartialEq)]
 struct CalendarViewContext {
     offset: u8,
     view_date: Signal<Date>,
@@ -902,25 +886,17 @@ impl CalendarViewContext {
         self.view_date.set(new_date);
     }
 
-    fn sub_months(&self, date: Date) -> Option<Date> {
-        nth_month_prev(date, self.offset.max(1))
-    }
-
-    fn add_months(&self, date: Date) -> Option<Date> {
-        nth_month_next(date, self.offset.max(1))
-    }
-
     fn replace_year(&self, date: Date, year: i32) -> Date {
         let month = date.month();
         let view_month = (self.view_date)().month();
-        let year = year - if gt(month, view_month) { 1 } else { 0 };
+        let year = year - if month > view_month { 1 } else { 0 };
         date.replace_year(year).unwrap_or(date)
     }
 
     fn replace_month(&self, date: Date, month: Month) -> Date {
         let view_date = (self.view_date)();
         let new_month = month.nth_prev(self.offset);
-        let year = view_date.year() - if gt(month, view_date.month()) { 1 } else { 0 };
+        let year = view_date.year() - if month > view_date.month() { 1 } else { 0 };
         Date::from_calendar_date(year, new_month, 1).unwrap_or(date)
     }
 
@@ -1168,7 +1144,7 @@ pub fn CalendarPreviousMonthButton(props: CalendarPreviousMonthButtonProps) -> E
     let handle_prev_month = move |e: Event<MouseData>| {
         e.prevent_default();
         let current_view = (ctx.view_date)();
-        if let Some(date) = view_ctx.sub_months(current_view) {
+        if let Some(date) = previous_month(current_view) {
             ctx.set_view_date.call(date)
         }
     };
@@ -1178,6 +1154,7 @@ pub fn CalendarPreviousMonthButton(props: CalendarPreviousMonthButtonProps) -> E
             class: "calendar-nav-prev",
             aria_label: "Previous month",
             r#type: "button",
+            visibility: if view_ctx.offset == 0 { "visible" } else { "hidden" },
             onclick: handle_prev_month,
             disabled: (ctx.disabled)() || button_disabled() || navigate_disabled(),
             ..props.attributes,
@@ -1273,7 +1250,7 @@ pub fn CalendarNextMonthButton(props: CalendarNextMonthButtonProps) -> Element {
     let handle_next_month = move |e: Event<MouseData>| {
         e.prevent_default();
         let current_view = (ctx.view_date)();
-        if let Some(date) = view_ctx.add_months(current_view) {
+        if let Some(date) = next_month(current_view) {
             ctx.set_view_date.call(date)
         }
     };
@@ -1283,6 +1260,7 @@ pub fn CalendarNextMonthButton(props: CalendarNextMonthButtonProps) -> Element {
             class: "calendar-nav-next",
             aria_label: "Next month",
             r#type: "button",
+            visibility: if view_ctx.offset + 1 == ctx.month_count  { "visible" } else { "hidden" },
             onclick: handle_next_month,
             disabled: (ctx.disabled)() || button_disabled() || navigate_disabled(),
             ..props.attributes,
@@ -1890,9 +1868,7 @@ fn relative_calendar_month(
     } else if date > base_ctx.enabled_date_range.end {
         RelativeMonth::Next
     } else {
-        let lhs = date.month() as u8;
-        let rhs = current_month as u8;
-        match lhs.cmp(&rhs) {
+        match date.month().cmp(&current_month) {
             std::cmp::Ordering::Less => RelativeMonth::Last,
             std::cmp::Ordering::Equal => RelativeMonth::Current,
             std::cmp::Ordering::Greater => RelativeMonth::Next,

primitives/src/calendar.rs

@@ -303,7 +303,7 @@ pub fn DateRangePicker(props: DateRangePickerProps) -> Element {
     rsx! {
         div {
             role: "group",
-            aria_label: "DateRange",
+            aria_label: "Date Range",
             "data-disabled": (props.disabled)(),
             ..props.attributes,
             {props.children}