用 Vue 实现原生日期选择器

原创

已于 2023-08-26 14:33:14 修改 · 6.5k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2022-01-03 12:38:33 首次发布

本文介绍了作者对日期选择组件的第二版优化，主要改进了实现思路，将样式转移到template中，使代码更加简洁，并将其封装为v-calendar-pick工具。欢迎体验并提出问题。

以下是第一版的实现思路，第二版做了优化，包括实现思路、样式转由 template 控制等，代码更简洁，已封装成工具——v-calendar-pick
👏🏻👏🏻👏🏻欢迎大家使用~ 来提 issue ~👏🏻👏🏻👏🏻

效果：

请添加图片描述

部分代码

.vue

<template>
  <div class="date-select">
    <div class="date-select__custom">
      <span class="date-select__custom--text">自定义日期</span>
      <span class="date-select__custom--value">
        <span v-if="dateData.length" v-html="dateText"></span>
        <span v-else>请选择日期</span>
      </span>
    </div>
    <div class="date-select__header" v-if="loading">
      <div class="date-select__header-prev">
        <span class="date-select__btn date-select__btn-prev--year">&lt;&lt;</span>
        <span class="date-select__btn date-select__btn-prev--month">&lt;</span>
      </div>

      <div class="date-select__header-middle">{
   
   {
   
    year }} 年 {
   
   {
   
    month }} 月</div>

      <div class="date-select__header-next">
        <span class="date-select__btn date-select__btn-next--month">&gt;</span>
        <span class="date-select__btn date-select__btn-next--year">&gt;&gt;</span>
      </div>
    </div>
    <div class="date-select__body">
      <div class="date-select__weeks">
        <div class="date-select__week" v-for="i in week" :key="i">{
   
   {
   
    i }}</div>
      </div>
      <div class="date-select__month" v-if="loading">
        <div :class="['date-select__day', i.date < i.showDate && 'prev-month', i.date > i.showDate && 'next-month']" v-for="i in monthData" :key="i.date">
          {
   
   {
   
    i.showDate }}
        </div>
      </div>
    </div>
  </div>
</template>

js：

export default {
   
   
  name: 'date-select',
  props: {
   
   
    selectData: {
   
   
      type: Array,
      default: () => []
    },
    type: {
   
   
      type: String,
      default: 'date'
    },
    isOpen: {
   
   
      type: Boolean,
      default: false
    }
  },
  data() {
   
   
    return {
   
   
      monthData: [],
      week: ['日', '一', '二', '三', '四', '五', '六'],
      year: '',
      month: '',
      start: null,
      end: null,
      dateData: [],
      oldDateData: [],
      loading: true
    }
  },
  watch: {
   
   
    isOpen: {
   
   
      handler(val) {
   
   
        if (val) {
   
   
          this.dateData = this.selectData
          const [startDateArr, endDateArr] = [this.dateData?.[0]?.split('-'), this.dateData?.[1]?.split('-')]
          this.start = startDateArr == null ? null : new Date(startDateArr[0], startDateArr[1] - 1, startDateArr[2])
          this.end = endDateArr == null ?

最低0.47元/天解锁文章