menduner/src/components/DatePicker/index.vue

<template>
  <div style="width: 100%">
    <VueDatePicker
      locale="zh-CN"
      :disabled="options?.disabled || false"
      :range="options?.range || false"
      :model-type="options?.format || 'yyyy.MM.dd'"
      :month-picker="month"
      :time-picker="time"
      :year-picker="year"
      :placeholder="options.placeholder ?? '请选择'"
      auto-apply
      text-input
      :disabled-dates="options.disabledDates || []"
      :show-now-button="options.showToday"
      now-button-label="今天"
      :enable-time-picker="options.enableTimePicker ?? false"
      :clearable="options.clearable ?? true"
      :day-names="['一', '二', '三', '四', '五', '六', '七']"
      v-bind="$attrs"
      :time-picker-inline="true"
      select-text="确认"
      cancel-text="取消"
      @update:model-value="options?.change"
    ></VueDatePicker>
  </div>
</template>

<script setup>
defineOptions({ name: 'date-picker'})
import { computed } from 'vue';

const props = defineProps({
  width: {
    type: [String, Number],
    default: 300
  },
  options: {
    type: Object,
    default: () => {}
  }
})

const year = computed(() => {
  return props.options.type === 'year'
})
const month = computed(() => {
  return props.options.type === 'month'
})
const time = computed(() => {
  return props.options.type === 'time'
})
</script>

<style scoped lang="scss">
:deep(.dp__input_icon_pad) {
  font-size: 14px;
}
:deep(.dp__input) {
  border: 1px solid #ababab;
  padding: 7px 30px;
  &:hover {
    border: 1px solid #444;
  }
  &:focus {
    border: 1px solid var(--v-primary-base);
  }
}
</style>