vue实现日期选择

Vue 实现日期选择的方法

使用原生 HTML5 input[type="date"]

Vue 可以直接绑定原生日期输入控件，适合简单场景且不需要复杂样式定制。

<template>
  <input type="date" v-model="selectedDate" @change="handleDateChange">
</template>

<script>
export default {
  data() {
    return {
      selectedDate: ''
    }
  },
  methods: {
    handleDateChange() {
      console.log('Selected date:', this.selectedDate)
    }
  }
}
</script>

使用第三方组件库

主流UI库提供功能丰富的日期选择器：

Element UI

<template>
  <el-date-picker
    v-model="date"
    type="date"
    placeholder="选择日期">
  </el-date-picker>
</template>

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

Vuetify

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

<script>
export default {
  data() {
    return {
      picker: new Date().toISOString().substr(0, 10)
    }
  }
}
</script>

使用专用日期选择库

vue-datepicker 安装后使用：

npm install vue-datepicker --save

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

<script>
import DatePicker from 'vue-datepicker'

export default {
  components: {
    DatePicker
  },
  data() {
    return {
      date: ''
    }
  }
}
</script>

自定义日期选择组件

如需完全自定义，可基于日历算法实现：

<template>
  <div class="custom-datepicker">
    <div class="calendar-header">
      <button @click="prevMonth">←</button>
      <span>{{ currentYear }}-{{ currentMonth }}</span>
      <button @click="nextMonth">→</button>
    </div>
    <div class="calendar-grid">
      <!-- 日历日期渲染逻辑 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentDate: new Date(),
      selectedDate: null
    }
  },
  computed: {
    currentYear() {
      return this.currentDate.getFullYear()
    },
    currentMonth() {
      return this.currentDate.getMonth() + 1
    }
  },
  methods: {
    prevMonth() {
      this.currentDate = new Date(
        this.currentDate.getFullYear(),
        this.currentDate.getMonth() - 1,
        1
      )
    },
    nextMonth() {
      this.currentDate = new Date(
        this.currentDate.getFullYear(),
        this.currentDate.getMonth() + 1,
        1
      )
    }
  }
}
</script>

日期格式处理

使用 moment.js 或 date-fns 处理日期格式：

import moment from 'moment'

// 格式化输出
moment(this.selectedDate).format('YYYY-MM-DD')

// 多语言支持
moment.locale('zh-cn')

注意事项

• 移动端需考虑触摸交互体验
• 时区处理需保持一致
• 清空功能需明确交互方式
• 禁用日期可通过计算属性实现
• 范围选择需维护开始/结束两个状态值