方法一：时分秒选择
wxss文件
<picker mode="multiSelector" data-type="时间始" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
<input value='{{time}}' placeholder='选择时间'/>
</picker>
js文件
const date = new Date();
const years = [];
const months = [];
const days = [];
const hours = [];
const minutes = [];
//获取年
for (let i = 2018; i <= date.getFullYear() + 5; i++) {
years.push("" + i);
}
//获取月份
for (let i = 1; i <= 12; i++) {
if (i < 10) {
i = "0" + i;
}
months.push("" + i);
}
//获取日期
for (let i = 1; i <= 31; i++) {
if (i < 10) {
i = "0" + i;
}
days.push("" + i);
}
//获取小时
for (let i = 0; i < 24; i++) {
if (i < 10) {
i = "0" + i;
}
hours.push("" + i);
}
//获取分钟
for (let i = 0; i < 60; i++) {
if (i < 10) {
i = "0" + i;
}
minutes.push("" + i);
}
Page({
data: {
// 选中时间
time: '',
multiArray: [years, months, days, hours, minutes],
multiIndex: [0, 9, 16, 10, 17],
choose_year: '',
// 选中时间段的
}，
onLoad: function (options) {
console.log('导购的名字',options)
let that = this;
let user = wx.getStorageSync('user');
// 选择时间的编辑方法start
this.setData({
choose_year: this.data.multiArray[0][0]
})
}
// 选择时间的编辑方法end
// 选择时间的编辑方法start
//获取时间日期
bindMultiPickerChange: function(e) {
console.log('picker发送选择改变，携带值为', e)
this.setData({
multiIndex: e.detail.value
})
const index = this.data.multiIndex;
const year = this.data.multiArray[0][index[0]];
const month = this.data.multiArray[1][index[1]];
const day = this.data.multiArray[2][index[2]];
const hour = this.data.multiArray[3][index[3]];
const minute = this.data.multiArray[4][index[4]];
// console.log(`${year}-${month}-${day}-${hour}-${minute}`);
this.setData({
time: year + '-' + month + '-' + day + ' ' + hour + ':' + minute
})
// console.log(this.data.time);
},
//监听picker的滚动事件
bindMultiPickerColumnChange: function(e) {
//获取年份
if (e.detail.column == 0) {
let choose_year = this.data.multiArray[e.detail.column][e.detail.value];
console.log(choose_year);
this.setData({
choose_year
})
}
//console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
if (e.detail.column == 1) {
let num = parseInt(this.data.multiArray[e.detail.column][e.detail.value]);
let temp = [];
if (num == 1 || num == 3 || num == 5 || num == 7 || num == 8 || num == 10 || num == 12) { //判断31天的月份
for (let i = 1; i <= 31; i++) {
if (i < 10) {
i = "0" + i;
}
temp.push("" + i);
}
this.setData({
['multiArray[2]']: temp
});
} else if (num == 4 || num == 6 || num == 9 || num == 11) { //判断30天的月份
for (let i = 1; i <= 30; i++) {
if (i < 10) {
i = "0" + i;
}
temp.push("" + i);
}
this.setData({
['multiArray[2]']: temp
});
} else if (num == 2) { //判断2月份天数
let year = parseInt(this.data.choose_year);
console.log(year);
if (((year % 400 == 0) || (year % 100 != 0)) && (year % 4 == 0)) {
for (let i = 1; i <= 29; i++) {
if (i < 10) {
i = "0" + i;
}
temp.push("" + i);
}
this.setData({
['multiArray[2]']: temp
});
} else {
for (let i = 1; i <= 28; i++) {
if (i < 10) {
i = "0" + i;
}
temp.push("" + i);
}
this.setData({
['multiArray[2]']: temp
});
}
}
console.log(this.data.multiArray[2]);
}
var data = {
multiArray: this.data.multiArray,
multiIndex: this.data.multiIndex
};
data.multiIndex[e.detail.column] = e.detail.value;
this.setData(data);
},
// 选择时间的编辑方法end
```
方式二：时间段选择 （组件化）
wx.js文件▼↓
Component({
/**
* 组件的属性列表
*/
properties: {
range: { //可预约的日期范围。默认日期从今天开始，到第range天后为止，这里设为10天
type: Number,
value:15
},
start_time: { //开始时间，设为整点
type: Number,
value: 8
},
step: { //预约时间的步长，设置为30，表示30分钟
type: Number
},
end_time: { //结束时间，设为整点
type: Number,
value: 22
}
},
/**
* 组件的初始数据
*/
data: {
isShow: false,
selectDate: "",
dialogh: 0,
//日期列表和时间列表
date_list: [],
time_list: []
},
attached: function () {
let start_day = this.ts_string(new Date().getTime());
console.log(start_day); //2021-08-31
console.log(new Date());
let end_day = this.ts_string(new Date().setDate(new Date().getDate() + this.properties.range))
//获取日期列表
let date_list = this.getDiffDate(start_day, end_day);
//获取时间列表
let time_list = this.getTimeList(this.properties.start_time, this.properties.end_time, this.properties.step);
console.log(time_list);
this.setData({
// date_time: [date_column, time_column],
date_list: date_list,
time_list: time_list,
})
//动画
this.animation = wx.createAnimation({
duration: 300
})
//500rpx转成px
let dialoghpx = 800 / 750 * wx.getSystemInfoSync().windowWidth
this.setData({
dialogh: dialoghpx,
selectDate: this.data.date_list[0] + this.data.time_list[0]
})
},
methods: {
getDiffDate(start, end) {
let startTime = new Date(start);
let endTime = new Date(end);
let dateArr = [];
while ((endTime.getTime() - startTime.getTime()) >= 0) {
dateArr.push(this.ts_string(startTime.getTime()));
startTime.setDate(startTime.getDate() + 1);
}
return dateArr;
},
zfill(num, length) {
return (Array(length).join('0') + num).slice(-length);
},
//把日期转换成xxxx-xx-xx的形式
ts_string(timestamp) {
let d = new Date(timestamp);
let day = "";
switch (d.getDay()) {
case 1:
day = "周一";
break;
case 2:
day = "周二";
break;
case 3:
day = "周三";
break;
case 4:
day = "周四";
break;
case 5:
day = "周五";
break;
case 6:
day = "周六";
break;
case 0:
day = "周日";
break;
}
let string = (d.getFullYear()) + "-" +
this.zfill((d.getMonth() + 1), 2) + "-" +
this.zfill((d.getDate()), 2) + " (" + day + ")"
return string
},
//获取时间区间列表，输入(起始时间，结束时间，步长)
getTimeList(start, end, step) {
let start_time = new Date();
//设置起始时间
start_time.setHours(start, 0, 0);
console.log(start_time);
//设置结束时间
let end_time = new Date();
end_time.setHours(end, 0, 0);
let startG = start_time.getTime(); //起始时间的格林时间
let endG = end_time.getTime(); //起始时间的格林时间
let step_ms = step * 60 * 1000;
let timeArr = [];
while (startG < endG) {
let time = this.timeAdd(startG, step_ms);
timeArr.push(time);
startG += step_ms;
}
return timeArr;
},
timeAdd(time1, add) {
var nd = new Date(time1); //创建时间对象
//获取起始时间的时分秒
var hh1 = nd.getHours();
var mm1 = nd.getMinutes();
if (hh1 <= 9) hh1 = "0" + hh1;
if (mm1 <= 9) mm1 = "0" + mm1;
nd = nd.valueOf(); //转换为毫秒数
nd = nd + Number(add);
nd = new Date(nd);
var hh2 = nd.getHours();
var mm2 = nd.getMinutes();
if (hh2 <= 9) hh2 = "0" + hh2;
if (mm2 <= 9) mm2 = "0" + mm2;
var time = hh1 + ":" + mm1 + "-" + hh2 + ":" + mm2;
return time; //时间段
},
change: function (e) {
const val = e.detail.value;
//val[0]表示选择的第一列序号，val[1]表示选择的第二列序号
let select = this.data.date_list[val[0]] + this.data.time_list[val[1]]
console.log(select);
this.setData({
selectDate: select
})
},
showDialog() {
this.setData({
isShow: true
})
//先向下移动dialog高度，然后恢复原位从而形成从下向上弹出效果
this.animation.translateY(this.data.dialogh).translateY(0).step()
this.setData({
animation: this.animation.export()
})
},
dimsss() {
//从原位向下移动dailog高度，形成从上向下的收起效果
this.animation.translateY(this.data.dialogh).step()
this.setData({
animation: this.animation.export()
})
//动画结束后蒙层消失
setTimeout(() => {
this.setData({
isShow: false
})
}, 300)
},
cancel() {
this.triggerEvent("cancel")
this.dimsss()
},
confirm() {
this.triggerEvent("confirm", {
selectDate: this.data.selectDate
})
this.dimsss()
}
}
})
wx.json文件▼↓
{
"component": true,
"usingComponents": {
}
}
wx.wxml文件▼↓
<view class="maskst" wx:if="{{isShow}}" catchtap="cancel">
<view class="content" style="height:350px" animation="{{animation}}">
<view class="top">
<view class="top-text top-left-color" hover-class="top-left-color-hover" catchtap="cancel">取消</view>
<view class="top-text top-right-color" hover-class="top-right-color-hover" catchtap="confirm">确定</view>
</view>
<picker-view style="width: 100%; height: 80%;" value="{{value}}" bindchange="change" catchtap="no">
<picker-view-column>
<view wx:for="{{date_list}}" wx:key="date_list" class="item">{{item}}</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{time_list}}" wx:key="time_list" class="item">{{item}}</view>
</picker-view-column>
</picker-view>
</view>
</view>
wx.wxss文件▼↓
.maskst {
position: fixed;
width: 100%;
height: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: flex;
background-color: rgba(0, 0, 0, 0.7);
z-index: 9999;
flex-direction: column;
justify-content: flex-end;
}
.content {
display: flex;
flex-direction: column;
width: 100%;
background: white;
border-top-right-radius: 20rpx;
border-top-left-radius: 20rpx;
}
.top {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 100rpx;
border-bottom: 1rpx solid #d3cfcf;
}
.top-text {
font-size: 30rpx;
width: 150rpx;
height: 100rpx;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.top-left-color {
color: #878787;
}
.top-left-color-hover {
color: #f1eaea;
}
.top-right-color {
color: #cb2d3e;
}
.top-right-color-hover {
color: #82ccf3;
}
.item {
width: 100%;
align-items: center;
justify-content: center;
display: flex;
flex-direction: row;
font-size: 18px;
}
父页面使用方法 ▼↓
（放大页面wxml 最后一行，否则可能没有效果）
xl文件▼↓
<date-picker id="pickerfrom" class="picker" range="30" step="30" bindconfirm="confirm"></date-picker>
js文件▼↓（onload的id要与这个一致）
Page({
data: {
// 选择时间段
selectDate: "",
machineShow: false,
},
onLoad: function (options) {
let that = this;
this.pickerfrom = this.selectComponent("#pickerfrom") //此处id与<data-pickerd>的id=pickerfrom 一致才调用
// 选择时间段
},
timeOpen() {
this.pickerfrom.showDialog();
},
confirm(e) {
this.setData({
selectDate: e.detail.selectDate
})
},
})
父页json文件已融入
{
"usingComponents": {
"date-picker": "../../packages/timechoose/index"
},
}
290
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
