使用element-ui实现日期选项卡-阿里云开发者社区

使用element-ui实现日期选项卡

2022-04-26 256

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： element-ui大家应该都知道，最近接触到一个日期选项卡的案例，顺便总结一下

element-ui大家应该都知道，最近接触到一个日期选项卡的案例，顺便总结一下，Look！

点击上面的日期选择器，对应的第一个日期将会改变成当下选中的日期，后面则是选中日期后6天！

这边有几点步骤需要注意，第一将日期选择器设置当前时间为默认时间；第二获取当前日期的后6天；第三将默认时间改成任意选择的日期，获取后6天的日期；第四日期选择器格式需要转换成我们所需要的格式。

按照上述思路，可以更好的帮助读者理解代码。

<template>
<el-col :span="24" class="block">
          <el-date-picker v-model="chooseCurDay" :placeholder="nowDay" type="date"></el-date-picker>
        </el-col>
        <el-col :span="22" :offset="1" class="date">
          <el-tabs v-model="activeName">
            <el-tab-pane
              v-for="(item,index) in days"
              :key="index"
              :label="funDate(chooseCurDay,index)"
              :name="item.name"
            ></el-tab-pane>
          </el-tabs>
        </el-col>
</template>
<script>
export default {
    data() {
        return {
          nowDay: "",   //当前日期
          chooseCurDay: ""  //选择的日期
        };
      },
     created() {
        this.nowDay = this.dateFormat(new Date());
        this.chooseCurDay = new Date();
    },
   methods: {
    //转日期格式
    dateFormat(time) {
      var date = new Date(time);
      var year = date.getFullYear();
      var month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hours =
        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minutes =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var seconds =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      // 拼接
      return year + "-" + month + "-" + day;
    },
    funDate(date, aa) {
          let date1;
          date1 = date;
          let time1 = this.dateFormat(date1); //time1表示当前时间
          let date2 = new Date(date1);
          date2.setDate(date1.getDate() + aa);
          let time2 = this.dateFormat(date2);
          date = "";
          return time2;
        }
      }
  }
</script>