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

版权声明：本文为博主原创文章，未经博主允许不得转载。除非支付宝搜索 7212127 领个红包再转载。 https://blog.csdn.net/twodogya/article/details/82791519

最近在做微信小程序，技术栈为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选择器实现时间日期的选择

贴个征婚启事呀~~~

受朋友之托。
女，程序员，22岁，未婚，身高167cm，体重48KG，山东青岛。
目前在阿里巴巴工作，负责支付宝相关业务，工号  7212127  支付宝搜索工号可见照片和个人信息呢。
漂亮大方，爱好读书、健身、游泳、吃鸡。
青岛有房一套，有车。
父母退休，家庭不拜金、人务实，一直没有合适的男朋友。
她本人要求不高，只要对她真心好就行。