阅读 24

微信小程序 自定义日期+时间组件

1. 组件代码

.wxml 代码

    <view>
        <picker
                mode="multiSelector" value="{{multiIndex}}"
                range="{{multiArray}}"
                bindchange="bindMultiPickerChange"
                bindcolumnchange="bindMultiPickerColumnChange">
            <view>
                {{dateTime}}
            </view>
        </picker>
    </view>
复制代码

.json 代码

{
  "component": true,
  "usingComponents": {}
}
复制代码

.js 代码


const yyyy_mm_dd_hh_mm_ss = 'yyyy-MM-dd HH:mm:ss';

const yyyy_mm_dd_hh_mm = 'yyyy-MM-dd HH:mm';

const yyyy_mm_dd_hh = 'yyyy-MM-dd HH';

const date = new Date();
const years = [];
const months = [];
let days = [];
const hours = [];
const minutes = [];
const multiArray = [];
const seconds = [];

for (let i = date.getFullYear(); i < date.getFullYear() + 3; i++) {
  years.push(i)
}

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

for (let i = 1; i <= new Date(date.getFullYear(), date.getMonth(), 0).getDate(); i++) {
  let day = i;
  if (i < 10) {
    day = '0' + i;
  }
  days.push(day);
}




multiArray.push(years);
multiArray.push(months);
multiArray.push(days);

Component({
  lifetimes: {
    // 在组件实例进入页面节点树时执行
    attached: function() {
      let thiz = this;
      thiz.formatShowTime(thiz.properties.format);
    }
  },
  properties: {
    format: {
      type: String,
      value: yyyy_mm_dd_hh_mm_ss
    }
  },

  data: {
    dateTime: multiArray[0][0] + '-' + multiArray[1][date.getMonth()] + '-' + multiArray[2][date.getDate() - 1],
    multiArray: multiArray,
    selectYear: '',
    selectMonth: '',
    multiIndex: [0, date.getMonth(), date.getDate() - 1],
  },

  methods: {
    bindMultiPickerChange(e) {
      let thiz = this;
      let value = e.detail.value;
      let dateTime = thiz.formatValue(value);
      thiz.setData({
        dateTime: dateTime
      })
      thiz.triggerEvent('pickerChange', dateTime)
    },

    bindMultiPickerColumnChange(e) {
      let thiz = this;
      // 改变年/月时, 根据年月获得对应月的天数
      thiz.getDayByYearMonth(e.detail.column, e.detail.value);
    },

    // 格式化显示时间
    formatShowTime(format) {
      let thiz = this;
      let multiIndex = [];
      if (format === yyyy_mm_dd_hh || format === yyyy_mm_dd_hh_mm || format === yyyy_mm_dd_hh_mm_ss) {
        // 时
        for (let i = 0; i <= 23; i++) {
          let hour = i;
          if (i < 10) {
            hour = '0' + i;
          }
          hours.push(hour)
        }
        multiArray.push(hours);
        multiIndex = [0, date.getMonth(), date.getDate() - 1, date.getHours()];
        if (format === yyyy_mm_dd_hh_mm || format === yyyy_mm_dd_hh_mm_ss) {
          // 分
          for (let i = 0; i <= 59; i++) {
            let minute = i;
            if (i < 10) {
              minute = '0' + i;
            }
            minutes.push(minute)
          }
          multiArray.push(minutes);
          multiIndex = [0, date.getMonth(), date.getDate() - 1, date.getHours(), date.getMinutes()]

          if (format === yyyy_mm_dd_hh_mm_ss) {
            // 秒
            for (let i = 0; i <= 59; i++) {
              let second = i;
              if (i < 10) {
                second = '0' + i;
              }
              seconds.push(second)
            }
            multiArray.push(seconds);
            multiIndex = [0, date.getMonth(), date.getDate() - 1, date.getHours(), date.getMinutes(), date.getSeconds()];
          }
        }

        thiz.setData({
          multiArray: multiArray,
          multiIndex: multiIndex
        })
      }
    },

    // 格式化选中的值
    formatValue(value) {
      let thiz = this;
      let dateTime = multiArray[0][value[0]] + '-' + multiArray[1][value[1]] + '-' + multiArray[2][value[2]];
      let format = thiz.properties.format;
      if (format === yyyy_mm_dd_hh  || format === yyyy_mm_dd_hh_mm || format === yyyy_mm_dd_hh_mm_ss) {
        dateTime +=  ' ' + multiArray[3][value[3]]

        if (format === yyyy_mm_dd_hh_mm || format === yyyy_mm_dd_hh_mm_ss) {
          dateTime += ':' + multiArray[4][value[4]]
        }

        if (format === yyyy_mm_dd_hh_mm_ss) {
          dateTime += ':' + multiArray[5][value[5]];
        }
      }
      return dateTime;
    },

    // 根据年月获得当前月的天数
    getDayByYearMonth(column, value) {
      let thiz = this;
      if (column === 0 || column === 1) {
        if (column === 0) {
          thiz.setData({
            selectYear: value
          })
        }
        if (column === 1) {
          thiz.setData({
            selectMonth: value
          })
        }

        days = [];
        for (let i = 1; i <= new Date(thiz.data.selectYear, thiz.data.selectMonth + 1, 0).getDate(); i++) {
          let day = i;
          if (i < 10) {
            day = '0' + i;
          }
          days.push(day);
        }
        multiArray.splice(2, 1, days);
        thiz.setData({
          multiArray: multiArray,
        });
      }
    }
  }
})
复制代码

2. 引用组件代码

.wxml 代码

<dateTime
    class=""
    bindpickerChange="pickerChange"
    format="yyyy-MM-dd HH:mm">
</dateTime>
复制代码
class加自己需要的样式

.json 代码

{
  "usingComponents": {
    "dateTime": "/components/dateTime/dateTime"
  }
}
复制代码

.js 代码

pickerChange(e) {
  this.setData({
      dateTime: e.detail
  })
},
复制代码
关注下面的标签,发现更多相似文章
评论