//类似于这种样式的
请添加图片描述
//本来打算用vant自带的时间选择器糊上就行了 但是ui图是这种 那来吧/*微笑*/
//1.图中是三列 那咱就得准备三列数据(默认选择时间范围是 今天 + 往后十天 )
//.wxml文件 (我的确认实际上是取消 自带的文字换了 再绑定好事件就行 样式自己看着调就行)
<van-popup lock-scroll="{{true}}" round show="{{ show }}" position="bottom" custom-style="height: 516rpx">
<van-picker ref="picker" visible-item-count="3" show-toolbar confirm-button-text="×" title="请选择出发时间"
columns="{{columnsDate}}" bind:change="onChangeDate" bind:confirm="onConfirmDate"></van-picker>
<view class="date_text">
<van-button round bind:click="confirmchooseTime" type="primary"
color="linear-gradient(to right, #259EFE, #007BDC)" block>
确认</van-button>
</view>
</van-popup>
//页面json文件记得引入 或者app.json统一引入
//重点来了 页面.js文件
const $api = require('../../utils/api.js') //引入封装好的请求接口
const { FormatAll} = require('../../utils/format') //引入封装好的格式化时间的方法
Page({
data: {
FormatAllDatechange: "",
FormatAllDate: FormatAll(new Date().getTime()),
columnsDate: [],//存储三列数据的数组
show:false//弹框的显示隐藏
},
onLoad() {},
// 打开弹框
pickTime() {
this.setData({
show: true
})
let date = this.getcolumnsDate()
this.setData({
columnsDate: date
})
},
getcolumnsDate() {
//当前日期
let arrdate = this.getchooseDay(11)// 先将 10天时间组成数组
this.setData({ // 先将含有年份的时间数组存起来 下面会用到
arrdate: arrdate
})
let arr = arrdate.map(it => {
return this.dateFormat(it) // 将十天的数组 item 加 周几
})
// 今天不显示周几 显示今天
arr[0] = arr[0].toString().replace(arr[0].toString().split("/")[2], "今天")
//当天剩余小时
let arrhour = this.hourFormat()
let currenthour = []
for (var i = arrhour; i < 24; i++) {
currenthour.push(i > 9 ? (i.toString() + "时") : '0' + i + "时")
}
//当天剩余分钟
let minute = this.minuteFormat()
let currentminute = []
for (var i = minute; i < 60; i++) {
currentminute.push(i > 9 ? (i.toString() + "分") : '0' + i + "分")
}
let columnsDate = [{
values: arr,
className: 'column1'
},
{
values: currenthour,
className: 'column2'
},
{
values: currentminute,
className: 'column2'
}
]
return columnsDate
},
getchooseDay(dayNum) {
var day = new Date();
var dateArr = []
for (var i = 0; i < dayNum; i++) {
var newDate = new Date(new Date().getTime() + i * 1000 * 60 * 60 * 24)
var year = newDate.getFullYear()
var month = (parseInt(newDate.getMonth()) + 1) > 9 ? (parseInt(newDate.getMonth()) + 1) : "0" + (parseInt(newDate.getMonth()) + 1)
var day = (newDate.getDate()) > 9 ? newDate.getDate() : "0" + newDate.getDate()
var fullDate = `${year}-${month}-${day}`
dateArr.push(fullDate)
}
return dateArr;
},
//获取几月几号星期几
dateFormat(value) {
let d = new Date(value);
let month = d.getMonth() > 8 ? d.getMonth() + 1 : '0' + (d.getMonth() + 1)
let date = month + '/' + d.getDate() + '/' + this.getdaytext(d.getDay())
let time = date
return time;
},
//获取小时
hourFormat() {
let d = new Date()
let hour = d.getHours()
return hour
},
//获取分钟
minuteFormat() {
let d = new Date()
let minute = d.getMinutes()
return minute
},
//获取星期
getdaytext(weekNum) {
let week = "";
switch (weekNum) {
case 0:
week = "周日";
break;
case 1:
week = "周一";
break;
case 2:
week = "周二";
break;
case 3:
week = "周三";
break;
case 4:
week = "周四";
break;
case 5:
week = "周五";
break;
case 6:
week = "周六";
break;
}
return week;
},
//绑定事件 改变赋值
onChangeDate(event) {
const { picker,value} = event.detail; //将需要的值解构出来
let currentyear = this.data.arrdate[this.data.arrdate.length - 1].split("-")[0]
// currentyear 这一步是将年份加上以便判断 如果上面第一列加了年份 就不用这一步
let currentmonth = value[0].split("/")[0]
let currentday = value[0].split("/")[1]
let currenthour = value[1].replace("时", "") //获取 月份 天 小时 也是为了判断下一级如何变化
let d = new Date();
var year = d.getFullYear()
let month = d.getMonth() > 8 ? d.getMonth() + 1 : '0' + (d.getMonth() + 1)
var date = d.getDate() >= 10 ? new Date().getDate() : '0' + new Date().getDate()
let hour = d.getHours()
let currenttimedate = currentday > date ? currentday : date
if (currentyear > year || currentmonth > month || currentday > date) {
// 如果选的不是今天并且 年份 || 月份 || 天 都大于今天 那就要 时 分 分别为 0-23 0-59
let hourarr = []
for (var i = 0; i < 24; i++) {
hourarr.push(i > 9 ? (i.toString() + "时") : '0' + i + "时")
}
let minarr = []
for (var i = 0; i < 60; i++) {
minarr.push(i > 9 ? i.toString() + "分" : '0' + i + "分")
}
** 重点 !!!!!!!!!!!!!!!!!!!!**
picker.setColumnValues(1, hourarr); //设置 columnsDate 索引为 1 (第二列)的数组对象
picker.setColumnValues(2, minarr); //设置 columnsDate 索引为 2 (第三列)的数组对象
** 重点 !!!!!!!!!!!!!!!!!!!!**
} else if (currenthour > hour) {
// 当选择的小时大于现在的小时 也该设置选择分钟为 0-59
let minarr = []
for (var i = 0; i < 60; i++) {
minarr.push(i > 9 ? i.toString() + "分" : '0' + i + "分")
}
** 重点 !!!!!!!!!!!!!!!!!!!!**
picker.setColumnValues(2, minarr);
** 重点 !!!!!!!!!!!!!!!!!!!!**
} else {
// 其它情况就是 选择今天 就写剩余的小时和分钟
let currenthour = []
for (var i = new Date().getHours(); i < 24; i++) {
currenthour.push(i > 9 ? i.toString() + "时" : '0' + i + "时")
}
let currentmin = []
for (var i = new Date().getMinutes(); i < 60; i++) {
currentmin.push(i > 9 ? i.toString() + "分" : '0' + i + "分")
}
** 重点 !!!!!!!!!!!!!!!!!!!!**
picker.setColumnValues(1, currenthour); //设置 columnsDate 索引为 1 (第二列)的数组对象
picker.setColumnValues(2, currentmin); //设置 columnsDate 索引为 2 (第三列)的数组对象
** 重点 !!!!!!!!!!!!!!!!!!!!**
}
// 重点!!!!!!!!!!!!!!!!!!!!!!!!!!!!如下 currentminhou
let currentminhou = year + '/' + month + '/' + currenttimedate
+ ' ' + picker.getValues()[1].replace("时", "") +
+ ":" + picker.getValues()[2].replace("分", "")
console.log(currentminhou) // 这一步非常重要 issue上 有人提过 开始以为是bug
// 就是 改变第一个列的数据 第二列 第三列拿到的数据不对 拿到的是上一次改变的值
// 其实不是bug 这个组件就是 返回上一次 选中的值 要想获取实时改变的值 就要用到官方组件给出的方法
// 使用 picker.getValues() 代替 change 自带的 value 参数 value参数只有用户自己去滑动改变才能获取正确的值
this.setData({
FormatAllDatechange: currentminhou
})
},
//确认选择时间
confirmchooseTime() {
if (!this.data.FormatAllDatechange) {
// 没有选中时间 也得给个默认值
this.setData({
show: false,
FormatAllDate: FormatAll(new Date().getTime())
})
} else {
// 有选中值就得 赋值 currentminhou
this.setData({
show: false,
FormatAllDate: this.data.FormatAllDatechange
})
}
},
//取消选择时间 要给个默认时间
onConfirmDate(e) {
this.setData({
show: false,
FormatAllDate: FormatAll(new Date().getTime())
})
},
})
其实并不难 ,但是觉得很麻烦 很多要避的坑;
总结:
- 不显示取消按钮 定位到取消按钮 直接display : none、将确认文字改成 " ×" 并绑定函数
- column 数组肯定要重组 三列就写 三个数组对象
- 第一列整好 再去设置第二三列 setColumnValues( column的index索引, 你要赋予第几列的值 )
4. 不能直接使用change函数自带的参数获取当前选中的值 要用 picker.getValues() 代替 (重 点!)