Date range in DatePicker (#148)

* [*] DatePicker: date range selection
  - Add DatePicker variants
  - Draft implementation DateRange for DatePicker
  - Extend DateRange struct
  - Use min and max dates in props as DateRange
  - Spell check fix for Calendar

* [*] DatePicker: date range selection
  - Fix date range selection
  - Support disabled ranges

* [*] DatePicker: draft implementation for calendar multi-view

* [*] DatePicker: implement multi-month (Calendar/DatePicker)

* [*] DatePicker: refact

* [*] DatePicker: updates
  - Fix docs
  - Add alignment between the days of the week and the Calendar grid
  - Add simple title variant in Calendar demo
  - Add css for Calendar title
  - Update time crate version (support PartialOrd for Month)
  - Fix view day on next/previous button click
  - Fix DateRangePickerContext (sync data)
  - Fix arrow navigation

* fix after merge

* try longer timeout

* clean up some of the calendar logic by centralizing the view_date and add a default calendar

* fix multi-calendar edge title centering

* make the calendar div style-able

* fix clippy

* fix lints

* more calendar tests

* reformat tests

* [*] DatePicker: fix navigation

---------

Co-authored-by: Evan Almloff <[email protected]>

Author: ddudenin

Cargo.lock

@@ -12,7 +12,7 @@ test("test", async ({ page }) => {
   const nextButton = calendar.locator(".calendar-nav-next");
 
   // Assert the calendar is displayed
-  await expect(calendar).toBeVisible();
+  await expect(calendar).toBeVisible({ timeout: 30000 });
   // Assert the current month is displayed
   const currentMonth = calendar.locator(".calendar-month-select");
   let currentMonthText = await currentMonth.inputValue();
@@ -31,7 +31,7 @@ test("test", async ({ page }) => {
   // Move focus to the calendar with tab
   await page.keyboard.press("Tab");
   const focusedDay = calendar.locator(
-    '.calendar-grid-cell[data-month="current"]:focus',
+    '.calendar-grid-cell[data-month="current"]:focus'
   );
   // Assert a day is focused
   const firstDay = focusedDay.first();
@@ -53,13 +53,13 @@ test("test", async ({ page }) => {
   // Assert the next week day is focused
   const nextWeekDayNumber = parseInt(
     (await nextWeekDay.textContent()) || "",
-    10,
+    10
   );
   let current_date = new Date();
   let daysInMonth = new Date(
     current_date.getFullYear(),
     current_date.getMonth() + 1,
-    0,
+    0
   ).getDate();
   if (dayNumber + 7 > daysInMonth) {
     // If the next week day is in the next month, it should wrap around
@@ -71,3 +71,206 @@ test("test", async ({ page }) => {
   await page.keyboard.press("ArrowUp");
   await expect(firstDay).toContainText(day || "failure");
 });
+
+test("year navigation by moving 52 weeks with arrow keys", async ({ page }) => {
+  await page.goto("http://127.0.0.1:8080/component/?name=calendar&", {
+    timeout: 20 * 60 * 1000,
+  });
+
+  // Find the calendar element
+  const calendar = page.locator(".calendar").nth(0);
+  const monthSelect = calendar.locator(".calendar-month-select");
+  const yearSelect = calendar.locator(".calendar-year-select");
+
+  // Assert the calendar is displayed
+  await expect(calendar).toBeVisible({ timeout: 30000 });
+
+  // Get the initial month and year
+  const initialMonth = await monthSelect.inputValue();
+  const initialYear = await yearSelect.inputValue();
+  const initialYearNumber = parseInt(initialYear, 10);
+  const initialMonthNumber = parseInt(initialMonth, 10);
+
+  // Calculate the exact number of weeks needed to move to the next year
+  // Start from the first day of the current month
+  const startDate = new Date(initialYearNumber, initialMonthNumber - 1, 1);
+  // Calculate the same date next year
+  const targetDate = new Date(initialYearNumber + 1, initialMonthNumber - 1, 1);
+  // Calculate the difference in days
+  const daysDifference = Math.floor(
+    (targetDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24)
+  );
+  // Calculate the number of weeks (round to nearest week)
+  const weeksToMove = Math.ceil(daysDifference / 7);
+
+  // Move focus to the calendar manually
+  const firstDay = calendar
+    .locator('.calendar-grid-cell[data-month="current"]')
+    .first();
+  await firstDay.focus();
+
+  // Press ArrowDown the calculated number of times to move forward by one year
+  for (let i = 0; i < weeksToMove; i++) {
+    await page.keyboard.press("ArrowDown");
+  }
+
+  // Assert the year has changed to the next year
+  const nextYear = await yearSelect.inputValue();
+  const nextYearNumber = parseInt(nextYear, 10);
+  expect(nextYearNumber).toBe(initialYearNumber + 1);
+
+  // The month should be exactly the same
+  const nextMonth = await monthSelect.inputValue();
+  expect(nextMonth).toBe(initialMonth);
+
+  // Press ArrowUp the same number of times to move back by one year
+  for (let i = 0; i < weeksToMove; i++) {
+    await page.keyboard.press("ArrowUp");
+  }
+
+  // Assert the year has changed back to the original year
+  const currentYear = await yearSelect.inputValue();
+  expect(currentYear).toBe(initialYear);
+
+  // The month should be exactly the same
+  const currentMonth = await monthSelect.inputValue();
+  expect(currentMonth).toBe(initialMonth);
+});
+
+test("shift + arrow keys navigation", async ({ page }) => {
+  await page.goto("http://127.0.0.1:8080/component/?name=calendar&", {
+    timeout: 20 * 60 * 1000,
+  });
+
+  // Find the calendar element
+  const calendar = page.locator(".calendar").nth(0);
+  const monthSelect = calendar.locator(".calendar-month-select");
+  const yearSelect = calendar.locator(".calendar-year-select");
+
+  // Assert the calendar is displayed
+  await expect(calendar).toBeVisible({ timeout: 30000 });
+
+  // Get the initial month and year
+  const initialMonth = await monthSelect.inputValue();
+  const initialYear = await yearSelect.inputValue();
+  const initialYearNumber = parseInt(initialYear, 10);
+  const initialMonthNumber = parseInt(initialMonth, 10);
+
+  // Move focus to the calendar
+  const firstDay = calendar
+    .locator('.calendar-grid-cell[data-month="current"]')
+    .first();
+  await firstDay.focus();
+
+  // Test Shift + ArrowDown - should move forward by one month
+  await page.keyboard.press("Shift+ArrowDown");
+
+  let currentMonth = await monthSelect.inputValue();
+  let currentYear = await yearSelect.inputValue();
+  let expectedMonth = initialMonthNumber === 12 ? 1 : initialMonthNumber + 1;
+  let expectedYear =
+    initialMonthNumber === 12 ? initialYearNumber + 1 : initialYearNumber;
+
+  expect(parseInt(currentMonth, 10)).toBe(expectedMonth);
+  expect(parseInt(currentYear, 10)).toBe(expectedYear);
+
+  // Test Shift + ArrowUp - should move back to the initial month
+  await page.keyboard.press("Shift+ArrowUp");
+
+  currentMonth = await monthSelect.inputValue();
+  currentYear = await yearSelect.inputValue();
+  expect(currentMonth).toBe(initialMonth);
+  expect(currentYear).toBe(initialYear);
+});
+
+async function testArrowKeyNavigation(
+  page: any,
+  arrowKey: "ArrowRight" | "ArrowLeft",
+  startPosition: "first" | "last",
+  expectedOrder: "ascending" | "descending"
+) {
+  await page.goto("http://127.0.0.1:8080/component/?name=calendar&", {
+    timeout: 20 * 60 * 1000,
+  });
+
+  // Find the calendar element
+  const calendar = page.locator(".calendar").nth(0);
+  const monthSelect = calendar.locator(".calendar-month-select");
+  const yearSelect = calendar.locator(".calendar-year-select");
+
+  // Assert the calendar is displayed
+  await expect(calendar).toBeVisible({ timeout: 30000 });
+
+  // Get the current month and year to calculate days in month
+  const currentMonthValue = await monthSelect.inputValue();
+  const currentYearValue = await yearSelect.inputValue();
+  const monthNumber = parseInt(currentMonthValue, 10);
+  const yearNumber = parseInt(currentYearValue, 10);
+
+  // Calculate the number of days in the current month
+  const daysInMonth = new Date(yearNumber, monthNumber, 0).getDate();
+
+  // Move focus to the starting day of the current month
+  const startDay = calendar
+    .locator('.calendar-grid-cell[data-month="current"]')
+    [startPosition]();
+  await startDay.focus();
+
+  // Get the focused day selector
+  const focusedDay = calendar.locator(
+    '.calendar-grid-cell[data-month="current"]:focus'
+  );
+
+  // Array to track all days visited
+  const daysVisited = [];
+
+  // Get the starting day number
+  let dayText = await focusedDay.first().textContent();
+  let dayNumber = parseInt(dayText || "", 10);
+  daysVisited.push(dayNumber);
+
+  // Press arrow key to navigate through all remaining days of the month
+  for (let i = 1; i < daysInMonth; i++) {
+    await page.keyboard.press(arrowKey);
+
+    // Get the new focused day
+    dayText = await focusedDay.first().textContent();
+    dayNumber = parseInt(dayText || "", 10);
+    daysVisited.push(dayNumber);
+  }
+
+  // Assert that we visited the correct number of days
+  expect(daysVisited.length).toBe(daysInMonth);
+
+  // Sort the days visited to check we got all days from 1 to daysInMonth
+  const sortedDays = [...daysVisited].sort((a, b) => a - b);
+
+  // Create the expected array [1, 2, 3, ..., daysInMonth]
+  const expectedDays = Array.from({ length: daysInMonth }, (_, i) => i + 1);
+
+  // Assert that we visited every day exactly once
+  expect(sortedDays).toEqual(expectedDays);
+
+  // Verify we traversed in the expected order
+  if (expectedOrder === "ascending") {
+    expect(daysVisited).toEqual(expectedDays);
+  } else {
+    const expectedReverseDays = Array.from(
+      { length: daysInMonth },
+      (_, i) => daysInMonth - i
+    );
+    expect(daysVisited).toEqual(expectedReverseDays);
+  }
+}
+
+test("right arrow key navigates through all days of the month", async ({
+  page,
+}) => {
+  await testArrowKeyNavigation(page, "ArrowRight", "first", "ascending");
+});
+
+test("left arrow key navigates through all days of the month in reverse", async ({
+  page,
+}) => {
+  await testArrowKeyNavigation(page, "ArrowLeft", "last", "descending");
+});

playwright/calendar.spec.ts

@@ -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

@@ -9,23 +9,23 @@ use dioxus_primitives::calendar::{
 pub fn Calendar(props: CalendarProps) -> Element {
     rsx! {
         document::Link { rel: "stylesheet", href: asset!("./style.css") }
-        div { class: "calendar",
-            calendar::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,
-                disabled_ranges: props.disabled_ranges,
-                attributes: props.attributes,
-                {props.children}
-            }
+        calendar::Calendar {
+            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,
+            month_count: props.month_count,
+            disabled_ranges: props.disabled_ranges,
+            attributes: props.attributes,
+            {props.children}
         }
     }
 }
@@ -34,23 +34,37 @@ pub fn Calendar(props: CalendarProps) -> Element {
 pub fn RangeCalendar(props: RangeCalendarProps) -> Element {
     rsx! {
         document::Link { rel: "stylesheet", href: asset!("./style.css") }
-        div { class: "calendar",
-            calendar::RangeCalendar {
-                selected_range: props.selected_range,
-                on_range_change: props.on_range_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,
-                disabled_ranges: props.disabled_ranges,
-                attributes: props.attributes,
-                {props.children}
-            }
+        calendar::RangeCalendar {
+            class: "calendar",
+            selected_range: props.selected_range,
+            on_range_change: props.on_range_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,
+            month_count: props.month_count,
+            disabled_ranges: props.disabled_ranges,
+            attributes: props.attributes,
+            {props.children}
+        }
+    }
+}
+
+#[component]
+pub fn CalendarView(
+    #[props(extends = GlobalAttributes)] attributes: Vec<Attribute>,
+    children: Element,
+) -> Element {
+    rsx! {
+        div {
+            class: "calendar-view",
+            ..attributes,
+            {children}
         }
     }
 }