[*] DatePicker: fix arrow navigation

Author: ddudenin

primitives/src/calendar.rs

@@ -525,11 +525,18 @@ pub fn Calendar(props: CalendarProps) -> Element {
                     return;
                 };
                 let mut set_focused_date = |new_date: Option<Date>| {
-                    let mut view_date = (base_ctx.view_date)();
                     if let Some(date) = new_date {
-                        if date.month() != view_date.month() {
-                            view_date = date.replace_day(1).unwrap();
+                        let min_date = (base_ctx.view_date)().replace_day(1).unwrap();
+                        if date < min_date {
+                            let view_date = previous_month(min_date).unwrap_or(min_date);
                             (base_ctx.set_view_date)(view_date);
+                        } else {
+                            let max_date = nth_month_next(min_date, props.month_count)
+                                .unwrap_or(min_date);
+                            if date >= max_date {
+                                let view_date = next_month(min_date).unwrap_or(min_date);
+                                (base_ctx.set_view_date)(view_date);
+                            }
                         }
                     }
                     match new_date {
@@ -574,12 +581,8 @@ pub fn Calendar(props: CalendarProps) -> Element {
                 }
             },
             for offset in 0..props.month_count {
-                CalendarView {
-                    offset,
-                    div {
-                        ..props.attributes.clone(),
-                        {props.children.clone()}
-                    }
+                CalendarView { offset,
+                    div { ..props.attributes.clone(),{props.children.clone()} }
                 }
             }
         }
@@ -795,11 +798,18 @@ pub fn RangeCalendar(props: RangeCalendarProps) -> Element {
                     }
                 }
                 let mut set_focused_date = |new_date: Option<Date>| {
-                    let mut view_date = (base_ctx.view_date)();
                     if let Some(date) = new_date {
-                        if date.month() != view_date.month() {
-                            view_date = date.replace_day(1).unwrap();
+                        let min_date = (base_ctx.view_date)().replace_day(1).unwrap();
+                        if date < min_date {
+                            let view_date = previous_month(min_date).unwrap_or(min_date);
                             (base_ctx.set_view_date)(view_date);
+                        } else {
+                            let max_date = nth_month_next(min_date, props.month_count)
+                                .unwrap_or(min_date);
+                            if date >= max_date {
+                                let view_date = next_month(min_date).unwrap_or(min_date);
+                                (base_ctx.set_view_date)(view_date);
+                            }
                         }
                     }
                     match new_date {
@@ -852,12 +862,8 @@ pub fn RangeCalendar(props: RangeCalendarProps) -> Element {
                 }
             },
             for offset in 0..props.month_count {
-                CalendarView {
-                    offset,
-                    div {
-                        ..props.attributes.clone(),
-                        {props.children.clone()}
-                    }
+                CalendarView { offset,
+                    div { ..props.attributes.clone(),{props.children.clone()} }
                 }
             }
         }
@@ -1495,7 +1501,7 @@ pub fn CalendarGrid(props: CalendarGridProps) -> Element {
                     // Day name headers
                     for (weekday, label) in weekday_headers() {
                         th {
-                            key: "{weekday:?}",  // Add key for efficient diffing
+                            key: "{weekday:?}", // Add key for efficient diffing
                             class: "calendar-grid-day-header",
                             {label}
                         }
@@ -1919,7 +1925,7 @@ fn SingleCalendarDay(props: CalendarDayProps) -> Element {
     let view_date = (view_ctx.view_date)();
     let month = relative_calendar_month(date, &base_ctx, view_date.month());
     let in_current_month = month.current_month();
-    let is_focused = move || base_ctx.is_focused(date);
+    let is_focused = move || in_current_month && base_ctx.is_focused(date);
     let is_today = date == base_ctx.today;
     let is_unavailable = base_ctx.is_unavailable(date);
 
@@ -1993,7 +1999,7 @@ fn RangeCalendarDay(props: CalendarDayProps) -> Element {
     let view_date = (view_ctx.view_date)();
     let month = relative_calendar_month(date, &base_ctx, view_date.month());
     let in_current_month = month.current_month();
-    let is_focused = move || base_ctx.is_focused(date);
+    let is_focused = move || in_current_month && base_ctx.is_focused(date);
     let is_today = date == base_ctx.today;
     let is_unavailable = base_ctx.is_unavailable(date);