vue2简单日历组件

以下是一个简单的Vue2日历组件的实现，包括日期选择和月份切换功能：

<template>
  <div class="calendar">
    <div class="header">
      <span class="prev" @click="prevMonth">&lt;</span>
      <span class="title">{{ year }}年{{ month }}月</span>
      <span class="next" @click="nextMonth">&gt;</span>
    </div>
    <div class="weekdays">
      <span v-for="day in weekdays" :key="day">{{ day }}</span>
    </div>
    <div class="days">
      <span v-for="day in days" :key="day.date"
            :class="{ today: day.today, selected: day.selected, disabled: day.disabled }"
            @click="selectDay(day)"
            >{{ day.day }}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      weekdays: ['日', '一', '二', '三', '四', '五', '六'],
      year: 0,
      month: 0,
      days: []
    }
  },
  computed: {
    date() {
      return this.value ? new Date(this.value) : new Date()
    },
    firstDay() {
      return new Date(this.year, this.month - 1, 1).getDay()
    },
    lastDate() {
      return new Date(this.year, this.month, 0).getDate()
    }
  },
  methods: {
    init() {
      this.year = this.date.getFullYear()
      this.month = this.date.getMonth() + 1
      this.days = []
      for (let i = 1; i <= this.lastDate; i++) {
        const date = new Date(this.year, this.month - 1, i)
        this.days.push({
          date,
          day: i,
          today: this.isToday(date),
          selected: this.isSelected(date),
          disabled: this.isDisabled(date)
        })
      }
    },
    isToday(date) {
      const today = new Date()
      return date.getFullYear() === today.getFullYear() &&
        date.getMonth() === today.getMonth() &&
        date.getDate() === today.getDate()
    },
    isSelected(date) {
      return this.value && date.getTime() === new Date(this.value).getTime()
    },
    isDisabled(date) {
      return false // 可以根据需要自定义禁用日期的规则
    },
    selectDay(day) {
      if (!day.disabled) {
        this.$emit('input', day.date.toISOString())
      }
    },
    prevMonth() {
      if (this.month === 1) {
        this.year--
        this.month = 12
      } else {
        this.month--
      }
      this.init()
    },
    nextMonth() {
      if (this.month === 12) {
        this.year++
        this.month = 1
      } else {
        this.month++
      }
      this.init()
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style>
.calendar {
  width: 200px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  color: #333;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  background-color: #f5f5f5;
}
.weekdays {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 8px;
  background-color: #f5f5f5;
}
.days {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  padding: 8px;
}
.days span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  margin: 4px;
  cursor: pointer;
  border-radius: 50%;
}
.days span.today {
  background-color: #409eff;
  color: #fff;
}
.days span.selected {
  background-color: #f5f5f5;
  color: #333;
}
.days span.disabled {
  color: #ccc;
  cursor: not-allowed;
}
</style>

使用方法：

<template>
  <div>
    <input type="text" v-model="date" readonly>
    <calendar v-model="date"></calendar>
  </div>
</template>

<script>
import Calendar from './Calendar.vue'

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