<template>
  <ElDatePicker
    class="syDatePicker"
    :model-value="modelValue"
    @update:model-value="$emit('update:modelValue', $event)"
    @blur="blur"
  ></ElDatePicker>
</template>

<script setup lang="ts">
import { ElDatePicker, useFormItem } from "element-plus";
const { formItem } = useFormItem();
const props = defineProps<{
  modelValue: number | string | Date | any[];
}>();

const emit = defineEmits(["update:modelValue"]);
const blur = () => {
  console.log("blur");
  formItem?.validate("blur");
};
</script>

<style lang="scss">
.syDatePicker {
  .el-input__inner {
    border-radius: var(--sy-border-radius);
    height: 36px;
    line-height: 36px;
    padding-left: 35px !important;
  }
  &.el-input__inner:focus {
    box-shadow: 0 0 0 1px var(--sy-blue) inset;
  }
}
</style>
