tenant-Platform/src/views/insurancePolicy/components/inputDatePicker.vue

<template>
  <div class="" style="width: 100%">
    <el-input
      v-model="inputData"
      :placeholder="$attrs.placeholder"
      prefix-icon="Calendar"
      @click="datePicker.handleOpen()"
      @blur="inputDate"
    ></el-input>
    <el-date-picker
      ref="datePicker"
      v-model="datePickerData"
      v-bind="$attrs"
      style="height: 100px; overflow: hidden"
      @change="changeDate"
    />
  </div>
</template>
<script setup lang="ts">
import dayjs from "dayjs";

const emit = defineEmits(["update:modelValue"]);
const props= defineProps({
modelValue: {
type: String
}
})

const datePicker = ref(null);
const datePickerData = ref(props.modelValue);
const inputData = ref("");

const inputDate = (e: any) => {
  const date = dayjs(e.target.value).format("YYYY-MM-DD");
  inputData.value = date;
  emit("update:modelValue", date);
};

const changeDate = (date: any) => {
  inputData.value = date;
  emit("update:modelValue", date);
};
</script>