vue实现选择日期

使用 Vue 实现日期选择功能

使用原生 HTML5 <input type="date">

最简单的实现方式是使用 HTML5 的原生日期选择器，Vue 可以通过 v-model 进行数据绑定：

<template>
  <div>
    <label for="date">选择日期：</label>
    <input type="date" id="date" v-model="selectedDate">
    <p>选择的日期是：{{ selectedDate }}</p>
  </div>
</template>

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

使用第三方日期选择器组件

更推荐使用成熟的第三方日期选择器组件，如 v-calendar 或 element-ui 的日期选择器。

安装 v-calendar

npm install v-calendar

基本使用示例

<template>
  <div>
    <v-date-picker v-model="selectedDate" />
    <p>选择的日期是：{{ selectedDate }}</p>
  </div>
</template>

<script>
import { DatePicker } from 'v-calendar';

export default {
  components: {
    'v-date-picker': DatePicker
  },
  data() {
    return {
      selectedDate: new Date()
    }
  }
}
</script>

使用 Element UI 的日期选择器

如果项目中使用 Element UI，可以这样实现：

<template>
  <div>
    <el-date-picker
      v-model="selectedDate"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
    <p>选择的日期是：{{ selectedDate }}</p>
  </div>
</template>

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

自定义日期选择器

如果需要完全自定义的日期选择器，可以创建一个组件：

<template>
  <div class="custom-date-picker">
    <div class="calendar-header">
      <button @click="prevMonth">上个月</button>
      <span>{{ currentYear }}年{{ currentMonth }}月</span>
      <button @click="nextMonth">下个月</button>
    </div>
    <div class="calendar-days">
      <div v-for="day in days" :key="day" class="day" @click="selectDate(day)">
        {{ day }}
      </div>
    </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
    },
    days() {
      // 生成当月天数逻辑
      const year = this.currentDate.getFullYear()
      const month = this.currentDate.getMonth()
      const daysInMonth = new Date(year, month + 1, 0).getDate()
      return Array.from({ length: daysInMonth }, (_, i) => i + 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
      )
    },
    selectDate(day) {
      this.selectedDate = new Date(
        this.currentDate.getFullYear(),
        this.currentDate.getMonth(),
        day
      )
      this.$emit('date-selected', this.selectedDate)
    }
  }
}
</script>

<style>
.custom-date-picker {
  width: 300px;
  border: 1px solid #ccc;
  padding: 10px;
}
.calendar-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}
.day {
  padding: 5px;
  text-align: center;
  cursor: pointer;
}
.day:hover {
  background-color: #eee;
}
</style>

日期格式化处理

无论使用哪种方式选择日期，通常需要对日期进行格式化处理：

// 在 methods 中
formatDate(date) {
  if (!date) return ''
  const d = new Date(date)
  return `${d.getFullYear()}-${(d.getMonth() + 1).toString().padStart(2, '0')}-${d.getDate().toString().padStart(2, '0')}`
}

或者使用第三方库如 date-fns 或 moment.js：

import { format } from 'date-fns'

// 使用
format(new Date(), 'yyyy-MM-dd')

这些方法可以根据项目需求选择最适合的实现方式，第三方组件通常提供更丰富的功能和更好的用户体验。