vue+iview实现日历日期选择（多月份多选）

最新推荐文章于 2024-06-12 17:41:33 发布

LBJsagiri

最新推荐文章于 2024-06-12 17:41:33 发布

阅读量1.8k

点赞数 1

分类专栏：前端开发文章标签： view design html 前端 javascript

本文链接：https://blog.csdn.net/qq_40518071/article/details/131102065

版权

前端开发专栏收录该内容

16 篇文章 2 订阅

订阅专栏

文章展示了一个使用Vue.js框架构建的日期选择组件，该组件允许用户在多个月份中选择特定日期。组件包括一个Modal对话框，内含Tabs控件，每个Tab代表一个月，用户可以通过点击日期卡片来选择或取消选择日期。选定的日期会存储在一个数组中，供后续处理使用。

摘要由CSDN通过智能技术生成

需求分析

选择本年某月某天（可多选不同月份，不同日期）

实现效果

在这里插入图片描述

HTML代码

<Modal
      v-model="showYearTaskTime"
      :mask-closable="false"
      title="生成任务日期"
      @on-ok="exportYearData"
      width="900"
      @on-cancel="cancelAddPeopleCard"
    >
      <div class="selectTitle">选择日期（月）</div>
      <Tabs v-model="tabName" @on-click="changeNum">
        <TabPane
          v-for="(item, index) in tabDatas"
          :label="item.label"
          :name="item.name"
          :key="index"
        >
          <div class="addPeopleCardStyle">
            <div
              @click="chooseTemplate(index, item)"
              class="onePeopleCard"
              v-for="(item, index) in yearMonthTaskTime"
              :key="index"
              :class="{ clickOnePeopleCard: selectedYear.indexOf(item.value) != -1 }"
            >
              {{ item.label }}
            </div>
          </div>
        </TabPane>
  </Tabs>
</Modal>

JS代码

showYearTaskTime: false,
      tabDatas: [
        {
          label: '1月',
          name: '01',
        },
        {
          label: '2月',
          name: '02',
        },
        {
          label: '3月',
          name: '003',
        },
        {
          label: '4月',
          name: '04',
        },
        {
          label: '5月',
          name: '05',
        },
        {
          label: '6月',
          name: '06',
        },
        {
          label: '7月',
          name: '07',
        },
        {
          label: '8月',
          name: '08',
        },
        {
          label: '9月',
          name: '09',
        },
        {
          label: '10月',
          name: '10',
        },
        {
          label: '11月',
          name: '11',
        },
        {
          label: '12月',
          name: '12',
        },
      ],

tabName: '01',
yearMonthTaskTime: [],
setYearList: [],
yearTaskDate: [],
selectedYear: [],

//弹框
getYearTaskTime() {
      this.showYearTaskTime = true
      this.selectedYear = []
      this.form.taskDate = ''
},
//切换tab获取当月日期
changeNum() {
      this.getDaysInMonth(this.tabName)
},
//获取本月日期
getDaysInMonth(month) {
      var date = new Date()
      var year = date.getFullYear()
      month = parseInt(month, 10)
      var temp = new Date(year, month, 0)
      let n = +temp.getDate()
      let dataTimes = []
      for (var i = 1; i < n + 1; i++) {
        const m = month < 10 ? '0' + month : month
        const d = i < 10 ? '0' + i : i
        dataTimes.push({
          value: m + '-' + d,
          label: i,
        })
      }
      this.yearMonthTaskTime = dataTimes
},
//选择日期
chooseTemplate(index, item) {
      if (this.selectedYear.indexOf(item.value) !== -1) {
        // 匹配到数据， 取消
        this.selectedYear.splice(this.selectedYear.indexOf(item.value), 1)
      } else {
        // 匹配不到， 添加到数组中
        this.selectedYear.push(item.value)
      }
},
//根据接口接收数据类型处理数据（按需）
exportYearData() {
      this.form.taskDate = this.selectedYear.toString()
},

CSS代码

.addPeopleCardStyle {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.onePeopleCard {
  width: 76px;
  height: 32px;
  line-height: 30px;
  text-align: center;
  background-color: #ffffff;
  border-radius: 5px;
  color: #17181d;
  font-size: 0.14rem;
  border: 1px solid #dcdcdc;
  opacity: 1;
  border-radius: 4px;
  margin-bottom: 10px;
  margin-left: 10px;
}
.onePeopleCard:hover {
  cursor: pointer;
}
.clickOnePeopleCard {
  width: 76px;
  height: 32px;
  line-height: 30px;
  text-align: center;
  background: rgba(18, 141, 255, 0.1);
  border: 1px solid #128dff;
  border-radius: 5px;
  color: #128dff;
  font-size: 0.14rem;
  margin-bottom: 10px;
  margin-left: 10px;
  opacity: 1;
  border-radius: 4px;
}
.clickOnePeopleCard:hover {
  cursor: pointer;
}``