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

 <template>
  <div style="display:inline-block">
    <span @click="showpicker">{{getlangtext(label.datepicker)}}</span>
    <div class="date-picker-bg" v-show="isshow" @click="closepicker"></div>
    <div
      class="date-picker"
      v-show="isshow"
      :style="{width:'220px',top:pickertop>0?pickertop+'px':''}"
    >
      <div class="picker-top">
        <span class="picker-arrow" @click="preyear">&lsaquo; &lsaquo;</span>
        <span class="picker-arrow" @click="premonth">&lsaquo;</span>
        <span class="date-text">{{year}}-{{month>9?month:"0"+month}}</span>
        <span class="picker-arrow" @click="nextmonth">&rsaquo;</span>
        <span class="picker-arrow" @click="nextyear">&rsaquo;&rsaquo;</span>
      </div>
        <!--生成对应的月份星期表格 start-->
      <div class="picker-content">
        <table>
          <thead>
            <tr>
              <th v-for="(item,idx) in weeklist" :key="'week'+idx">{{getlangtext(item)}}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="idx in weeknum" :key="'weeknum'+idx">
              <td
                v-for="m in 7"
                :key="'monthday'+idx+'_'+m"
                :class="[new date(monthlist[idx-1][m-1]).getmonth()+1==month?'':'gray',selectdate==monthlist[idx-1][m-1]?'active':'']"
                @click="onselectdate(monthlist[idx-1][m-1])"
                @dblclick="onconfirmdate(monthlist[idx-1][m-1])"
              >{{new date(monthlist[idx-1][m-1]).getdate()}}</td>
              <!--日期为该月为深色否则为浅色-->
            </tr>
          </tbody>
        </table>
      </div>
        <!--生成对应的月份星期表格 end-->
      <div class="picker-footer">
        <button @click="closepicker">{{getlangtext(label.close)}}</button>
        <button @click="setnow">{{getlangtext(label.today)}}</button>
        <!-- <button @click="confirmpicker">{{getlangtext(label.ok)}}</button> -->
      </div>
    </div>
  </div>
</template>
<script>
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;
};
export default {
  name: "datepicker",
  props: {
    langtype: {
      type: string,
      default: window.localstorage.getitem("langtype")
    },
    date: {
      type: string,
      default: new date().format("yyyy-mm-dd")
    },
    isscroll: {
      type: boolean,
      default: false
    },
     isshow:{
      type:boolean,
      default:false
    }
  },
  data: () => ({
    label: {
      ok: { zh: "确定", en: "ok" },
      close: { zh: "关闭", en: "close" },
      today: { zh: "今天", en: "today" },
      datepicker: { zh: "日期选择", en: "datepicker" }
    },
    weeklist: [
      { zh: "日", en: "sun" },
      { zh: "一", en: "mon" },
      { zh: "二", en: "tue" },
      { zh: "三", en: "wed" },
      { zh: "四", en: "thu" },
      { zh: "五", en: "fir" },
      { zh: "六", en: "sat" }
    ],
    year: new date().getfullyear(),
    month: new date().getmonth() + 1,
    day: new date().getdate(),

    startday: 0,
    endday: 0,
    weeknum: 0,
    selectdate: new date(new date().format("yyyy-mm-dd 00:00")).gettime(),
    monthlist: [],
    pickertop: 0
  }),
  watch: {
    year() {
      this.getmonthday();
    },
    month() {
      this.getmonthday();
    }
  },
  methods: {
    getlangtext(item) {
      if (item) {
        if (this.langtype == "en") {
          if (item.en && item.en.length > 1) {
            return item.en.substring(0, 1).touppercase() + item.en.substring(1);
          } else if (item.en && item.en.length == 1) {
            return item.en.touppercase();
          } else {
            return "--";
          }
        } else {
          return item.zh ? item.zh : "--";
        }
      } else {
        return "--";
      }
    },
    preyear() {
      this.year = this.year - 1;
    },
    nextyear() {
      this.year = this.year + 1;
    },
    nextmonth() {
      if (this.month == 12) {
        this.year = this.year + 1;
        this.month = 1;
      } else {
        this.month++;
      }
    },
    premonth() {
      if (this.month == 1) {
        this.year = this.year - 1;
        this.month = 12;
      } else {
        this.month--;
      }
    },
    showpicker(e) {
      if (this.isscroll) {
        this.pickertop = e.clienty + e.offsety;
        var h = document.getelementbyid("app").offsetheight;
        if (this.pickertop > h - 230) {
          this.pickertop = h - 230;
        }
      }

       this.$emit("update:is-show",true);
      var time = new date(this.date).gettime();
      this.year = new date(time).getfullyear();
      this.month = new date(time).getmonth() + 1;
      this.day = new date(time).getdate();
      this.selectdate = new date(
        new date(time).format("yyyy-mm-dd 00:00")
      ).gettime();
    },
    onconfirmdate(time) {
      this.onselectdate(time);
      this.confirmpicker();
    },
    closepicker() {
      this.$emit("update:is-show",false);
    },
    setnow() {
      this.year = new date().getfullyear();
      this.month = new date().getmonth() + 1;
      this.day = new date().getdate();
      this.selectdate = new date(
        new date().format("yyyy-mm-dd 00:00")
      ).gettime();
    },
    confirmpicker() {
      this.$emit("update:date", new date(this.selectdate).format("yyyy-mm-dd"));
      this.$emit(
        "picker-result",
        new date(this.selectdate + this.selecthour * 3600000).format(
          "yyyy-mm-dd hh:00"
        )
      );
      this.closepicker();
    },
    getmonthday() {
      var monthfirst = new date(this.year + "-" + this.month + "-01 00:00");
      var w = monthfirst.getday();

      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);
      }
    },
    onselectdate(time) {
      this.selectdate = time;
      this.year = new date(time).getfullyear();
      this.month = new date(time).getmonth() + 1;
      this.day = new date(time).getdate();
      this.$emit("update:date", new date(time).format("yyyy-mm-dd"));
    }
  },
  mounted() {
    this.getmonthday();
  }
};
</script>
<style lang="scss" scoped>
</style>

