feat(VDatePicker): show-adjacent-months prop (#12603)

* feat(VDatePicker): **show-sibling-month** prop resolves #12237 * refactor: rename prop to showAdjacentMonths
vuetifyjs · Nov 17, 2020 · 8f1cf64 · 8f1cf64
1 parent a0140b0
commit 8f1cf64
Show file tree

Hide file tree

Showing 8 changed files with 162 additions and 4 deletions.
diff --git a/packages/api-generator/src/locale/en/v-date-picker.json b/packages/api-generator/src/locale/en/v-date-picker.json
@@ -23,6 +23,7 @@
     "scrollable": "Allows changing displayed month with mouse scroll",
     "selectedItemsText": "Text used for translating the number of selected dates when using *multiple* prop. Can also be customizing globally in [Internationalization](/customization/internationalization).",
     "showCurrent": "Toggles visibility of the current date/month outline or shows the provided date/month as a current",
+    "showAdjacentMonths": "Toggles visibility of days from previous and next months",
     "showWeek": "Toggles visibility of the week numbers in the body of the calendar",
     "titleDateFormat": "Allows you to customize the format of the date string that appears in the title of the date picker. Called with date (ISO 8601 **date** string) arguments.",
     "type": "Determines the type of the picker - `date` for date picker, `month` for month picker",

diff --git a/packages/docs/src/examples/v-date-picker/prop-show-adjacent-months.vue b/packages/docs/src/examples/v-date-picker/prop-show-adjacent-months.vue
@@ -0,0 +1,16 @@
+<template>
+  <v-date-picker
+    v-model="picker"
+    show-adjacent-months
+  ></v-date-picker>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        picker: null,
+      }
+    },
+  }
+</script>
diff --git a/packages/docs/src/pages/en/components/date-pickers.md b/packages/docs/src/pages/en/components/date-pickers.md
@@ -91,6 +91,12 @@ By default the current date is displayed using outlined button - **show-current*
 
 <example file="v-date-picker/prop-show-current" />
 
+#### Show sibling months
+
+By default days from previous and next months are not visible. They can be displayed using the **show-adjacent-months** prop.
+
+<example file="v-date-picker/prop-show-adjacent-months" />
+
 #### Width
 
 You can specify allowed the picker's width or make it full width.

diff --git a/packages/vuetify/src/components/VDatePicker/VDatePicker.ts b/packages/vuetify/src/components/VDatePicker/VDatePicker.ts
@@ -121,6 +121,7 @@ export default mixins(
       type: String,
       default: '$vuetify.datePicker.itemsSelected',
     },
+    showAdjacentMonths: Boolean,
     showWeek: Boolean,
     // Function formatting currently selected date in the picker title
     titleDateFormat: Function as PropType<DatePickerFormatter | DatePickerMultipleFormatter | undefined>,
@@ -428,6 +429,7 @@ export default mixins(
           range: this.range,
           readonly: this.readonly,
           scrollable: this.scrollable,
+          showAdjacentMonths: this.showAdjacentMonths,
           showWeek: this.showWeek,
           tableDate: `${pad(this.tableYear, 4)}-${pad(this.tableMonth + 1)}`,
           value: this.value,

diff --git a/packages/vuetify/src/components/VDatePicker/VDatePickerDateTable.ts b/packages/vuetify/src/components/VDatePicker/VDatePickerDateTable.ts
@@ -26,6 +26,7 @@ export default mixins(
       type: [String, Number],
       default: 0,
     },
+    showAdjacentMonths: Boolean,
     showWeek: Boolean,
     weekdayFormat: Function as PropType<DatePickerFormatter | undefined>,
   },
@@ -81,6 +82,7 @@ export default mixins(
         }, String(weekNumber).padStart(2, '0')),
       ])
     },
