Vue日期时间选择器组件使用方法详解

本文实例为大家分享了Vue日期时间选择器组件的具体代码，供大家参考，具体内容如下

1.效果图如下

单选日期选择器

多选日期选择器

日期时间选择器

2.准备

Date原型格式化工具方法

Date.prototype.format = function(fmt) {
  //author: meizz
  var o = {
    "M+": this.getMonth() + 1, //月份
    "d+": this.getDate(), //日
    "h+": this.getHours(), //小时
    "m+": this.getMinutes(), //分
    "s+": this.getSeconds(), //秒
    "q+": Math.floor((this.getMonth() + 3) / 3), //季度
    S: this.getMilliseconds() //毫秒
  };
  if (/(y+)/.test(fmt))
    fmt = fmt.replace(
      RegExp.$1,
      (this.getFullYear() + "").substr(4 - RegExp.$1.length)
    );
  for (var k in o)
    if (new RegExp("(" + k + ")").test(fmt))
      fmt = fmt.replace(
        RegExp.$1,
        RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
      );
  return fmt;
};

根据传入时间日期解析出该月份，获取该月的第一天和最后一天的时间戳，和该月时间戳对应的星期
【注意】

• 一定要解析该月份第一天的零点零分，js大部分日期解析为那天的8点，但有些日期会解析为那天的零点零分，这样就会出现时间戳错误，导致获取该月份天数错误
• 因为一般显示该月份是包含上月或者下个月的一些在该月星期的日期，所以也要计算出该月包含的几个星期的天
  

getMonthDay() {
  //该月第一天
      var monthFirst = new Date(this.year + "-" + this.month + "-01 00:00");
      var w = monthFirst.getDay();
//下个月第一天减去1s为该月最后一天时间
      this.startDay = monthFirst.getTime() - w * 24 * 3600 * 1000;
      if (this.month == 12) {
        this.endDay = new Date(this.year + 1 + "-01-01 00:00").getTime() - 1000;
      } else {
        this.endDay =
          new Date(this.year + "-" + (this.month + 1) + "-01 00:00").getTime() -
          1000;
      }
//计算该月包含的星期，并获取对应星期的第一天
      var monthDay = (this.endDay + 1000 - this.startDay) / (24 * 3600 * 1000);
      this.weekNum = Math.ceil(monthDay / 7);
//获取对应的该月天数
      this.monthList = [];
      for (var i = 0; i < this.weekNum; i++) {
        var item = [];
        for (var j = 0; j < 7; j++) {
          item.push(
            this.startDay + i * 24 * 3600 * 1000 * 7 + j * 24 * 3600 * 1000
          );
        }
        this.monthList.push(item);
      }
},

3.具体实现

SCSS样式

 .date-picker-bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
}

.date-picker {
  background-color: white;
  position: fixed;
  display: block;
  padding: 4px;
  z-index: 6;
  border: solid 1px gainsboro;
  border-radius: 2px;
  .picker-top {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 30px;
    line-height: 30px;
    .picker-arrow {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width:30px;
      height: 30px;
      cursor: pointer;
      .iconfont {
        color: #8a8a8a;
      }
      .iconfont:active,
      .iconfont:hover {
        color: #388dea;
      }
    }

    .date-text {
      flex: 1;
      font-weight: bold;
      display: inline-block;
      text-align: center;
      font-size: 14px;
    }
  }

  .picker-content {
    display: block;
    border-top: solid 1px gainsboro;
    border-bottom: solid 1px gainsboro;
    height: 160px;
    table {
      width: 100%;
      border-collapse: collapse;
      border-spacing: 0;
      font-size: 12px;
      line-height: 20px !important;
      thead > tr {
        background-color: #cedeee;
        th {
          text-align: center;
          font-weight: normal;
        }
      }
      tbody {
        tr {
          td {
            font-weight: 600;
            cursor: pointer;
            text-align: center;
          }
          td.gray {
            font-weight: normal;
            color: #8a8a8a;
          }
          td.active {
            color: white;
            background: #388dea;
          }
        }
      }
    }
  }

  .picker-content1 {
    @extend .picker-content;
    display: flex;
    flex-direction: row;
    table {
      width: calc(100% - 40px);
    }
    .hour-list {
      display: inline-block;
      list-style: none;
      padding: 0;
      margin: 0;
      height: 100%;
      overflow-x: hidden;
      width: 40px;
      font-size:12px;

      overflow-y: auto;
      li {
        padding: 0;
        margin: 0;
        display: flex;
        align-items: center;
        padding: 0 4px;
        height:20px;
        cursor: pointer;
      }
      li:not(:last-child) {
        border-bottom: solid 1px gainsboro;
      }
      li.active {
        color: white;
        background: #388dea;
      }
    }
    .hour-list::-webkit-scrollbar {
      background: transparent;
      height: 8px;
      width:8px;
      border: none;
    }

    .hour-list::-webkit-scrollbar-thumb {
      background: lightgray;
      border-radius:5px;
    }
    //设置滚动条 end
  }

  .picker-footer {
    display: block;
   line-height: 30px;
   text-align: right;
   white-space: nowrap;
    button {
      outline: none;
      border: solid 1px gainsboro;
      border-radius: 2px;
      color: #8a8a8a;
      height: 24px;
      font-size: 12px;
      background-color: #f3f3f3;
    }
    button:active,
    button:hover {
      border-color: #388dea;
      color: #388dea;
      background-color: #d9edf6;
    }
  }
}

单选日期选择器DatePicker

多选日期选择器DatePicker1

日期时间选择器

使用Picker

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。