多选日期选择器datepicker1

<template>
  <div style="display:inline-block">
    <span @click="showpicker">日期选择</span>
    <div class="date-picker-bg" v-show="isshow" @click="closepicker"></div>
    <div class="date-picker" v-show="isshow" style="width:220px">
      <div class="picker-top">
        <span class="picker-arrow" @click="preyear">&lsaquo; &lsaquo;</span>
        <span class="picker-arrow" @click="premonth">&lsaquo;</span>
        <span class="date-text">{{year}}-{{month>9?month:"0"+month}}</span>
        <span class="picker-arrow" @click="nextmonth">&rsaquo;</span>
        <span class="picker-arrow" @click="nextyear">&rsaquo;&rsaquo;</span>
      </div>
      <!--生成对应的月份星期表格 start-->
      <div class="picker-content">
        <table>
          <thead>
            <tr>
              <th v-for="(item,idx) in weeklist" :key="'week'+idx">{{getlangtext(item)}}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="idx in weeknum" :key="'weeknum'+idx">
              <td
                v-for="m in 7"
                :key="'monthday'+idx+'_'+m"
                :class="[new date(monthlist[idx-1][m-1]).getmonth()+1==month?'':'gray',getselectdate(monthlist[idx-1][m-1])?'active':'']"
                @click="onselectdate(monthlist[idx-1][m-1])"
              >{{new date(monthlist[idx-1][m-1]).getdate()}}</td>
               <!--日期为该月为深色否则为浅色-->
            </tr>
          </tbody>
        </table>
      </div>
       <!--生成对应的月份星期表格 end-->
      <div class="picker-footer">
        <button @click="onfullmonth">整月</button>
        <button @click="onselectdate(new date(new date().format('yyyy-mm-dd 00:00')).gettime())">今天</button>
        <button @click="closepicker">关闭</button>
      </div>
    </div>
  </div>
