当前位置：首页 > VUE

vue 时间控件实现

2026-01-18 00:50:11VUE

vue 时间控件实现

使用 Element UI 的 DatePicker

Element UI 提供了功能丰富的日期选择组件，支持单日、日期范围、时间选择等场景。安装 Element UI 后，可以直接使用 el-date-picker 组件。

<template>
  <el-date-picker
    v-model="date"
    type="date"
    placeholder="选择日期"
    format="YYYY-MM-DD"
    value-format="YYYY-MM-DD"
  />
</template>

<script>
export default {
  data() {
    return {
      date: ''
    };
  }
};
</script>

使用 Ant Design Vue 的 DatePicker

Ant Design Vue 同样提供了强大的日期选择组件，支持多种模式和自定义配置。

<template>
  <a-date-picker v-model:value="date" />
</template>

<script>
import { ref } from 'vue';
export default {
  setup() {
    const date = ref(null);
    return { date };
  }
};
</script>

使用 Vue Datepicker 独立库

vue-datepicker 是一个轻量级的日期选择组件，适合不需要复杂功能的场景。

<template>
  <datepicker v-model="date" />
</template>

<script>
import Datepicker from 'vue-datepicker';
export default {
  components: { Datepicker },
  data() {
    return {
      date: new Date()
    };
  }
};
</script>

自定义时间控件

如果需要完全自定义的时间控件，可以通过原生 HTML 的 input 结合 Vue 的事件绑定实现。

<template>
  <input type="datetime-local" v-model="datetime" />
</template>

<script>
export default {
  data() {
    return {
      datetime: ''
    };
  }
};
</script>

时间范围选择

对于时间范围选择，Element UI 和 Ant Design Vue 都提供了便捷的实现方式。

<template>
  <el-date-picker
    v-model="dateRange"
    type="daterange"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
  />
</template>

<script>
export default {
  data() {
    return {
      dateRange: []
    };
  }
};
</script>

格式化与本地化

日期控件通常支持自定义格式和本地化配置。例如，在 Element UI 中可以通过 format 和 value-format 控制显示和值的格式。

<el-date-picker
  v-model="date"
  type="date"
  format="yyyy年MM月dd日"
  value-format="yyyy-MM-dd"
/>

禁用日期

可以通过 disabled-date 属性动态禁用某些日期。

<el-date-picker
  v-model="date"
  :disabled-date="disabledDate"
/>

<script>
export default {
  methods: {
    disabledDate(time) {
      return time.getTime() > Date.now();
    }
  }
};
</script>

以上方法涵盖了常见的 Vue 时间控件实现需求，可以根据项目需求选择合适的方案。

vue 时间控件实现