基于vue-mobile-calendar插件，写的一个移动端日期弹窗插件

vue2.0  pc端适配移动端，在element-ui的基础上使用vue-mobile-calendar来进行适配。

效果：

引入vue-mobile-calendar

 npm install vue-mobile-calendar

在main.js进行全局引入

// 移动端日期插件
import Calendar from "vue-mobile-calendar";
Vue.use(Calendar);

组件代码：

<template>
  <div>
    <div @click="datePopup">
      <el-date-picker
        v-model="newDates"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :editable="false"
        popper-class="popperClass1"
      >
      </el-date-picker>
    </div>
    <el-dialog
      title="日期选择"
      v-if="dialogVisible"
      :visible.sync="dialogVisible"
      width="98%"
      style="margin-top: 10vh"
      custom-class="date-picker-dialog"
    >
      <div class="dialog-left">
        <el-button
          v-for="item in pickerOptions"
          :key="item.id"
          @click="onClick(item.id)"
          size="small"
          type="text"
          >{{ item.text }}</el-button
        >
      </div>
      <div class="dialog-right">
        <inlineCalendar
          :defaultDate="datePicker"
          mode="during"
          :enableTouch="false"
          @change="onChange"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  model: {
    prop: "value",
    event: "click",
  },
  data() {
    return {
      newDates: [], //日期选择
      datePicker: [], //日期默认值回显
      dialogVisible: false, // 弹窗显示状态
      //日期快捷键选择
      pickerOptions: [
        {
          text: "今    天",
          id: 1,
        },
        {
          text: "昨    天",
          id: 2,
        },
        {
          text: "最近三天",
          id: 3,
        },
        {
          text: "最近一周",
          id: 4,
        },
        {
          text: "最近30天",
          id: 5,
        },
        {
          text: "前一个月",
          id: 6,
        },
        {
          text: "前两个月",
          id: 7,
        },
        {
          text: "前三个月",
          id: 8,
        },
        {
          text: "最近一年",
          id: 9,
        },
      ],
    };
  },
  props: {
    value: {
      type: String | Array,
      default: () => {
        return [];
      },
    },
  },
  watch: {
    // 监听弹窗，若弹窗打开 true ,将父组件value值赋值给 newDates 和datePicker 进行回显
    dialogVisible(val) {
      if (val) {
        this.newDates = this.value;
        this.datePicker = this.value;
      }
    },
    // 监听日期选择，并且传值到父组件
    newDates(data) {
      let timeData = data || [];
      if (timeData.length > 0) {
        timeData = [timeData[0] + " 00:00:00", timeData[1] + " 23:59:59"];
      }
      this.$emit("click", timeData);
    },
  },
  created() {
    // 首次加载将父组件值赋值给newDates
    this.newDates = this.value;
  },
  methods: {
    //日期弹窗
    datePopup() {
      this.dialogVisible = true;
    },

    /**
     * @function 日期列表选择
     * @param {Array} date -日期范围选择框选中的值
     */
    onChange(date) {
      if (date.length == 2) {
        this.newDates = [];
        //将 date进行格式化 得到 "YYYY-MM-DD"格式日期
        date.forEach((element) => {
          this.newDates.push(element.format("YYYY-MM-DD"));
        });
        // 判断数组值是否不相同，在进行数组去重
        if (this.newDates[0] != this.newDates[1]) {
          this.newDates = [...new Set(this.newDates)];
        }
        this.dialogVisible = false;
      }
    },

    /**
     *快捷日期选择方法
     * @param item {*} item - ID用于switch判断执行
     */
    onClick(item) {
      let end = new Date();
      let start = new Date();
      let now = new Date();
      let year = now.getFullYear();
      let month = now.getMonth();
      const myDate = new Date(year, month, 0);
      switch (item) {
        // 当天
        case 1:
          this.newDates = [
            this.msToDate(new Date()),
            this.msToDate(new Date()),
          ];
          this.dialogVisible = false;
          break;
        // 昨天
        case 2:
          const date = new Date();
          date.setTime(date.getTime() - 3600 * 1000 * 24);
          this.newDates = [this.msToDate(date), this.msToDate(date)];
          this.dialogVisible = false;
          break;
        // 最近三天
        case 3:
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 2);
          this.newDates = [this.msToDate(start), this.msToDate(end)];
          this.dialogVisible = false;
          break;
        // 最近一周
        case 4:
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
          this.newDates = [this.msToDate(start), this.msToDate(end)];
          this.dialogVisible = false;
          break;
        // 最近30天
        case 5:
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
          this.newDates = [this.msToDate(start), this.msToDate(end)];
          this.dialogVisible = false;
          break;
        // 前一个月
        case 6:
          if (month <= 0) {
            month = month + 12;
            year = year - 1;
          }
          if (parseInt(month) < 10) {
            month = "0" + month;
          }
          start = new Date(year + "-" + month + "-01");
          end = new Date(year + "-" + month + "-" + myDate.getDate());
          this.newDates = [this.msToDate(start), this.msToDate(end)];
          this.dialogVisible = false;
          break;
        // 前两个月
        case 7:
          month = month - 1;
          if (month <= 0) {
            month = month + 12;
            year = year - 1;
          }
          if (parseInt(month) < 10) {
            month = "0" + month;
          }
          start = new Date(year + "-" + month + "-01");
          end = new Date(year + "-" + month + "-" + myDate.getDate());
          this.newDates = [this.msToDate(start), this.msToDate(end)];
          this.dialogVisible = false;
          break;
        // 前三个月
        case 8:
          month = month - 2;
          if (month <= 0) {
            month = month + 12;
            year = year - 1;
          }
          if (parseInt(month) < 10) {
            month = "0" + month;
          }
          start = new Date(year + "-" + month + "-01");
          end = new Date(year + "-" + month + "-" + myDate.getDate());
          this.newDates = [this.msToDate(start), this.msToDate(end)];
          this.dialogVisible = false;
          break;
        // 最近一年
        default:
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
          this.newDates = [this.msToDate(start), this.msToDate(end)];
          this.dialogVisible = false;
      }
    },
    /**
     * 用于将中国标准时间转换成 YYYY-MM-DD
     * @param {*} msec -日期参数
     */
    msToDate(msec) {
      let datetime = new Date(msec);
      let year = datetime.getFullYear();
      let month = datetime.getMonth();
      let date = datetime.getDate();
      let result =
        year +
        "-" +
        (month + 1 >= 10 ? month + 1 : "0" + (month + 1)) +
        "-" +
        (date + 1 < 10 ? "0" + date : date);
      return result;
    },
  },
};
</script>
<style lang="scss" scoped>
.el-button + .el-button,
.el-checkbox.is-bordered + .el-checkbox.is-bordered {
  margin-left: 0px;
}
.el-button--text {
  border-color: transparent;
  color: #606266;
  background: 0 0;
  padding-left: 0;
  padding-right: 0;
}
.dialog-left {
  float: left;
  width: 15%;
  height: 100%;
  padding: 5px;
}
.dialog-right {
  float: right;
  width: 80%;
  text-align: center;
  border-left: 2px solid #f5f5f5;
  padding: 0 5px;
}
</style>
<style lang="scss">
body {
  padding-right: 0 !important;
}

.popperClass1 {
  border: none;
}
.popperClass1 .el-picker-panel__body {
  display: none !important;
}

.el-range-editor.el-input__inner {
  width: 100%;
}

.date-picker-dialog .el-dialog__body {
  padding: 0 5px;
}

.m-calendar {
  background: #fff;

  .m-toolbar {
    background: #ffffff;
    height: 44px;
    font-size: 17px;
    .m-year-selector {
      width: 50%;
      padding: 0 10px;
    }
    .m-month-selector {
      width: 50%;
      padding: 0 10px;
    }
    .m-toolbar {
      background: #ffffff;
    }
  }
  .m-months-container {
    .m-months-wrapper {
      .m-months {
        .m-row {
          .m-day {
            .m-during {
              background: #409eff;
              color: #fff;
              width: 30px;
              height: 30px;
              line-height: 30px;
              display: inline-block;
              border-radius: 100%;
            }
          }
        }
      }
    }
  }
  .m-week-header {
    background: #ffffff;
  }
}
</style>