</template>
<script>
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;
};
export default {
  name: "datepicker",
  props: {
    langtype: {
      type: string,
      default: "zh"
    },
    date: {
      type: string,
      default: ""
    },

    isshow:{
      type:boolean,
      default:false
    }
  },
  data: () => ({
    weeklist: [
      { zh: "日", en: "sun" },
      { zh: "一", en: "mon" },
      { zh: "二", en: "tue" },
      { zh: "三", en: "wed" },
      { zh: "四", en: "thu" },
      { zh: "五", en: "fir" },
      { zh: "六", en: "sat" }
    ],
    year: new date().getfullyear(),
    month: new date().getmonth() + 1,
    day: new date().getdate(),

    startday: 0,
    endday: 0,
    weeknum: 0,
    selectdate: new date(new date().format("yyyy-mm-dd 00:00")).gettime(),
    monthlist: [],
    result: []
  }),
  watch: {
    date() {
      this.parsedate();
    },
    year() {
      this.getmonthday();
    },
    month() {
      this.getmonthday();
    }
  },
  methods: {
    getlangtext(item) {
      if (item) {
        if (this.langtype == "en") {
          if (item.en && item.en.length > 1) {
            return item.en.substring(0, 1).touppercase() + item.en.substring(1);
          } else if (item.en && item.en.length == 1) {
            return item.en.touppercase();
          } else {
            return "--";
          }
        } else {
          return item.zh ? item.zh : "--";
        }
      } else {
        return "--";
      }
    },
    preyear() {
      this.year = this.year - 1;
    },
    nextyear() {
      this.year = this.year + 1;
    },
    nextmonth() {
      if (this.month == 12) {
        this.year = this.year + 1;
        this.month = 1;
      } else {
        this.month++;
      }
    },
    premonth() {
      if (this.month == 1) {
        this.year = this.year - 1;
        this.month = 12;
      } else {
        this.month--;
      }
    },
    getselectdate(time) {
      for (var i = 0; i < this.result.length; i++) {
        if (time == this.result[i]) {
          return true;
        }
      }
      return false;
    },
    showpicker(e) {
      this.$emit("update:is-show",true);
      var time = new date().gettime();
      this.year = new date(time).getfullyear();
      this.month = new date(time).getmonth() + 1;
      this.day = new date(time).getdate();
      this.selectdate = new date(
        new date(time).format("yyyy-mm-dd 00:00")
      ).gettime();
    },
    onconfirmdate(time) {
      this.onselectdate(time);
      this.confirmpicker();
    },
    closepicker() {
      this.$emit("update:is-show",false);
    },
    setnow() {
      this.year = new date().getfullyear();
      this.month = new date().getmonth() + 1;
      this.day = new date().getdate();
      this.selectdate = new date(
        new date().format("yyyy-mm-dd 00:00")
      ).gettime();
    },
    confirmpicker() {
      this.$emit("update:date", new date(this.selectdate).format("yyyy-mm-dd"));
      this.$emit(
        "picker-result",
        new date(this.selectdate + this.selecthour * 3600000).format(
          "yyyy-mm-dd hh:00"
        )
      );
      this.closepicker();
    },
    getmonthday() {
      var monthfirst = new date(this.year + "-" + this.month + "-01 00:00");
      var w = monthfirst.getday();

      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);
      }
    },
    onselectdate(time) {
      this.selectdate = time;
      this.year = new date(time).getfullyear();
      this.month = new date(time).getmonth() + 1;
      this.day = new date(time).getdate();
      var tag = true;
      //已选择就取消选择
      for (var i = 0; i < this.result.length; i++) {
        if (this.result[i] == time) {
          tag = false;
          this.result.splice(i, 1);
          break;
        }
      }
      //未选择就添加日期
      if (tag) {
        this.result.push(time);
        this.result = this.result.sort(function(a, b) {
          return a - b;
        });
      }
      var list = [];
      for (var i = 0; i < this.result.length; i++) {
        if (this.result[i] > 0) {
          list.push(new date(this.result[i]).format("yyyy-mm-dd"));
        }
      }
      if (list.length > 0) {
        this.$emit("update:date", list.join(",") + "(共" + list.length + "天)");
      } else {
        this.$emit("update:date", "");
      }

      this.$emit("picker-result", this.result);
    },
    onfullmonth() {
      this.$emit("update:date", this.year + "年" + this.month + "月份");
      this.$emit("picker-result", 30);
    },

    parsedate() {
      if (this.date) {
        var str = this.date;
        if (this.date.indexof("(") > 0) {
          str = this.date.substring(0, this.date.indexof("("));
        }
        if (str) {
          var list = str.split(",");
          var result = [];
          for (var i = 0; i < list.length; i++) {
            result.push(
              new date(
                new date(list[i]).format("yyyy-mm-dd 00:00:00")
              ).gettime()
            );
          }
          this.result = result;
        }
      }
    }
  },
  mounted() {
    this.getmonthday();
    this.parsedate();
  }
};
</script>
<style lang="scss" scoped>
</style>

