feat(VDatePicker): add new prop header-color

allows you to set a different color for the header
when also using the color prop

Author: johnleider

packages/api-generator/src/locale/en/VDatePicker.json

@@ -7,6 +7,7 @@
     "eventColor": "Sets the color for event dot. It can be string (all events will have the same color) or `object` where attribute is the event date and value is boolean/color/array of colors for specified date or `function` taking date as a parameter and returning boolean/color/array of colors for that date.",
     "events": "Array of dates or object defining events or colors or function returning boolean/color/array of colors.",
     "expandIcon": "Icon used for **view-mode** toggle.",
+    "headerColor": "Allows you to set a different color for the header when used in conjunction with the `color` prop.",
     "hideHeader": "Hides the header.",
     "hideWeekdays": "Hides the weekdays.",
     "landscape": "Changes the picker to landscape mode.",

packages/vuetify/src/components/VDatePicker/VDatePicker.tsx

@@ -58,6 +58,7 @@ export const makeVDatePickerProps = propsFactory({
     type: String,
     default: '$vuetify.datePicker.header',
   },
+  headerColor: String,
 
   ...makeVDatePickerControlsProps(),
   ...makeVDatePickerMonthProps({
@@ -136,6 +137,7 @@ export const VDatePicker = genericComponent<new <
 
       return value && adapter.isValid(value) ? value : today
     })
+    const headerColor = computed(() => props.headerColor ?? props.color)
 
     const month = ref(Number(props.month ?? adapter.getMonth(adapter.startOfMonth(internal.value))))
     const year = ref(Number(props.year ?? adapter.getYear(adapter.startOfYear(adapter.setMonth(internal.value, month.value)))))
@@ -275,13 +277,15 @@ export const VDatePicker = genericComponent<new <
       const datePickerYearsProps = omit(VDatePickerYears.filterProps(props), ['modelValue'])
 
       const headerProps = {
+        color: headerColor.value,
         header: header.value,
         transition: headerTransition.value,
       }
 
       return (
         <VPicker
           { ...pickerProps }
+          color={ headerColor.value }
           class={[
             'v-date-picker',
             `v-date-picker--${viewMode.value}`,