menduner/src/components/FormUI/datePicker/index.vue

<template>
  <div :style="{ width: item?.width ? item?.width + 'px' : '100%' }">
    <div class="d-flex align-center">
      <div v-if="item?.label" class="form-label" :style="{'width': item.labelWidth + 'px'}">{{ item.label }}</div>
      <el-config-provider :locale="zhCn">
        <el-date-picker
          style="flex: 1;"
          v-model="value"
          size="large"
          :type="item.mode || 'date'"
          :placeholder="item.placeholder || '请选择'"
          :start-placeholder="item.startPlaceholder || '开始日期'"
          :end-placeholder="item.endPlaceholder || '结束日期'"
          :format="item.format"
          :value-format="item.valueFormat || 'x'"
          :disabled="item.disabled"
          :disabled-date="disabledDates"
          :date-format="item.dateFormat"
          :time-format="item.timeFormat"
          :default-value="item.defaultValue"
          :default-time="item.defaultTime"
          :teleported="item.teleported || false"
          @change="modelValueUpDate"
          @clear="handleClear"
          @blur="handleOpen"
        >
        </el-date-picker>
      </el-config-provider>
    </div>
  </div>
</template>

<script setup>
defineOptions({ name:'FormUI-v-text-field'})
import { ref, watch } from 'vue'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import { ElDatePicker } from 'element-plus'

const props = defineProps({item: Object, modelValue: [String, Number, Boolean, Array], changeFn: Function})
const emit = defineEmits(['update:modelValue', 'change'])
const item = props.item

const value = ref(props.modelValue)

watch(() => props.modelValue, 
  (newVal) => {
    value.value = newVal
  },
  { immediate: true },
  { deep: true }
)

// 过去的日期不可选
const disabledDates = (date) => {
  // 未来的日期不可选
  if (props.item?.disabledFutureDates) {
    return date.getTime() > Date.now()
  }

  const currentDate = new Date()
  if (!props.item.disabledDate) return false
  // 过去的日期不可选
  currentDate.setDate(props.item?.dayAfter ? currentDate.getDate() : currentDate.getDate() - 1)
  return date.getTime() < currentDate.getTime()
}

const modelValueUpDate = (val) => {
  value.value = val
  emit('update:modelValue', value.value)
  emit('change', value.value)
}


const handleClear = () => {
  value.value = null
  emit('change', value.value)
}

const handleOpen = () => {
}
</script>

<style lang="scss" scoped>
:deep(.dp--menu-wrapper) {
  left: 0 !important;
}
.detailMargin {
  margin-bottom: 22px;
}
</style>