fix(datepicker): Set dates to 1st January in year view

Author: mst101

src/components/Datepicker.vue

@@ -266,8 +266,14 @@ export default {
   },
   data() {
     const utils = makeDateUtils(this.useUtc)
-    const startDate = utils.getNewDateObject(this.openDate || null)
-    const pageTimestamp = utils.setDate(startDate, 1)
+    const initialView = this.initialView || this.minimumView
+    const openDate = utils.getOpenDate(
+      this.openDate,
+      this.selectedDate,
+      initialView,
+    )
+
+    const pageTimestamp = utils.setDate(openDate, 1)
 
     return {
       calendarHeight: 0,
@@ -299,14 +305,11 @@ export default {
       return this.initialView || this.minimumView
     },
     computedOpenDate() {
-      const parsedOpenDate = this.parseValue(this.openDate)
-      const openDateOrToday = this.utils.getNewDateObject(parsedOpenDate)
-      const openDate = this.selectedDate || openDateOrToday
-
-      // If the `minimum-view` is `month` or `year`, convert `openDate` accordingly
-      return this.minimumView === 'day'
-        ? openDate
-        : new Date(this.utils.setDate(openDate, 1))
+      return this.utils.getOpenDate(
+        this.openDate,
+        this.selectedDate,
+        this.minimumView,
+      )
     },
     datepickerId() {
       return `vdp-${Math.random().toString(36).slice(-10)}`
@@ -376,7 +379,7 @@ export default {
       // eslint-disable-next-line complexity
       handler() {
         const selectedDate =
-          this.selectedDate || this.parseValue(this.modelValue)
+          this.selectedDate || this.utils.parseAsDate(this.modelValue)
 
         if (!selectedDate) {
           return
@@ -412,8 +415,8 @@ export default {
     },
     modelValue: {
       handler(newValue, oldValue) {
-        let parsedValue = this.parseValue(newValue)
-        const oldParsedValue = this.parseValue(oldValue)
+        let parsedValue = this.utils.parseAsDate(newValue)
+        const oldParsedValue = this.utils.parseAsDate(oldValue)
 
         if (!this.utils.compareDates(parsedValue, oldParsedValue)) {
           const isDateDisabled = parsedValue && this.isDateDisabled(parsedValue)
@@ -430,6 +433,9 @@ export default {
       this.setPageDate()
     },
     view(newView, oldView) {
+      if (oldView === '') {
+        this.setPageDate(this.utils.adjustDateToView(this.computedOpenDate))
+      }
       this.handleViewChange(newView, oldView)
     },
   },
@@ -703,18 +709,6 @@ export default {
 
       this.$emit('opened')
     },
-    /**
-     * Parse a datepicker modelValue from string/number to date
-     * @param   {Date|String|Number|undefined} date
-     * @returns {Date|null}
-     */
-    parseValue(date) {
-      if (typeof date === 'string' || typeof date === 'number') {
-        const parsed = new Date(date)
-        return this.utils.isValidDate(parsed) ? parsed : null
-      }
-      return this.utils.isValidDate(date) ? date : null
-    },
     /**
      * Focus the open date, or close the calendar if already focused
      */

src/utils/DateUtils.js

@@ -360,6 +360,19 @@ const utils = {
     return new Date(parsedDate)
   },
 
+  /**
+   * Parses a string/number to a date, or returns null
+   * @param   {Date|String|Number|undefined} date
+   * @returns {Date|null}
+   */
+  parseAsDate(date) {
+    if (typeof date === 'string' || typeof date === 'number') {
+      const parsed = new Date(date)
+      return this.isValidDate(parsed) ? parsed : null
+    }
+    return this.isValidDate(date) ? date : null
+  },
+
   getTime() {
     const time = 'T00:00:00'
 
@@ -401,6 +414,20 @@ const utils = {
       : this.resetDateTime(new Date())
   },
 
+  /**
+   * Returns the `open date` at a given view
+   * @param {Date|null} openDate   the date on which the datepicker should open
+   * @param {View} view   Either `day`, `month`, or `year`
+   * @return {Date|null}
+   */
+  getOpenDate(openDate, selectedDate, view) {
+    const parsedOpenDate = this.parseAsDate(openDate)
+    const openDateOrToday = this.getNewDateObject(parsedOpenDate)
+    const newOpenDate = selectedDate || openDateOrToday
+
+    return this.adjustDateToView(newOpenDate, view)
+  },
+
   /**
    * Converts a date according to a given view
    * e.g. '2025-05-15' becomes '2025-05-01' at `month view and

test/e2e/specs/CellSelection.feature

@@ -4,10 +4,10 @@ Feature: Cell Selection
   So that I pick a date
 
 
-# N.B. Until native events are supported by Cypress, we are simulating `enter` and `space bar` key presses
-# on buttons by using a `click` event.
-# See https://github.com/cypress-io/cypress/issues/311
-# and https://github.com/cypress-io/cypress/issues/8267
+  # N.B. Until native events are supported by Cypress, we are simulating `enter` and `space bar` key presses
+  # on buttons by using a `click` event.
+  # See https://github.com/cypress-io/cypress/issues/311
+  # and https://github.com/cypress-io/cypress/issues/8267
 
   @id-1
   Scenario Outline: Select a cell: minimum view: <minimumView>
@@ -20,7 +20,7 @@ Feature: Cell Selection
       | # | minimumView | date        |
       | 1 | day         | 15 Mar 2020 |
       | 2 | month       | 01 Mar 2020 |
-      | 3 | year        | 01 Mar 2020 |
+      | 3 | year        | 01 Jan 2020 |
 
 
   @id-2

test/e2e/specs/CellSelection/index.js

@@ -10,7 +10,6 @@ describe('Cell selection', () => {
         createCalendar({
           openDate: new Date(2020, 2, 15),
           minimumView,
-          initialView: minimumView,
         })
 
         clickThe('input')