mpvue开发微信小程序之时间+日期选择器

最近在做微信小程序，技术栈为mpvue+iview weapp组件库。

因项目需求，要用到日期+时间选择器，iview组件库目前还未提供时间日期选择器的组件，小程序官方组件日期时间也是分开的，在简书上看到一位老哥用小程序官方的多列选择器在小程序上实现了日期+时间选择。

于是借鉴老哥的代码，换成了vue的写法，简单粗暴，用mpvue的小伙伴可以了解一下。闰年平年等细节问题有精力的小伙伴自己去搞。

<template>
  <div>
    <picker mode="multiSelector" @change="bindMultiPickerChange" :value="multiIndex" :range="newMultiArray">
      <span>当前时间：{{time}}</span>
    </picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      time: "",
      multiArray: [],
      multiIndex: [0, 0, 0, 0, 0]
    };
  },
  computed: {
    newMultiArray: () => {
      let array = [];
      const date = new Date();
      const years = [];
      const months = [];
      const days = [];
      const hours = [];
      const minutes = [];

      for (let i = 2018; i <= date.getFullYear() + 10; i++) {
        years.push("" + i);
      }
      array.push(years);

      for (let i = 1; i <= 12; i++) {
        if (i < 10) {
          i = "0" + i;
        }
        months.push("" + i);
      }
      array.push(months);

      for (let i = 1; i <= 31; i++) {
        if (i < 10) {
          i = "0" + i;
        }
        days.push("" + i);
      }
      array.push(days);

      for (let i = 0; i < 24; i++) {
        if (i < 10) {
          i = "0" + i;
        }
        hours.push("" + i);
      }
      array.push(hours);

      for (let i = 0; i < 60; i++) {
        if (i < 10) {
          i = "0" + i;
        }
        minutes.push("" + i);
      }
      array.push(minutes);
      return array;
    }
  },
  methods: {
    //获取时间日期
    bindMultiPickerChange(e) {
      this.multiIndex = e.target.value;
      console.log("当前选择的时间", this.multiIndex);
      const index = this.multiIndex;
      const year = this.newMultiArray[0][index[0]];
      const month = this.newMultiArray[1][index[1]];
      const day = this.newMultiArray[2][index[2]];
      const hour = this.newMultiArray[3][index[3]];
      const minute = this.newMultiArray[4][index[4]];
      this.time = year + "-" + month + "-" + day + " " + hour + ":" + minute;
    }
  }
};
</script>

<style lang="less" scoped>
</style>

原文链接：微信小程序之picker选择器实现时间日期的选择

这里有324.57GB的修仙资料。嘿嘿嘿你懂得。/手动狗头


那么问题来了，如果你也想入坑前端或者学习更多技术，广交天下朋友(基友)，认识更多有趣的灵魂的话，欢迎加入前端交流群鸭~

扫二维码加为好友就完事了！安排~