vue实现选择日期

Vue 实现选择日期的常用方法

使用原生 HTML5 date 输入类型

Vue 可以结合原生 HTML5 的 input 元素实现日期选择功能。这种方法简单快捷，但浏览器兼容性和样式定制性有限。

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

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

使用第三方日期选择组件

更常见的方法是使用成熟的第三方 Vue 日期选择组件库，这些组件提供丰富的功能和样式定制选项。

1. Vue DatePicker 安装 vue-datepicker 组件：

npm install vue-datepicker --save

基本用法示例：

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

<script>
import DatePicker from 'vue-datepicker'

export default {
  components: {
    DatePicker
  },
  data() {
    return {
      selectedDate: new Date()
    }
  }
}
</script>

2. Element UI 的 DatePicker 如果项目使用 Element UI，可以直接使用其日期选择组件：

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

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

自定义日期选择组件

对于需要高度定制化的需求，可以开发自定义日期选择组件：

<template>
  <div class="custom-datepicker">
    <input 
      type="text" 
      v-model="displayDate"
      @focus="showCalendar = true"
    />
    <div v-if="showCalendar" class="calendar">
      <!-- 日历实现逻辑 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      displayDate: '',
      showCalendar: false
    }
  },
  methods: {
    // 日期选择逻辑
  }
}
</script>

日期格式处理

无论使用哪种方法，通常都需要处理日期格式。可以使用 moment.js 或 date-fns 等库：

import moment from 'moment'

// 格式化日期
const formattedDate = moment(this.selectedDate).format('YYYY-MM-DD')

移动端日期选择

对于移动端应用，可以考虑使用专门为移动设备优化的组件，如 vant 的日期选择器：

<van-datetime-picker
  v-model="currentDate"
  type="date"
  :min-date="minDate"
  :max-date="maxDate"
/>