日期时间选择器

<template>
  <div style="display:inline-block">
    <span @click="showpicker">{{getlangtext(label.datetimepicker)}}</span>
    <div class="date-picker-bg" v-show="isshow" @click="closepicker"></div>
    <div class="date-picker" v-show="isshow" style=" width: 260px;">
      <div class="picker-top">
        <span class="picker-arrow" @click="preyear">&lsaquo; &lsaquo;</span>
        <span class="picker-arrow" @click="premonth">&lsaquo;</span>
        <span class="date-text">{{year}}-{{month>9?month:"0"+month}}</span>
        <span class="picker-arrow" @click="nextmonth">&rsaquo;</span>
        <span class="picker-arrow" @click="nextyear">&rsaquo;&rsaquo;</span>
      </div>
      <div class="picker-content1">
        <table>
          <thead>
            <tr>
              <th v-for="(item,idx) in weeklist" :key="'week'+idx">{{getlangtext(item)}}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="idx in weeknum" :key="'weeknum'+idx">
              <td
                v-for="m in 7"
                :key="'monthday'+idx+'_'+m"
                :class="[new date(monthlist[idx-1][m-1]).getmonth()+1==month?'':'gray',selectdate==monthlist[idx-1][m-1]?'active':'']"
                @click="onselectdate(monthlist[idx-1][m-1])"
                @dblclick="onconfirmdate(monthlist[idx-1][m-1])"
              >{{new date(monthlist[idx-1][m-1]).getdate()}}</td>
            </tr>
          </tbody>
        </table>
        <ul class="hour-list">
          <li
            v-for="n in 24"
            :key="'hourlist'+n"
            @click="onselecthour(n-1)"
            :class="[selecthour==n-1?'active':'']"
            @dblclick="onconfirmhour(n-1)"
          >{{n-1}}:00</li>
        </ul>
      </div>
      <div class="picker-footer">
        <button @click="closepicker">{{getlangtext(label.close)}}</button>
        <button @click="setnow">{{getlangtext(label.today)}}</button>
        <!-- <button @click="confirmpicker">{{getlangtext(label.ok)}}</button> -->
      </div>
    </div>
  </div>
