看上面的效果图，用官方的日期，时间组件合并用，肯定不行的，但官方picker有个mode，叫multiSelector，官方的解释是

mode为 selector 或 multiSelector 时，range 有效。二维数组，长度表示多少列，数组的每项表示每列的数据，如[[“a”,“b”], [“c”,“d”]]

这数组可以自定义的，听起来跟上面的效果图需求蛮符合的，但数组怎么自定义的，这就需要js来实现的，我已经写成一个日期组件的库。

<view class="section">
  <view class="section__title" style="margin-bottom:0;">时间：</view>
  <picker mode="multiSelector" range="{{dateArray}}" value="{{dateIndex}}" bindchange="datePickerChange">
  <view class="section-val">{{dateVal}}</view>
  </picker>
</view>

Tip：dateIndex是选择了 range 对应项中的第几个（下标从 0 开始），与其他的普通组件，日期组件，时间组件不一样

js 先导入日期组件的js，然后加载时，就把日期组件的对象分别赋值给range和value的值，默认值是当前的时间，目前不支持传入要选择的时间（后面会考虑增加），其中的month和day是用日期组件的库里获取的

import { DatePicker } from '../utils/datePicker';
const params={
  dateArr:['今天','明天','后天']
}
const datePicker = new DatePicker(params);
const dateArr = datePicker.datePicker();

Page({
  data: {
    dateArray: null,//picker-rang的值
    dateIndex:null,//picker-value的值
    dateVal:null,//显示的时间
  },

  //加载时获取日期的组件
  onLoad(){
    this.set_date();
  },

  //监听点击日期组件的事件变化
  datePickerChange(e){
    let dateIndex=e.detail.value;
    this.setData({
      dateIndex,
      dateVal: datePicker.toDate(dateArr.dateAll,dateIndex),
    })
  },

  //赋值
  set_date(){
    
    this.setData({
      dateArray: dateArr.dateAll,
      dateIndex: dateArr.currentDateArr,
      dateVal: datePicker.toDate(dateArr.dateAll,dateArr.currentDateArr)
    })
    
  },
})

import { DatePicker } from ‘../utils/datePicker’;

const weekArr = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']; //一周的格式

export class DatePicker{
    constructor( obj ){
        this.date = new Date;
        this.year = this.date.getFullYear();
        this.month = this.date.getMonth() + 1;
        this.day = this.date.getDate();
        this.hours = this.date.getHours();
        this.minutes = this.date.getMinutes();
        this.week = this.date.getDay();
        this.dateArr = obj ? obj.dateArr || [] : [];
        this.defaultTime = obj ? obj.defaultTime || [] : [];
    }

    withZero( params ){
        return params < 10 ? '0' + params : ''+params;
    }

    /* 
     *月份的数组
     */
    getMonth( start, end ){
        let array = [];
        let weekIndex = -1;
        
        
        if ( this.dateArr.length>0 ){
            
            this.dateArr.forEach( (item,index)=>{
                array.push(`${item} ${weekArr[this.week+index]}`)
            })
            return array;
        } 
        
        for(let i = start; i <= end; i++){

            let days = this.getMonthDay(i);

            for(let j = 1; j <= days; j++){
                weekIndex = new Date(`${this.year}-${this.withZero(i)}-${this.withZero(j)}`).getDay();

                let str = '';

                if( i === this.month && j === this.day){
                    str = '今天';
                }else if( i === this.month && j === this.day + 1){
                    str = '明天';
                }else if( i === this.month && j === this.day + 2){
                    str = '后天';
                }else{
                    str = `${this.withZero(i)}月${this.withZero(j)}日`
                }

                array.push(`${str} ${weekArr[weekIndex]}`)
            }
        }    

        return array;
    }

    /* 
    数字循环
     */
    getLoopArray(start, end){
        let array = [];

        start = start || 0;
        end = end || 1;

        for( let i = start; i<=end ; i++){
            array.push(this.withZero(i));
        }

        return array;
    }

    /* 判断是不是闰年，或者30天/或者31天 */
    getMonthDay( month ){
        let flag = this.year % 400 == 0 || (this.year % 4 ==0 && this.year % 100 !=0);

        // let days = 0;

        switch (month) {

            case 1:
        
            case 3:
        
            case 5:
        
            case 7:
        
            case 8:
        
            case 10:
        
            case 12:
        
                return 31;
        
                break;
        
            case 4:
        
            case 6:
        
            case 9:
        
            case 11:
        
                return 30;
        
                break;
        
            case 2:
        
                return flag ? 29 : 28;
        
                break;
        
            default:
        
                return'月份格式不正确，请重新输入！'
        }

        // return days;
    }


    //获取当前时间
    getNowDate(){
        
        return [`今天 ${weekArr[this.week]}`,this.withZero(this.hours),this.withZero(this.minutes)];
    }

    datePicker(){
        let currentDateArr = [];
        let dateAll = [[],[],[]];

        let defaultDate = this.defaultTime.length>0 || this.getNowDate();
        

        dateAll[0] = this.getMonth(1, 12);//几月几日 星期几   
        dateAll[1] = this.getLoopArray(0, 23);//小时

        dateAll[2] = this.getLoopArray(0, 59);//分
        
        

        dateAll.find( (item,index) => {
            currentDateArr.push( item.indexOf( defaultDate[index] ));
        })
        
        

        return {
            dateAll,
            currentDateArr
        }
    }

    //转换成 Month月day日 HH:MM
    toDate(arrAll,currentDate){
        
        let tempDate = arrAll[0][currentDate[0]];
        let tempTime = `${arrAll[1][currentDate[1]]}:${arrAll[2][currentDate[2]]}`;
        // console.log(tempTime);
        
        if(tempDate.indexOf('今天') > -1){
            return `${ this.withZero(this.month) }月${ this.withZero(this.day) }日 ${tempTime}`;
        }else if(tempDate.indexOf('明天') > -1){
            return `${ this.withZero(this.month) }月${ this.withZero(this.day+1) }日 ${tempTime}`;
        }else if(tempDate.indexOf('后天') > -1){
            return `${ this.withZero(this.month) }月${ this.withZero(this.day+2) }日 ${tempTime}`
        }
        return `${tempDate} ${tempTime}`;
    }
}