【数组】两星期的日期时间段选择器
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})
}