+    // eslint-disable-next-line max-statements
     genTBody () {
       const children = []
       const daysInMonth = new Date(this.displayedYear, this.displayedMonth + 1, 0).getDate()
@@ -91,7 +93,18 @@ export default mixins(
         rows.push(this.genWeekNumber(this.getWeekNumber(1)))
       }
 
-      while (day--) rows.push(this.$createElement('td'))
+      const prevMonthYear = this.displayedMonth ? this.displayedYear : this.displayedYear - 1
+      const prevMonth = (this.displayedMonth + 11) % 12
+      const firstDayFromPreviousMonth = new Date(this.displayedYear, this.displayedMonth, 0).getDate()
+
+      while (day--) {
+        const date = `${prevMonthYear}-${pad(prevMonth + 1)}-${pad(firstDayFromPreviousMonth - day)}`
+
+        rows.push(this.$createElement('td', this.showAdjacentMonths ? [
+          this.genButton(date, true, 'date', this.formatter, true),
+        ] : []))
+      }
+
       for (day = 1; day <= daysInMonth; day++) {
         const date = `${this.displayedYear}-${pad(this.displayedMonth + 1)}-${pad(day)}`
 
@@ -108,6 +121,18 @@ export default mixins(
         }
       }
 
+      const nextMonthYear = this.displayedMonth === 11 ? this.displayedYear + 1 : this.displayedYear
+      const nextMonth = (this.displayedMonth + 1) % 12
+      let nextMonthDay = 1
+
+      while (rows.length < 7) {
+        const date = `${nextMonthYear}-${pad(nextMonth + 1)}-${pad(nextMonthDay++)}`
+
+        rows.push(this.$createElement('td', this.showAdjacentMonths ? [
+          this.genButton(date, true, 'date', this.formatter, true),
+        ] : []))
+      }
+
       if (rows.length) {
         children.push(this.genTR(rows))
       }

diff --git a/.../vuetify/src/components/VDatePicker/__tests__/__snapshots__/VDatePicker.date.spec.ts.snap b/.../vuetify/src/components/VDatePicker/__tests__/__snapshots__/VDatePicker.date.spec.ts.snap
@@ -368,6 +368,12 @@ exports[`VDatePicker.ts should match snapshot with colored picker & header 1`] =
                   </div>
                 </button>
               </td>
+              <td>
+              </td>
+              <td>
+              </td>
+              <td>
+              </td>
             </tr>
           </tbody>
         </table>
@@ -737,6 +743,12 @@ exports[`VDatePicker.ts should match snapshot with colored picker 1`] = `
                   </div>
                 </button>
               </td>
+              <td>
+              </td>
+              <td>
+              </td>
+              <td>
+              </td>
             </tr>
           </tbody>
         </table>
@@ -1117,6 +1129,8 @@ exports[`VDatePicker.ts should match snapshot with dark theme 1`] = `
                   </div>
                 </button>
               </td>
+              <td>
+              </td>
             </tr>
           </tbody>
         </table>
@@ -1497,6 +1511,8 @@ exports[`VDatePicker.ts should match snapshot with default settings 1`] = `
                   </div>
                 </button>
               </td>
+              <td>
+              </td>
             </tr>
           </tbody>
         </table>
@@ -3457,6 +3473,8 @@ exports[`VDatePicker.ts should render disabled picker 1`] = `
                   </div>
                 </button>
               </td>
+              <td>
+              </td>
             </tr>
           </tbody>
         </table>
@@ -3837,6 +3855,8 @@ exports[`VDatePicker.ts should render flat picker 1`] = `
                   </div>
                 </button>
               </td>
+              <td>
+              </td>
             </tr>
           </tbody>
         </table>
@@ -4217,6 +4237,8 @@ exports[`VDatePicker.ts should render picker with elevation 1`] = `
                   </div>
                 </button>
               </td>
+              <td>
+              </td>
             </tr>
           </tbody>
         </table>
@@ -4597,6 +4619,8 @@ exports[`VDatePicker.ts should render readonly picker 1`] = `
                   </div>
                 </button>
               </td>
+              <td>
+              </td>
             </tr>
           </tbody>
         </table>

diff --git a/...tify/src/components/VDatePicker/__tests__/__snapshots__/VDatePickerDateTable.spec.ts.snap b/...tify/src/components/VDatePicker/__tests__/__snapshots__/VDatePickerDateTable.spec.ts.snap
@@ -329,6 +329,18 @@ exports[`VDatePickerDateTable.ts should match snapshot with first day of week 1`
             </div>
           </button>
         </td>
+        <td>
+        </td>
+        <td>
+        </td>
+        <td>
+        </td>
+        <td>
+        </td>
+        <td>
+        </td>
+        <td>
+        </td>
       </tr>
     </tbody>
   </table>
@@ -652,6 +664,14 @@ exports[`VDatePickerDateTable.ts should render component and match snapshot 1`]
             </div>
           </button>
         </td>
+        <td>
+        </td>
+        <td>
+        </td>
+        <td>
+        </td>
+        <td>
+        </td>
       </tr>
     </tbody>
   </table>
@@ -978,6 +998,14 @@ exports[`VDatePickerDateTable.ts should render component and match snapshot for
             </div>
           </button>
         </td>
+        <td>
+        </td>
+        <td>
+        </td>
+        <td>
+        </td>
+        <td>
+        </td>
       </tr>
     </tbody>
   </table>
@@ -1305,6 +1333,14 @@ exports[`VDatePickerDateTable.ts should render component with events (array) and
             </div>
           </button>
         </td>
+        <td>
+        </td>
+        <td>
+        </td>
+        <td>
+        </td>
+        <td>
+        </td>
       </tr>
     </tbody>
   </table>
@@ -1632,6 +1668,14 @@ exports[`VDatePickerDateTable.ts should render component with events (function)
             </div>
           </button>
         </td>
+        <td>
+        </td>
+        <td>
+        </td>
+        <td>
+        </td>
+        <td>
+        </td>
       </tr>
     </tbody>
   </table>
@@ -1959,6 +2003,14 @@ exports[`VDatePickerDateTable.ts should render component with events colored by
             </div>
           </button>
         </td>
+        <td>
+        </td>
+        <td>
+        </td>
+        <td>
+        </td>
+        <td>
+        </td>
       </tr>
     </tbody>
   </table>
@@ -2290,6 +2342,14 @@ exports[`VDatePickerDateTable.ts should render component with events colored by
             </div>
           </button>
         </td>
+        <td>
+        </td>
+        <td>
+        </td>
+        <td>
+        </td>
+        <td>
+        </td>
       </tr>
     </tbody>
   </table>
@@ -2617,6 +2677,14 @@ exports[`VDatePickerDateTable.ts should render component with showWeek and match
             </div>
           </button>
         </td>
+        <td>
+        </td>
+        <td>
+        </td>
+        <td>
+        </td>
+        <td>
+        </td>
       </tr>
     </tbody>
   </table>
@@ -2971,6 +3039,14 @@ exports[`VDatePickerDateTable.ts should render disabled component and match snap
             </div>
           </button>
         </td>
+        <td>
+        </td>
+        <td>
+        </td>
+        <td>
+        </td>
+        <td>
+        </td>
       </tr>
     </tbody>
   </table>
@@ -3294,6 +3370,14 @@ exports[`VDatePickerDateTable.ts should render readonly component and match snap
             </div>
           </button>
         </td>
+        <td>
+        </td>
+        <td>
+        </td>
+        <td>
+        </td>
+        <td>
+        </td>
       </tr>
     </tbody>
   </table>

diff --git a/packages/vuetify/src/components/VDatePicker/mixins/date-picker-table.ts b/packages/vuetify/src/components/VDatePicker/mixins/date-picker-table.ts
@@ -115,7 +115,7 @@ export default mixins(
         },
       }, createItemTypeNativeListeners(this, `:${mouseEventType}`, value))
     },
-    genButton (value: string, isFloating: boolean, mouseEventType: string, formatter: DatePickerFormatter) {
+    genButton (value: string, isFloating: boolean, mouseEventType: string, formatter: DatePickerFormatter, isOtherMonth = false) {
       const isAllowed = isDateAllowed(value, this.min, this.max, this.allowedDates)
       const isSelected = this.isSelected(value) && isAllowed
       const isCurrent = value === this.current
@@ -124,12 +124,12 @@ export default mixins(
 
       return this.$createElement('button', setColor(color, {
         staticClass: 'v-btn',
-        class: this.genButtonClasses(isAllowed, isFloating, isSelected, isCurrent),
+        class: this.genButtonClasses(isAllowed && !isOtherMonth, isFloating, isSelected, isCurrent),
         attrs: {
           type: 'button',
         },
         domProps: {
-          disabled: this.disabled || !isAllowed,
+          disabled: this.disabled || !isAllowed || isOtherMonth,
         },
         on: this.genButtonEvents(value, isAllowed, mouseEventType),
       }), [