Merge pull request #3600 from AnnMarieW/fix-dash4

Fixes minor datepicker issues

Author: T4rk1n

components/dash-core-components/src/components/css/datepickers.css

@@ -298,3 +298,8 @@
     width: 20px;
     height: 20px;
 }
+
+.dash-datepicker-calendar-padding {
+    pointer-events: none;
+    background: transparent;
+}

components/dash-core-components/src/utils/calendar/helpers.ts

@@ -35,6 +35,7 @@ function convertFormatTokens(momentFormat: string): string {
         .replace(/Do/g, 'do') // Ordinal day: 1st, 2nd, 3rd
         .replace(/YYYY/g, 'yyyy') // 4-digit year
         .replace(/YY/g, 'yy') // 2-digit year
+        .replace(/Y/g, 'y') // Year (numeric, variable length)
         .replace(/DD/g, 'dd') // Day of month with leading zero
         .replace(/D/g, 'd') // Day of month
         .replace(/X/g, 't'); // Unix timestamp (seconds)

components/dash-core-components/tests/integration/calendar/test_portal.py

@@ -22,7 +22,12 @@ def click_everything_in_datepicker(datepicker_id, dash_dcc):
     popover = dash_dcc.find_element(".dash-datepicker-content")
 
     interactive_elements = []
-    interactive_elements.extend(popover.find_elements(By.CSS_SELECTOR, "td"))
+    interactive_elements.extend(
+        popover.find_elements(
+            By.CSS_SELECTOR, "td:not(.dash-datepicker-calendar-padding)"
+        )
+    )
+
     interactive_elements.extend(popover.find_elements(By.CSS_SELECTOR, "input"))
 
     buttons = reversed(
@@ -36,7 +41,9 @@ def click_everything_in_datepicker(datepicker_id, dash_dcc):
             sleep(0.05)
         except Exception as e:
             print(e)
-            assert not e, f"Unable to click on {el.tag_name})"
+            assert (
+                not e
+            ), f"Unable to click on {el.tag_name} {el.get_attribute('class')})"
 
 
 def test_dppt000_datepicker_single_default(dash_dcc):

components/dash-core-components/tests/integration/misc/test_popover_visibility.py

@@ -19,7 +19,11 @@ def click_everything_in_datepicker(datepicker_id, dash_dcc):
     popover = dash_dcc.find_element(".dash-datepicker-content")
 
     interactive_elements = []
-    interactive_elements.extend(popover.find_elements(By.CSS_SELECTOR, "td"))
+    interactive_elements.extend(
+        popover.find_elements(
+            By.CSS_SELECTOR, "td:not(.dash-datepicker-calendar-padding)"
+        )
+    )
     interactive_elements.extend(popover.find_elements(By.CSS_SELECTOR, "button"))
     interactive_elements.extend(popover.find_elements(By.CSS_SELECTOR, "input"))
     for el in interactive_elements: