From 67ab46cdb97a1b8a1e0171c98ed83785e2c59708 Mon Sep 17 00:00:00 2001
From: SonTT19 <49301480+SonTT19@users.noreply.github.com>
Date: Tue, 21 May 2024 19:38:49 +0700
Subject: [PATCH] fix(VDatePicker): disable months outside min/max value
 (#19822)

fixes #19810
---
 .../src/components/VDatePicker/VDatePicker.tsx   |  1 +
 .../components/VDatePicker/VDatePickerMonths.tsx | 16 +++++++++++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/packages/vuetify/src/components/VDatePicker/VDatePicker.tsx b/packages/vuetify/src/components/VDatePicker/VDatePicker.tsx
index e66f3b555bc..55c2e0c5b72 100644
--- a/packages/vuetify/src/components/VDatePicker/VDatePicker.tsx
+++ b/packages/vuetify/src/components/VDatePicker/VDatePicker.tsx
@@ -320,6 +320,7 @@ export const VDatePicker = genericComponent<new <
                       onUpdate:modelValue={ onUpdateMonth }
                       min={ minDate.value }
                       max={ maxDate.value }
+                      year={ year.value }
                     />
                   ) : viewMode.value === 'year' ? (
                     <VDatePickerYears
diff --git a/packages/vuetify/src/components/VDatePicker/VDatePickerMonths.tsx b/packages/vuetify/src/components/VDatePicker/VDatePickerMonths.tsx
index 1883a31f254..a412e75f446 100644
--- a/packages/vuetify/src/components/VDatePicker/VDatePickerMonths.tsx
+++ b/packages/vuetify/src/components/VDatePicker/VDatePickerMonths.tsx
@@ -13,6 +13,8 @@ import { computed, watchEffect } from 'vue'
 import { convertToUnit, createRange, genericComponent, propsFactory, useRender } from '@/util'
 
 // Types
+import type { PropType } from 'vue'
+
 export type VDatePickerMonthsSlots = {
   month: {
     month: {
@@ -29,7 +31,10 @@ export type VDatePickerMonthsSlots = {
 export const makeVDatePickerMonthsProps = propsFactory({
   color: String,
   height: [String, Number],
+  min: null as any as PropType<unknown>,
+  max: null as any as PropType<unknown>,
   modelValue: Number,
+  year: Number,
 }, 'VDatePickerMonths')
 
 export const VDatePickerMonths = genericComponent<VDatePickerMonthsSlots>()({
@@ -47,12 +52,20 @@ export const VDatePickerMonths = genericComponent<VDatePickerMonthsSlots>()({
 
     const months = computed(() => {
       let date = adapter.startOfYear(adapter.date())
-
+      if (props.year) {
+        date = adapter.setYear(date, props.year)
+      }
       return createRange(12).map(i => {
         const text = adapter.format(date, 'monthShort')
+        const isDisabled =
+          !!(
+            (props.min && adapter.isAfter(adapter.startOfMonth(adapter.date(props.min)), date)) ||
+            (props.max && adapter.isAfter(date, adapter.startOfMonth(adapter.date(props.max))))
+          )
         date = adapter.getNextMonth(date)
 
         return {
+          isDisabled,
           text,
           value: i,
         }
@@ -75,6 +88,7 @@ export const VDatePickerMonths = genericComponent<VDatePickerMonthsSlots>()({
             const btnProps = {
               active: model.value === i,
               color: model.value === i ? props.color : undefined,
+              disabled: month.isDisabled,
               rounded: true,
               text: month.text,
               variant: model.value === month.value ? 'flat' : 'text',