Array

【数组】两星期的日期时间段选择器

2020-07-27  本文已影响0人  Q小予o0

微信小程序原生picker 做一个两星期的时间段选择器,兼容年份的跨度

如下图

image.png

wxml 需要写个popup弹窗组件包着,做一层遮罩显示动画,

嵌入页面的滚动选择器picker。其中两个放置 [picker-view-column]组件,一个是左列日期,一个是右边时间段

                          w-popup.picker-pop(
                              position="bottom"
                                show="{{showPicker}}"
                                closeOnClickBackdrop="{{false}}"
                            )
                                view.picker-content
                                    view.picker-header
                                        view.pbtn.btn-cancel() 取消
                                        view.pbtn.btn-confirm() 确认
                                    picker-view(
                                        style="width: 100%; height: 250px;line-height:40px;text-align:left"
                                        bindchange="selectStore"
                                    )
                                        picker-view-column()
                                            view.pickey-date(
                                                wx:for="{{bookTimeDay}}"
                                                wx:key="index"
                                            )  {{item}}
                                        picker-view-column()
                                            view.pickey-hour(
                                                wx:for="{{bookTimeHour}}"
                                                wx:key="index"
                                            )  {{item}}

js初始化一个picker,取时间戳getTime()的方式兼容12月到1月的月份跨度

initPicker() {
    let bookTimeDay= []
    let bookTimeHour=[]
    let now = new Date(); 
    let nowTime = now.getTime() ; 
    let oneDayTime = 24*60*60*1000 ; 
    // 两星期内的日期数组
    for(let i = 0 ; i < 14 ; i++){
      let ShowTime = nowTime + (i+1)*oneDayTime ; 
      //初始化日期时间
      let myDate = new Date(ShowTime);  
      let month=myDate.getMonth()+1;  
      let date=myDate.getDate(); 
      let _date = `${month}月${date}日`
      if(i == now.getDate()) value[0]=i
      bookTimeDay.push(_date)
      // console.log(month+"月-"+date+'日',now.getDate())
    }
     // 两星期内的时间数组 hour
    for (let j =10; j <= 20; j++) {
      bookTimeHour.push(`${j}:00-${j}:30`)
      bookTimeHour.push(`${j}:30-${j+1}:00`)
    }
    this.setData({bookTimeDay,bookTimeHour})
  }
上一篇 下一篇

猜你喜欢

热点阅读