封装 类似企业微信(含周) 时间选择器 目前微信小程序可用

1.项目until文件建立 time.js

//设置周下拉框
export function setweekOption(year) { //传入年份,字符串类型年份,'2022'
  year = new Date(year).getFullYear()
  let days = [...getDay((year - 1 || new Date().getFullYear()), 'other'), ...getDay(year || new Date().getFullYear()), ...getDay((year + 1 || new Date().getFullYear()), 'other')]
  return days;
}
export function getDay(year, type = 'on') {
  let dates = [];
  const data = new Date()
  // i 月 j日
  for (let i = 1; i <= 12; i++) {
    for (let j = 1; j <= new Date(year, i, 0).getDate(); j++) {
      if (year == data.getFullYear() && i == data.getMonth() + 1 && j == data.getDate()) {
        console.log(year, i, j, '---');
        const week = new Date([year, formatNumber(i), formatNumber(j)].join('-')).getDay()
        dates.push((type != 'on' ? year + '年' : '') + i + '月' + j + '日 ' + '今天')
      } else {
        const week = new Date([year, formatNumber(i), formatNumber(j)].join('-')).getDay()
        dates.push((type != 'on' ? year + '年' : '') + i + '月' + j + '日 ' + dealWeek(week)) //返回当年所有日期（带周数）
      }

    }
  }
  return dates;
}
// 处理周  week 索引
export function dealWeek(week) {
  let weekList = ['周日', '周一', '周二', '周三', '周四', '周五', '周六', ]
  return weekList[week]
}
export function formatNumber(n) {
  return n.toString().length > 1 ? n : '0' + n
}

export function formatDate() {
  const date = new Date()
  const dateYearOnDate = (date.getMonth() + 1) + '月' + date.getDate() + '日'
  const dateHour = formatNumber(date.getHours())
  const dateMin = formatNumber(date.getMinutes())
  return [dateYearOnDate, dateHour, dateMin]
}

export function getDateIndex(arr, value, type = null) {
  let indexOn = ''
  if (type) {
    arr.forEach((item, index) => {
      if (item.split(' ')[0] == value) {
        return indexOn = index
      }
    })
  } else {
    arr.forEach((item, index) => {
      if (item == value) {
        return indexOn = index
      }
    })
  }
  return indexOn
}

// 生成 小时 和分钟
export function setNumber(value) {
  return Array.from({
    length: value
  }, (_, i) => formatNumber(i))
}

/**
 * 2022-08-31 17:25 <=> 2022年8月31日 周三
 * @param {*} date 2022-08-31 17:25
 * @param {*} type true/左转右 false/右转左
 * return true/Array ['2021年1月1日 周五',17,25]
 * retrun false/String 2022-8-31
 */

export function FormatConversion(date, type = true) {
  let year = null
  let month = null
  let dateOn = null
  const data = new Date()
  if (type) {
    // date.indexOf('年')!=-1? date.slice(0, 4) +'年':''
    let newHour = null
    let newMin = null
    if (date.length >= 16) {
      year = date.slice(0, 4)
      month = date.slice(5, 7)
      dateOn = date.slice(8, 10)

      newHour = date.slice(11, 13)
      newMin = date.slice(14, 16)
    } else {
      year = new Date().getFullYear()
      month = date.slice(0, 2)
      dateOn = date.slice(3, 5)
      newHour = date.slice(6, 8)
      newMin = date.slice(9, 11)
    }

    console.log(year == new Date().getFullYear(), 'year');
    const week = new Date([year, month, dateOn]).getDay();

    let newYear = null
    if (year == data.getFullYear() && Number(month) == data.getMonth() + 1 && Number(dateOn) == data.getDate()) {
      newYear = ((year != new Date().getFullYear()) ? year + '年' : '') + Number(month) + '月' + Number(dateOn) + '日 ' + '今天'
    } else {
      newYear = ((year != new Date().getFullYear()) ? year + '年' : '') + Number(month) + '月' + Number(dateOn) + '日 ' + dealWeek(week)
    }
    return [newYear, newHour, newMin]
  } else {
    if (date.indexOf('年') != -1) {
      year = date.slice(0, 4)
    } else {
      year = new Date().getFullYear()
    }
    month = date.slice(date.indexOf('年') + 1, date.indexOf('月'))
    dateOn = date.slice(date.indexOf('月') + 1, date.indexOf('日'))
    const newTime = [year, formatNumber(month), formatNumber(dateOn)].join('-')
    return newTime
  }
}

2.页面引入

import {setweekOption,formatDate,getDateIndex,setNumber,FormatConversion} from '../until/time'
Page({
  data: {
    date:null,
    multiArray: [],
    multiIndex: [0, 0, 0],
  },
  onLoad(){
    const dateList= setweekOption('2022')
    // 绑定弹窗数据
    this.setData({
      'multiArray':[setweekOption('2022'),setNumber(24),setNumber(60)],
      'multiIndex':[getDateIndex(dateList,formatDate()[0],'deal'),Number(formatDate()[1]),Number(formatDate()[2])],
    })

    const dataFrom='2022-08-31 17:24'

    // 初始赋值
    this.setData({
      date:dataFrom
    })
    this.changeDate(dataFrom)
 
  },
  changeDate(e){
    this.setData({
      'multiIndex':[getDateIndex(this.data.multiArray[0],FormatConversion(e)[0]),Number(formatDate()[1]),Number(formatDate()[2])],
    })
  },
  bindMultiPickerChange: function (e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    const date=FormatConversion(this.data.multiArray[0][this.data.multiIndex[0]],false)+' '+this.data.multiArray[1][this.data.multiIndex[1]]+":"+this.data.multiArray[2][this.data.multiIndex[2]]
    this.setData({
      multiIndex: e.detail.value,
      date
    })
   
    this.data.date=date

    console.log(this.data.date,1111);
  },
  bindMultiPickerColumnChange: function (e) {
    console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
    var data = {
      multiArray: this.data.multiArray,
      multiIndex: this.data.multiIndex
    };
    data.multiIndex[e.detail.column] = e.detail.value;
    // const dataYear=multiArray[0][multiIndex[0]]
    this.setData(data);
  },

  

})

3.页面操作

<view class="section">
  <view class="section__title">多列选择器</view>
  <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
    <view class="picker">
      当前选择：{{date}}
    </view>
  </picker>
</view>

4.图片效果 开发工具效果

手机显示效果

5.git 地址 gitee.com/mr_peng_mis…