@zap-wunschlachen/wl-shared-components 1.0.76 → 1.0.78

package/src/components/DateInput/DateInput.vue

@@ -1,371 +1,377 @@
-<template>
-  <Input
-    v-bind="$attrs" 
-    ref="inputRef"
-    id="date-input"
-    class="wl-date-input"
-    :class="{
-      'edit-layout': layout === 'edit-field'
-    }"
-    :variant="variant"   
-    :placeholder="placeholder" 
-    v-model="formattedDate"
-    :success="isDefaultLayout ? inputState === 'success' : false" 
-    :error="inputState === 'error'" 
-    @input="onDateInput" 
-    :hint="isDefaultLayout ? inputMessage : ''"
-    :hideDetails="isDefaultLayout ? inputState !== 'error' : true" 
-    type="tel" 
-    for="date-input"
-    data-testid="root">
-    <template #append>
-      <div class="date-wrapper" tabIndex="0" @keydown.enter.prevent="nativeDate?.showPicker()" >
-        <v-icon class="date-icon" icon="heroicons:calendar" :color="colors['input_default_icon_color']" />
-        <input 
-          ref="nativeDate" 
-          type="date"
-          tabIndex="-1"  
-          :min="nativeMin"
-          :max="nativeMax"
-          class="native-date"
-          :value="isoValue"
-          @input.stop="onNativeDateChange"
-        />
-      </div>
-    </template>
-  </Input>
-</template>
-
-<script setup lang="ts">
-import {
-  parse, parseISO, format, isValid, getHours,
-  getMinutes,
-  getSeconds,
-  getMilliseconds,
-  set,
-  startOfDay
-} from "date-fns";
-import { ref, watch, defineProps, defineEmits, computed, nextTick, inject, onUnmounted } from "vue";
-import Input from "../Input/Input.vue";
-import './DateInput.css';
-import { useI18n } from 'vue-i18n';
-import { siteColors } from "../../utils/index";
-
-// Inject theme colors from ThemeProvider, fallback to global siteColors
-const injectedThemeColors = inject('themeColors', null);
-const colors = computed(() => {
-  if (injectedThemeColors) {
-    return (injectedThemeColors as any).value;
-  }
-  return siteColors;
-});
-
-// Define props to accept an initial date value
-const props = withDefaults(defineProps<{
-  modelValue?: string | null;
-  layout?: "default" | "edit-field";
-  minDate?: Date | null;
-  minDateErrorMessage?: string;
-  maxDate?: Date | null;
-  maxDateErrorMessage?: string;
-  variant?: string;
-  placeholder?: string;
-  invalidDateErrorMessage?: string;
-}>(), {
-  modelValue: null,
-  layout: 'default',
-  variant: 'outlined',
-});
-
-const emit = defineEmits<{
-  (event: "update:modelValue", value: string | null): void;
-  (event: "update:valid", isValid: boolean): void;
-}>();
-
-const { t } = useI18n();
-
-const placeholder = computed(() => props.placeholder || t('wl.date_input.placeholder', 'TT.MM.JJJJ'));
-const invalidDateMessage = computed(() => props.invalidDateErrorMessage || t('wl.date_input.invalid_date', 'Bitte ein gültiges Datum eingeben'));
-const maxDateMessage = computed(() => {
-  if (props.maxDate && isValid(props.maxDate)) {
-    return props.maxDateErrorMessage || t('wl.date_input.max_date_error', { date: format(props.maxDate, 'dd.MM.yyyy') });
-  }
-  return '';
-});
-const minDateMessage = computed(() => {
-  if (props.minDate && isValid(props.minDate)) {
-    return props.minDateErrorMessage || t('wl.date_input.min_date_error', { date: format(props.minDate, 'dd.MM.yyyy') });
-  }
-  return '';
-});
-
-const ISO_FORMAT = "yyyy-MM-dd";
-const DISPLAY_FORMAT = "dd.MM.yyyy";
-
-// Local reactive state for the input
-const formattedDate = ref("");
-const inputState = ref<"idle" | "error" | "success">("idle");
-const inputMessage = ref("");
-const nativeDate = ref<HTMLInputElement | null>(null)
-const inputRef = ref(null)
-const invalidCharTimeout = ref<ReturnType<typeof setTimeout> | null>(null)
-
-// Cleanup timeout on unmount
-onUnmounted(() => {
-  if (invalidCharTimeout.value) {
-    clearTimeout(invalidCharTimeout.value);
-  }
-});
-
-const isDefaultLayout = computed(() => props.layout === "default")
-
-// Emit validity changes when inputState changes
-watch(inputState, (newState) => {
-  emit('update:valid', newState === 'success');
-});
-
-// Error messages for invalid input
-const invalidCharMessage = computed(() => t('wl.date_input.invalid_char', 'Dieses Zeichen ist nicht erlaubt'));
-const formatErrorMessage = computed(() => t('wl.date_input.format_error', 'Das Datum muss im Format TT.MM.JJJJ sein'));
-
-const isoValue = computed(() => {
-  const parsed = parse(formattedDate.value, DISPLAY_FORMAT, new Date());
-  return isValid(parsed) ? format(parsed, ISO_FORMAT) : "";
-});
-
-watch(
-  () => props.modelValue,
-  (newDate) => {
-    const parsed = parseISO(newDate ?? '');
-    formattedDate.value = (parsed && isValid(parsed)) ? format(parsed, DISPLAY_FORMAT) : "";
-  },
-  { immediate: true }
-);
-
-const nativeMin = computed(() => {
-  if (props.minDate && isValid(props.minDate)) {
-    return format(props.minDate, ISO_FORMAT);
-  }
-  return "";
-});
-
-const nativeMax = computed(() => {
-  if (props.maxDate && isValid(props.maxDate)) {
-    return format(props.maxDate, ISO_FORMAT);
-  }
-  return "";
-});
-
-function onDateInput(e: Event) {
-  const target = e.target as HTMLInputElement;
-  const rawValue = target.value;
-
-  // Clear any existing timeout
-  if (invalidCharTimeout.value) {
-    clearTimeout(invalidCharTimeout.value);
-    invalidCharTimeout.value = null;
-  }
-
-  // Check for invalid characters (not digits or dots)
-  const hasInvalidChars = /[^\d.]/.test(rawValue);
-
-  if (hasInvalidChars) {
-    // Show the invalid input temporarily with error message
-    formattedDate.value = rawValue;
-    inputState.value = "error";
-    inputMessage.value = invalidCharMessage.value;
-
-    // Remove invalid characters after 500ms
-    invalidCharTimeout.value = setTimeout(() => {
-      const cleanedValue = rawValue.replace(/[^\d]/g, "");
-      formattedDate.value = formatDateValue(cleanedValue);
-      validateAndEmit(formattedDate.value);
-    }, 500);
-    return;
-  }
-
-  // Check for invalid dot usage (dots are auto-inserted, so manual dots are invalid)
-  // Valid format is: DD.MM.YYYY - dots should only appear at positions 2 and 5
-  const dotCount = (rawValue.match(/\./g) || []).length;
-  const hasConsecutiveDots = /\.\./.test(rawValue);
-  const hasInvalidDots = dotCount > 0 && (
-    hasConsecutiveDots ||
-    dotCount > 2 ||
-    (rawValue.indexOf('.') !== -1 && rawValue.indexOf('.') !== 2) ||
-    (dotCount === 2 && rawValue.lastIndexOf('.') !== 5)
-  );
-
-  if (hasInvalidDots) {
-    // Show the invalid input temporarily with error message
-    formattedDate.value = rawValue;
-    inputState.value = "error";
-    inputMessage.value = invalidCharMessage.value;
-
-    // Remove dots and reformat after 500ms
-    invalidCharTimeout.value = setTimeout(() => {
-      const cleanedValue = rawValue.replace(/\./g, "");
-      formattedDate.value = formatDateValue(cleanedValue);
-      validateAndEmit(formattedDate.value);
-    }, 500);
-    return;
-  }
-
-  // Check if input exceeds 10 characters (TT.MM.JJJJ format)
-  if (rawValue.length > 10) {
-    // Show the overlength input temporarily with error message
-    formattedDate.value = rawValue;
-    inputState.value = "error";
-    inputMessage.value = formatErrorMessage.value;
-
-    // Remove excess characters after 500ms
-    invalidCharTimeout.value = setTimeout(() => {
-      formattedDate.value = rawValue.slice(0, 10);
-      validateAndEmit(formattedDate.value);
-    }, 500);
-    return;
-  }
-
-  // Format and validate normally
-  const formattedValue = formatDateValue(rawValue.replace(/[^\d]/g, ""));
-  formattedDate.value = formattedValue;
-  validateAndEmit(formattedValue);
-}
-
-function formatDateValue(digitsOnly: string): string {
-  let value = digitsOnly.replace(/\D/g, ""); // Keep only digits
-
-  // Insert dot after day (2 digits)
-  if (value.length > 2) {
-    value = value.slice(0, 2) + "." + value.slice(2);
-  }
-  // Insert dot after month (next 2 digits)
-  if (value.length > 5) {
-    value = value.slice(0, 5) + "." + value.slice(5);
-  }
-  // Limit to 10 characters (DD.MM.YYYY)
-  if (value.length > 10) {
-    value = value.slice(0, 10);
-  }
-
-  return value;
-}
-
-function validateAndEmit(value: string) {
-  // If incomplete date, reset state
-  if (value.length < 10) {
-    inputState.value = "idle";
-    inputMessage.value = "";
-    return;
-  }
-
-  // Parse the date using dots as separator
-  const parsed = parseDateWithCurrentTime(value);
-
-  if (!isValid(parsed)) {
-    inputState.value = "error";
-    inputMessage.value = invalidDateMessage.value;
-    return;
-  }
-
-  if (props.minDate && isValid(props.minDate)) {
-    if (startOfDay(parsed) < startOfDay(props.minDate)) {
-      inputState.value = "error";
-      inputMessage.value = minDateMessage.value;
-      return;
-    }
-  }
-
-  if(props.maxDate && isValid(props.maxDate)) {
-    if (startOfDay(parsed) > startOfDay(props.maxDate)) {
-      inputState.value = "error";
-      inputMessage.value = maxDateMessage.value;
-      return;
-    }
-  }
-
-  inputState.value = "success";
-  inputMessage.value = "";
-
-  emit("update:modelValue", parsed.toISOString());
-}
-
-/**
- * Parse "dd.MM.yyyy" as a date, then apply the current local time (H:M:S.ms).
- * Returns a new Date object.
- */
-function parseDateWithCurrentTime(dateString: any) {
-  const now = new Date();
-
-  // 1) Parse date portion (defaults to midnight)
-  const parsedDate = parse(dateString, DISPLAY_FORMAT, now);
-
-  // 2) Overwrite the parsed date's time with the current local time
-  const result = set(parsedDate, {
-    hours: getHours(now),
-    minutes: getMinutes(now),
-    seconds: getSeconds(now),
-    milliseconds: getMilliseconds(now)
-  });
-
-  return result;
-}
-
-function onNativeDateChange(e: Event) {
-  if (!nativeDate.value) return;
-
-  const [year, month, day] = nativeDate.value.value.split("-");
-  const reformatted = `${day}.${month}.${year}`;
-  const fakeEvent = { target: { value: reformatted } } as unknown as Event;
-
-  onDateInput(fakeEvent);
-
-  if (props.layout === 'edit-field') {
-    // When DateInput is used in EditField, clicking events in the native picker removes focus from EditField.
-    // Since saving is based on blur in EditField, we need to restore focus and then blur to trigger save.
-    nextTick(() => {
-      inputRef.value?.focus?.();
-      inputRef.value?.blur?.();
-    });
-  }
-}
-
-// Computed property to expose validity status
-const isDateValid = computed(() => inputState.value === 'success');
-
-defineExpose({
-  focus: () => inputRef.value?.focus?.(),
-  blur: () => inputRef.value?.blur?.(),
-  select: () => inputRef.value?.select?.(),
-  isValid: isDateValid
-})
-</script>
-
-<style scoped>
-.native-date {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0 !important;
-  background: transparent;
-  color: transparent;
-  cursor: pointer;
-  z-index: 2;
-}
-
-.date-wrapper {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.date-icon {
-  pointer-events: none;
-  cursor: pointer;
-  z-index: 1;
-}
+<template>
+  <Input
+    v-bind="$attrs"
+    ref="inputRef"
+    id="date-input"
+    class="wl-date-input"
+    :class="{
+      'edit-layout': layout === 'edit-field'
+    }"
+    :variant="variant"
+    :placeholder="placeholder"
+    v-model="formattedDate"
+    :success="isDefaultLayout ? inputState === 'success' && !props.error : false"
+    :error="inputState === 'error' || props.error"
+    @input="onDateInput"
+    :hint="isDefaultLayout ? (inputState === 'error' ? inputMessage : (props.error ? props.errorMessage : '')) : ''"
+    :hideDetails="isDefaultLayout ? !(inputState === 'error' || props.error) : true"
+    type="tel"
+    for="date-input"
+    data-testid="root">
+    <template #append>
+      <div class="date-wrapper" tabIndex="0" @keydown.enter.prevent="nativeDate?.showPicker()" >
+        <v-icon class="date-icon" icon="heroicons:calendar" :color="colors['input_default_icon_color']" />
+        <input
+          ref="nativeDate"
+          type="date"
+          tabIndex="-1"
+          :min="nativeMin"
+          :max="nativeMax"
+          class="native-date"
+          :value="isoValue"
+          @input.stop="onNativeDateChange"
+        />
+      </div>
+    </template>
+  </Input>
+</template>
+
+<script setup lang="ts">
+import {
+  parse, parseISO, format, isValid, getHours,
+  getMinutes,
+  getSeconds,
+  getMilliseconds,
+  set,
+  startOfDay
+} from "date-fns";
+import { ref, watch, defineProps, defineEmits, computed, nextTick, inject, onUnmounted } from "vue";
+import Input from "../Input/Input.vue";
+import './DateInput.css';
+import { useI18n } from 'vue-i18n';
+import { siteColors } from "../../utils/index";
+
+// Inject theme colors from ThemeProvider, fallback to global siteColors
+const injectedThemeColors = inject('themeColors', null);
+const colors = computed(() => {
+  if (injectedThemeColors) {
+    return (injectedThemeColors as any).value;
+  }
+  return siteColors;
+});
+
+// Define props to accept an initial date value
+const props = withDefaults(defineProps<{
+  modelValue?: string | null;
+  layout?: "default" | "edit-field";
+  minDate?: Date | null;
+  minDateErrorMessage?: string;
+  maxDate?: Date | null;
+  maxDateErrorMessage?: string;
+  variant?: string;
+  placeholder?: string;
+  invalidDateErrorMessage?: string;
+  /** External error override (e.g. for "required" validation). Internal errors take priority. */
+  error?: boolean;
+  /** Error message shown when external error is active and no internal error exists. */
+  errorMessage?: string;
+}>(), {
+  modelValue: null,
+  layout: 'default',
+  variant: 'outlined',
+  error: false,
+  errorMessage: '',
+});
+
+const emit = defineEmits<{
+  (event: "update:modelValue", value: string | null): void;
+  (event: "update:valid", isValid: boolean): void;
+}>();
+
+const { t } = useI18n();
+
+const placeholder = computed(() => props.placeholder || t('wl.date_input.placeholder', 'TT.MM.JJJJ'));
+const invalidDateMessage = computed(() => props.invalidDateErrorMessage || t('wl.date_input.invalid_date', 'Bitte ein gültiges Datum eingeben'));
+const maxDateMessage = computed(() => {
+  if (props.maxDate && isValid(props.maxDate)) {
+    return props.maxDateErrorMessage || t('wl.date_input.max_date_error', { date: format(props.maxDate, 'dd.MM.yyyy') });
+  }
+  return '';
+});
+const minDateMessage = computed(() => {
+  if (props.minDate && isValid(props.minDate)) {
+    return props.minDateErrorMessage || t('wl.date_input.min_date_error', { date: format(props.minDate, 'dd.MM.yyyy') });
+  }
+  return '';
+});
+
+const ISO_FORMAT = "yyyy-MM-dd";
+const DISPLAY_FORMAT = "dd.MM.yyyy";
+
+// Local reactive state for the input
+const formattedDate = ref("");
+const inputState = ref<"idle" | "error" | "success">("idle");
+const inputMessage = ref("");
+const nativeDate = ref<HTMLInputElement | null>(null)
+const inputRef = ref(null)
+const invalidCharTimeout = ref<ReturnType<typeof setTimeout> | null>(null)
+
+// Cleanup timeout on unmount
+onUnmounted(() => {
+  if (invalidCharTimeout.value) {
+    clearTimeout(invalidCharTimeout.value);
+  }
+});
+
+const isDefaultLayout = computed(() => props.layout === "default")
+
+// Emit validity changes when inputState or external error changes
+watch([inputState, () => props.error], ([newState, extError]) => {
+  emit('update:valid', newState === 'success' && !extError);
+});
+
+// Error messages for invalid input
+const invalidCharMessage = computed(() => t('wl.date_input.invalid_char', 'Dieses Zeichen ist nicht erlaubt'));
+const formatErrorMessage = computed(() => t('wl.date_input.format_error', 'Das Datum muss im Format TT.MM.JJJJ sein'));
+
+const isoValue = computed(() => {
+  const parsed = parse(formattedDate.value, DISPLAY_FORMAT, new Date());
+  return isValid(parsed) ? format(parsed, ISO_FORMAT) : "";
+});
+
+watch(
+  () => props.modelValue,
+  (newDate) => {
+    const parsed = parseISO(newDate ?? '');
+    formattedDate.value = (parsed && isValid(parsed)) ? format(parsed, DISPLAY_FORMAT) : "";
+  },
+  { immediate: true }
+);
+
+const nativeMin = computed(() => {
+  if (props.minDate && isValid(props.minDate)) {
+    return format(props.minDate, ISO_FORMAT);
+  }
+  return "";
+});
+
+const nativeMax = computed(() => {
+  if (props.maxDate && isValid(props.maxDate)) {
+    return format(props.maxDate, ISO_FORMAT);
+  }
+  return "";
+});
+
+function onDateInput(e: Event) {
+  const target = e.target as HTMLInputElement;
+  const rawValue = target.value;
+
+  // Clear any existing timeout
+  if (invalidCharTimeout.value) {
+    clearTimeout(invalidCharTimeout.value);
+    invalidCharTimeout.value = null;
+  }
+
+  // Check for invalid characters (not digits or dots)
+  const hasInvalidChars = /[^\d.]/.test(rawValue);
+
+  if (hasInvalidChars) {
+    // Show the invalid input temporarily with error message
+    formattedDate.value = rawValue;
+    inputState.value = "error";
+    inputMessage.value = invalidCharMessage.value;
+
+    // Remove invalid characters after 500ms
+    invalidCharTimeout.value = setTimeout(() => {
+      const cleanedValue = rawValue.replace(/[^\d]/g, "");
+      formattedDate.value = formatDateValue(cleanedValue);
+      validateAndEmit(formattedDate.value);
+    }, 500);
+    return;
+  }
+
+  // Check for invalid dot usage (dots are auto-inserted, so manual dots are invalid)
+  // Valid format is: DD.MM.YYYY - dots should only appear at positions 2 and 5
+  const dotCount = (rawValue.match(/\./g) || []).length;
+  const hasConsecutiveDots = /\.\./.test(rawValue);
+  const hasInvalidDots = dotCount > 0 && (
+    hasConsecutiveDots ||
+    dotCount > 2 ||
+    (rawValue.indexOf('.') !== -1 && rawValue.indexOf('.') !== 2) ||
+    (dotCount === 2 && rawValue.lastIndexOf('.') !== 5)
+  );
+
+  if (hasInvalidDots) {
+    // Show the invalid input temporarily with error message
+    formattedDate.value = rawValue;
+    inputState.value = "error";
+    inputMessage.value = invalidCharMessage.value;
+
+    // Remove dots and reformat after 500ms
+    invalidCharTimeout.value = setTimeout(() => {
+      const cleanedValue = rawValue.replace(/\./g, "");
+      formattedDate.value = formatDateValue(cleanedValue);
+      validateAndEmit(formattedDate.value);
+    }, 500);
+    return;
+  }
+
+  // Check if input exceeds 10 characters (TT.MM.JJJJ format)
+  if (rawValue.length > 10) {
+    // Show the overlength input temporarily with error message
+    formattedDate.value = rawValue;
+    inputState.value = "error";
+    inputMessage.value = formatErrorMessage.value;
+
+    // Remove excess characters after 500ms
+    invalidCharTimeout.value = setTimeout(() => {
+      formattedDate.value = rawValue.slice(0, 10);
+      validateAndEmit(formattedDate.value);
+    }, 500);
+    return;
+  }
+
+  // Format and validate normally
+  const formattedValue = formatDateValue(rawValue.replace(/[^\d]/g, ""));
+  formattedDate.value = formattedValue;
+  validateAndEmit(formattedValue);
+}
+
+function formatDateValue(digitsOnly: string): string {
+  let value = digitsOnly.replace(/\D/g, ""); // Keep only digits
+
+  // Insert dot after day (2 digits)
+  if (value.length > 2) {
+    value = value.slice(0, 2) + "." + value.slice(2);
+  }
+  // Insert dot after month (next 2 digits)
+  if (value.length > 5) {
+    value = value.slice(0, 5) + "." + value.slice(5);
+  }
+  // Limit to 10 characters (DD.MM.YYYY)
+  if (value.length > 10) {
+    value = value.slice(0, 10);
+  }
+
+  return value;
+}
+
+function validateAndEmit(value: string) {
+  // If incomplete date, reset state
+  if (value.length < 10) {
+    inputState.value = "idle";
+    inputMessage.value = "";
+    return;
+  }
+
+  // Parse the date using dots as separator
+  const parsed = parseDateWithCurrentTime(value);
+
+  if (!isValid(parsed)) {
+    inputState.value = "error";
+    inputMessage.value = invalidDateMessage.value;
+    return;
+  }
+
+  if (props.minDate && isValid(props.minDate)) {
+    if (startOfDay(parsed) < startOfDay(props.minDate)) {
+      inputState.value = "error";
+      inputMessage.value = minDateMessage.value;
+      return;
+    }
+  }
+
+  if(props.maxDate && isValid(props.maxDate)) {
+    if (startOfDay(parsed) > startOfDay(props.maxDate)) {
+      inputState.value = "error";
+      inputMessage.value = maxDateMessage.value;
+      return;
+    }
+  }
+
+  inputState.value = "success";
+  inputMessage.value = "";
+
+  emit("update:modelValue", parsed.toISOString());
+}
+
+/**
+ * Parse "dd.MM.yyyy" as a date, then apply the current local time (H:M:S.ms).
+ * Returns a new Date object.
+ */
+function parseDateWithCurrentTime(dateString: any) {
+  const now = new Date();
+
+  // 1) Parse date portion (defaults to midnight)
+  const parsedDate = parse(dateString, DISPLAY_FORMAT, now);
+
+  // 2) Overwrite the parsed date's time with the current local time
+  const result = set(parsedDate, {
+    hours: getHours(now),
+    minutes: getMinutes(now),
+    seconds: getSeconds(now),
+    milliseconds: getMilliseconds(now)
+  });
+
+  return result;
+}
+
+function onNativeDateChange(e: Event) {
+  if (!nativeDate.value) return;
+
+  const [year, month, day] = nativeDate.value.value.split("-");
+  const reformatted = `${day}.${month}.${year}`;
+  const fakeEvent = { target: { value: reformatted } } as unknown as Event;
+
+  onDateInput(fakeEvent);
+
+  if (props.layout === 'edit-field') {
+    // When DateInput is used in EditField, clicking events in the native picker removes focus from EditField.
+    // Since saving is based on blur in EditField, we need to restore focus and then blur to trigger save.
+    nextTick(() => {
+      inputRef.value?.focus?.();
+      inputRef.value?.blur?.();
+    });
+  }
+}
+
+// Computed property to expose validity status
+const isDateValid = computed(() => inputState.value === 'success');
+
+defineExpose({
+  focus: () => inputRef.value?.focus?.(),
+  blur: () => inputRef.value?.blur?.(),
+  select: () => inputRef.value?.select?.(),
+  isValid: isDateValid
+})
+</script>
+
+<style scoped>
+.native-date {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0 !important;
+  background: transparent;
+  color: transparent;
+  cursor: pointer;
+  z-index: 2;
+}
+
+.date-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.date-icon {
+  pointer-events: none;
+  cursor: pointer;
+  z-index: 1;
+}
 </style>