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

本文优先于个人博客网站首发。如有更新不完整或不及时请打开如下网址访问。

求你了，点它！！！https://www.iiter.cn/blogs/23

 

 

 

 

 

 

 

 

 

 

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