fix subheader date range picker style

assets/css/vue-date-picker.scss

@@ -0,0 +1,28 @@
+// @see https://vue3datepicker.com/customization/theming/
+// [!] Sass variables overriding does not work in scoped mode
+.dp__theme_light,
+.dp__theme_dark {
+  --dp-background-color: #ffffff;
+  --dp-text-color: #212121;
+  --dp-hover-color: #f3f3f3;
+  --dp-hover-text-color: #212121;
+  --dp-hover-icon-color: #959595;
+  --dp-primary-color: rgb(var(--v-theme-primary)) !important;
+  --dp-primary-text-color: rgb(var(--v-theme-on-primary)) !important;
+  --dp-secondary-color: rgb(var(--v-theme-neutral-strong)) !important;
+  --dp-border-color: #ddd;
+  --dp-menu-border-color: #ddd;
+  --dp-border-color-hover: #aaaeb7;
+  --dp-disabled-color: #f6f6f6;
+  --dp-scroll-bar-background: #f3f3f3;
+  --dp-scroll-bar-color: #959595;
+  --dp-success-color: rgb(var(--v-theme-success)) !important;
+  --dp-success-color-disabled: rgb(var(--v-theme-neutral-strong)) !important;
+  --dp-icon-color: #959595;
+  --dp-danger-color: #ff6f60;
+  --dp-highlight-color: rgba(25, 118, 210, 0.1);
+}
+
+:root {
+  --dp-action-button-height: 35px;
+}

components/Layout/SubHeader/DataTimingRange.vue

@@ -9,6 +9,7 @@
         :model-value="datesRange"
         :max-height="28"
         :range="true"
+        :autoApply="false"
         @update:model-value="updateDateTimeRange"
       />
     </div>
@@ -74,4 +75,8 @@ const updateDateTimeRange = async (dates: Array<Date>): Promise<any> => {
 .label {
   min-width: 150px;
 }
+
+:deep(.dp__input) {
+  max-height: 28px;
+}
 </style>

components/Ui/DatePicker.vue

@@ -5,29 +5,30 @@ Sélecteur de dates
 -->
 
 <template>
-  <VueDatePicker
-    :model-value="modelValue"
-    :locale="locale"
-    :format="dateFormatPattern"
-    :format-locale="fnsLocale"
-    :range="range"
-    :multi-calendars="range"
-    :enable-time-picker="withTimePicker"
-    :auto-apply="autoApply"
-    :auto-position="true"
-    :start-date="today"
-    close-on-scroll
-    text-input
-    :readonly="readonly"
-    position="left"
-    :teleport="true"
-    :select-text="$t('select')"
-    :cancel-text="$t('cancel')"
-    input-class-name="date-picker-input"
-    class="date-picker"
-    :style="style"
-    @update:model-value="$emit('update:modelValue', $event)"
-  />
+  <div class="date-picker">
+    <VueDatePicker
+        :model-value="modelValue"
+        :locale="locale"
+        :format="dateFormatPattern"
+        :format-locale="fnsLocale"
+        :range="range"
+        :multi-calendars="range"
+        :enable-time-picker="withTimePicker"
+        :auto-apply="autoApply"
+        :auto-position="true"
+        :start-date="today"
+        close-on-scroll
+        text-input
+        :readonly="readonly"
+        position="left"
+        :teleport="true"
+        :select-text="$t('select')"
+        :cancel-text="$t('cancel')"
+        input-class-name="date-picker-input"
+        :style="style"
+        @update:model-value="$emit('update:modelValue', $event)"
+      />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -54,11 +55,6 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
-  maxHeight: {
-    type: Number,
-    required: false,
-    default: null,
-  },
   readonly: {
     type: Boolean,
     default: false,
@@ -78,63 +74,19 @@ const dateFormatPattern: ComputedRef<string> = computed(
 )
 
 const today = new Date()
-
-let style: ComputedRef<string> = computed(
-  () => props.maxHeight !== null ? 'height: ' + props.maxHeight + 'px;max-height: ' + props.maxHeight + 'px;' : ''
-)
 </script>
 
-<style scoped lang="scss">
-// @see https://vue3datepicker.com/customization/theming/
-// [!] Sass variables overriding does not work in scoped mode
-.dp__theme_light,
-.dp__theme_dark {
-  --dp-background-color: #ffffff;
-  --dp-text-color: #212121;
-  --dp-hover-color: #f3f3f3;
-  --dp-hover-text-color: #212121;
-  --dp-hover-icon-color: #959595;
-  --dp-primary-color: rgb(var(--v-theme-primary)) !important;
-  --dp-primary-text-color: rgb(var(--v-theme-on-primary)) !important;
-  --dp-secondary-color: rgb(var(--v-theme-neutral-strong)) !important;
-  --dp-border-color: #ddd;
-  --dp-menu-border-color: #ddd;
-  --dp-border-color-hover: #aaaeb7;
-  --dp-disabled-color: #f6f6f6;
-  --dp-scroll-bar-background: #f3f3f3;
-  --dp-scroll-bar-color: #959595;
-  --dp-success-color: rgb(var(--v-theme-success)) !important;
-  --dp-success-color-disabled: rgb(var(--v-theme-neutral-strong)) !important;
-  --dp-icon-color: #959595;
-  --dp-danger-color: #ff6f60;
-  --dp-highlight-color: rgba(25, 118, 210, 0.1);
+<style lang="scss">
+:deep(.dp__active_date) {
+  border-radius: 12px;
 }
 
-.date-picker {
-  div {
-    height: 100% !important;
-    max-height: 100% !important;
-  }
-
-  .dp__input_wrap {
-    height: 100% !important;
-    max-height: 100% !important;
-  }
-
-  .date-picker-input {
-    height: 100% !important;
-    max-height: 100% !important;
-  }
-
-  :deep(.dp__active_date) {
-    border-radius: 12px;
-  }
-
-  :deep(.dp__today) {
-    border-radius: 12px;
-    border: 1px solid rgb(var(--v-theme-neutral-strong)) !important;
-  }
+:deep(.dp__today) {
+  border-radius: 12px;
+  border: 1px solid rgb(var(--v-theme-neutral-strong)) !important;
 }
 
-
+:deep(.dp__action_button) {
+  height: 32px;
+}
 </style>

nuxt.config.ts

@@ -132,6 +132,7 @@ export default defineNuxtConfig({
    '@/assets/css/theme.scss',
    '@/assets/css/import.scss',
    '@vuepic/vue-datepicker/dist/main.css',
+   '@/assets/css/vue-date-picker.scss',
  ],
 
  typescript: {