当前位置：首页 > VUE

vue封装datepicker实现

2026-01-08 15:40:45VUE

封装 Vue DatePicker 组件

封装一个 Vue DatePicker 组件可以通过以下方式实现。这里以基于第三方库（如 v-calendar 或 element-ui 的 DatePicker）或原生实现为例。

安装依赖（可选）

如果使用第三方库如 v-calendar，需先安装：

npm install v-calendar

基础封装示例

以下是一个基于 v-calendar 的封装示例：

<template>
  <div class="custom-datepicker">
    <input
      :value="formattedDate"
      @click="isOpen = !isOpen"
      placeholder="选择日期"
      readonly
    />
    <div v-if="isOpen" class="datepicker-popup">
      <v-calendar
        :attributes="attrs"
        @dayclick="handleDateSelect"
      />
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue';
import { setupCalendar, DatePicker } from 'v-calendar';

export default {
  name: 'CustomDatePicker',
  props: {
    modelValue: {
      type: [Date, String],
      default: null,
    },
  },
  setup(props, { emit }) {
    const selectedDate = ref(props.modelValue);
    const isOpen = ref(false);

    const formattedDate = computed(() => {
      if (!selectedDate.value) return '';
      return new Date(selectedDate.value).toLocaleDateString();
    });

    const attrs = computed(() => [
      {
        key: 'selected',
        highlight: {
          color: 'blue',
          fillMode: 'solid',
        },
        dates: selectedDate.value,
      },
    ]);

    const handleDateSelect = (date) => {
      selectedDate.value = date.date;
      emit('update:modelValue', date.date);
      isOpen.value = false;
    };

    return {
      selectedDate,
      isOpen,
      formattedDate,
      attrs,
      handleDateSelect,
    };
  },
};
</script>

<style scoped>
.custom-datepicker {
  position: relative;
  display: inline-block;
}

.datepicker-popup {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  margin-top: 8px;
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
</style>

使用封装好的组件

在父组件中调用：

<template>
  <div>
    <CustomDatePicker v-model="selectedDate" />
  </div>
</template>

<script>
import CustomDatePicker from './CustomDatePicker.vue';

export default {
  components: { CustomDatePicker },
  data() {
    return {
      selectedDate: null,
    };
  },
};
</script>