</template>
<script>
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;
};
export default {
  name: "datetimepicker",
  props: {
    langtype: {
      type: string,
      default: window.localstorage.getitem("langtype")
    },
    datetime: {
      type: string,
      default: new date().format("yyyy-mm-dd hh:00")
    },
     isshow:{
      type:boolean,
      default:false
    }
  },
  data: () => ({

    label: {
      ok: { zh: "确定", en: "ok" },
      close: { zh: "关闭", en: "close" },
      today: { zh: "现在", en: "now" },
      datetimepicker: { zh: "日期时间选择", en: "datetimepicker" }
    },
    weeklist: [
      { zh: "日", en: "sun" },
      { zh: "一", en: "mon" },
      { zh: "二", en: "tue" },
      { zh: "三", en: "wed" },
      { zh: "四", en: "thu" },
      { zh: "五", en: "fir" },
      { zh: "六", en: "sat" }
    ],
    year: new date().getfullyear(),
    month: new date().getmonth() + 1,
    day: new date().getdate(),

    startday: 0,
    endday: 0,
    weeknum: 0,
    selectdate: new date(new date().format("yyyy-mm-dd 00:00")).gettime(),
    monthlist: [],
    selecthour: new date().gethours()
  }),
  watch: {
    year() {
      this.getmonthday();
    },
    month() {
      this.getmonthday();
    }
  },
  methods: {
    getlangtext(item) {
      if (item) {
        if (this.langtype == "en") {
          if (item.en && item.en.length > 1) {
            return item.en.substring(0, 1).touppercase() + item.en.substring(1);
          } else if (item.en && item.en.length == 1) {
            return item.en.touppercase();
          } else {
            return "--";
          }
        } else {
          return item.zh ? item.zh : "--";
        }
      } else {
        return "--";
      }
    },
    preyear() {
      this.year = this.year - 1;
    },
    nextyear() {
      this.year = this.year + 1;
    },
    nextmonth() {
      if (this.month == 12) {
        this.year = this.year + 1;
        this.month = 1;
      } else {
        this.month++;
      }
    },
    premonth() {
      if (this.month == 1) {
        this.year = this.year - 1;
        this.month = 12;
      } else {
        this.month--;
      }
    },
    showpicker() {
      this.$emit("update:is-show",true);

      var time = new date(this.datetime).gettime();
      this.year = new date(time).getfullyear();
      this.month = new date(time).getmonth() + 1;
      this.day = new date(time).getdate();
      this.selectdate = new date(
        new date(time).format("yyyy-mm-dd 00:00")
      ).gettime();
      this.selecthour = new date(time).gethours();
    },
    onconfirmdate(time) {
      this.onselectdate(time);
      this.confirmpicker();
    },
    onconfirmhour(n) {
      this.onselecthour(n);
      this.confirmpicker();
    },
    closepicker() {
      this.$emit("update:is-show",false);
    },
    setnow() {
      this.year = new date().getfullyear();
      this.month = new date().getmonth() + 1;
      this.day = new date().getdate();
      this.selectdate = new date(
        new date().format("yyyy-mm-dd 00:00")
      ).gettime();
      this.selecthour = new date().gethours();
    },
    confirmpicker() {
      this.$emit(
        "update:datetime",
        new date(this.selectdate + this.selecthour * 3600000).format(
          "yyyy-mm-dd hh:00"
        )
      );
      this.$emit(
        "picker-result",
        new date(this.selectdate + this.selecthour * 3600000).format(
          "yyyy-mm-dd hh:00"
        )
      );
      this.closepicker();
    },
    getmonthday() {
      var monthfirst = new date(this.year + "-" + this.month + "-01 00:00");
      var w = monthfirst.getday();

      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);
      }
    },
    onselecthour(n) {
      this.selecthour = n;
      this.$emit(
        "update:datetime",
        new date(this.selectdate + this.selecthour * 3600000).format(
          "yyyy-mm-dd hh:00"
        )
      );
    },
    onselectdate(time) {
      this.selectdate = time;
      this.year = new date(time).getfullyear();
      this.month = new date(time).getmonth() + 1;
      this.day = new date(time).getdate();
      this.$emit(
        "update:datetime",
        new date(time + this.selecthour * 3600000).format("yyyy-mm-dd hh:00")
      );
    }
  },
  mounted() {
    this.getmonthday();
  }
};
</script>
<style lang="scss" scoped>
</style>

使用picker

<template>
<section style="padding:16px;">
  <p>date1:{{date1}}</p>
  <date-picker :date.sync="date1" :is-show.sync="showdate1"></date-picker>
   <p>date2:{{date2}}</p>
    <date-picker1 :date.sync="date2" :is-show.sync="showdate2"></date-picker1>
     <p>date3:{{date3}}</p>
    <datetime-picker :datetime.sync="date3" :is-show.sync="showdate3"></datetime-picker>
</section>
</template>

<script>
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;
}
import datetimepicker from "./datetimepicker";
import datepicker from "./datepicker";
import datepicker1 from "./datepicker1";
export default {
name:"pickertest",
components:{
  'date-picker':datepicker,
  'datetime-picker':datetimepicker,
  'date-picker1':datepicker1
},
data:()=>({
  showdate1:false,
  showdate2:false,
  showdate3:false,
  date1:new date().format("yyyy-mm-dd"),
  date2:new date().format("yyyy-mm-dd"),
  date3:new date().format("yyyy-mm-dd hh:mm:ss"),
})
}
</script>

<style>

</style>

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