小程序直接提供的时间选择实例没有精确到秒的,需要我们自己去扩展使用 多行选择器,如下是精确到秒的时间选择效果图:
一、首先我需要用到 picker表单组件 多列选择器
多列选择器中5个属性设置对于我们用多列选择非常重要:
1.mode="multiSelector" //选择器类型mode 多列选择 multiSelector
2.range="{{dateTimeArray}}" //是一个保存有可供选择 年月日时分秒 的二维数组,具体表达如下:
[
['2019'"2020", "2021", "2022", "2023", "2024", "2025", "2026", "2027", "2028", "2029"],
["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"],
["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30"],
["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"],
["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59"],
["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59"],
]
3.value="{{dateTime}}" //dateTime 是一个 一维数组,表达的是dateTimeArray 每列中选择的位置,比如[0,0,0,0,0,0],则是表达为 选择了 dateTimeArray 数组中的 2019-01- 01 00 :00: 00
4.bindchange="changeDateTime" //这是一个绑定事件 changeDateTime 方法名 ,这个方法是用于监听 每列更改了哪些选择位置的函数 , 这个函数在js中 定义 ,主要是能获取到选择后 的一维数组 [1,3,5,3,2,20], 也就是可以把 dateTime设置为这个数组了
5.bindcolumnchange="changeDateTimeColumn" //绑定事件,这个方法是用于监听当每一列有翻动的话就会触发这个函数,里面的参数,函数定义到js文件里形参为e,e.detail.column - 翻动了哪一列, e.detail.value - 翻动的那一列到了哪个位置,即下标位置
xml代码如下:
<view class="item">
<text class="t1">时间:</text>
<picker
class='alarm_picker'
mode="multiSelector"
value="{{dateTime}}"
bindchange="changeDateTime"
bindcolumnchange="changeDateTimeColumn"
range="{{dateTimeArray}}">
<view class="picker">
{{dateTimeArray[0][dateTime[0]]}}-{{dateTimeArray[1][dateTime[1]]}}-{{dateTimeArray[2][dateTime[2]]}} {{dateTimeArray[3][dateTime[3]]}}:{{dateTimeArray[4][dateTime[4]]}}:{{dateTimeArray[5][dateTime[5]]}}
</view>
</picker>
</view>
二、需要同时引入js文件到util下,这个文件名为dateTimePicker.js 网上可以下载,这个文件可以初始化正确的年月日时分秒 数组,即提供 dateTime 和 dateTimeArray 两个数组的初始数据,代码不多,可复制代码放到util文件夹下
function withData(param) {
return param < 10 ? '0' + param : '' + param;
}
function getLoopArray(start, end) {
var start = start || 0;
var end = end || 1;
var array = [];
for (var i = start; i <= end; i++) {
array.push(withData(i));
}
return array;
}
function getMonthDay(year, month) {
var flag = year % 400 == 0 || (year % 4 == 0 && year % 100 != 0), array = null;
switch (month) {
case '01':
case '03':
case '05':
case '07':
case '08':
case '10':
case '12':
array = getLoopArray(1, 31)
break;
case '04':
case '06':
case '09':
case '11':
array = getLoopArray(1, 30)
break;
case '02':
array = flag ? getLoopArray(1, 29) : getLoopArray(1, 28)
break;
default:
array = '月份格式不正确,请重新输入!'
}
return array;
}
function getNewDateArry() {
// 当前时间的处理
var newDate = new Date();
var year = withData(newDate.getFullYear()),
mont = withData(newDate.getMonth() + 1),
date = withData(newDate.getDate()),
hour = withData(newDate.getHours()),
minu = withData(newDate.getMinutes()),
seco = withData(newDate.getSeconds());
return [year, mont, date, hour, minu, seco];
}
function dateTimePicker(startYear, endYear, date) {
// 返回默认显示的数组和联动数组的声明
var dateTime = [], dateTimeArray = [[], [], [], [], [], []];
var start = startYear || 1978;
var end = endYear || 2100;
// 默认开始显示数据
var defaultDate = date ? [...date.split(' ')[0].split('-'), ...date.split(' ')[1].split(':')] : getNewDateArry();
// 处理联动列表数据
/*年月日 时分秒*/
dateTimeArray[0] = getLoopArray(start, end);
dateTimeArray[1] = getLoopArray(1, 12);
dateTimeArray[2] = getMonthDay(defaultDate[0], defaultDate[1]);
dateTimeArray[3] = getLoopArray(0, 23);
dateTimeArray[4] = getLoopArray(0, 59);
dateTimeArray[5] = getLoopArray(0, 59);
dateTimeArray.forEach((current, index) => {
dateTime.push(current.indexOf(defaultDate[index]));
});
return {
dateTimeArray: dateTimeArray,
dateTime: dateTime
}
}
module.exports = {
dateTimePicker: dateTimePicker,
getMonthDay: getMonthDay
}
三、在页面js里引入 文件,并初始化数据,以及翻动操作对应触发函数逻辑,具体代码如下,代码后面解释逻辑
var dateTimePicker = require('../../../utils/dateTimePicker.js'); //引入dateTimePicker
var dateObj = new Date(); //获取当前时间对象
Page({
/**
* 页面的初始数据
*/
data: {
date: '2018-10-01',
time: '12:00',
dateTimeArray: null, //二维数组,保存年月日时分秒各列能选择的数据
dateTime: null, //用户保存翻动后时间的位置
defaultTime:null, //用户保存当前默认时间的位置
startYear: 1970, //初始化开始年份
endYear: 2050, //初始化结束年份
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 获取完整的年月日 时分秒,以及默认显示的数组
var obj = dateTimePicker.dateTimePicker(this.data.startYear, this.data.endYear);
// 精确到分的处理,将数组的秒去掉
var lastArray = obj1.dateTimeArray.pop();
var lastTime = obj1.dateTime.pop();
this.setData({
defaultTime: obj.dateTime,
dateTime: obj.dateTime,
dateTimeArray: obj.dateTimeArray,
});
},
editTime() {
let editTime = `${that.data.dateTimeArray[0][that.data.dateTime[0]]}-${that.data.dateTimeArray[1][that.data.dateTime[1]]}-${that.data.dateTimeArray[2][that.data.dateTime[2]]} ${that.data.dateTimeArray[3][that.data.dateTime[3]]}:${that.data.dateTimeArray[4][that.data.dateTime[4]]}:${that.data.dateTimeArray[5][that.data.dateTime[5]]}`
console.log(editTime)//时间拼接 (格式:2018-09-19 17:30:55)
},
//选择时间方法
changeDate(e) {
this.setData({
date: e.detail.value
});
},
changeTime(e) {
this.setData({
time: e.detail.value
});
},
changeDateTime(e) {
console.log(e);
this.setData({
dateTime: e.detail.value
});
},
//翻动弹窗时
changeDateTimeColumn(e) {
var arr = this.data.dateTime,
dateArr = this.data.dateTimeArray;
console.log(arr);
console.log(dateArr);
var year = dateArr[0][arr[0]];
var month = dateArr[1][arr[1]];
var date = dateArr[2][arr[2]];
var hour = dateArr[3][arr[3]];
var min = dateArr[4][arr[4]];
var sec = dateArr[5][arr[5]];
//如果当前翻动的列 小于默认时间则跳转回默认更改
//翻动了年
var default_times = dateObj.getTime();
if(e.detail.column == 0) {
year = dateArr[0][e.detail.value];
var current_times = new Date((year + '-' + month + '-' + date + ' ' + hour + ':' + min + ':' + sec).replace(/-/g, '/')).getTime();
//选择的年份 小于当前年份,则将年份拉回当前年份
if (current_times < default_times ) {
arr = this.data.defaultTime;
this.setData({
dateTimeArray: dateArr,
dateTime: arr
});
return false;
}
}
//翻动了月份
if (e.detail.column == 1) {
month = dateArr[1][e.detail.value];
var current_times = new Date((year + '-' + month + '-' + date + ' ' + hour + ':' + min + ':' + sec).replace(/-/g, '/')).getTime();
//选择的月份 小于当前月份,则将年份拉回当前月份
if (current_times < default_times) {
arr[1] = this.data.defaultTime[1];
arr[2] = this.data.defaultTime[2];
arr[3] = this.data.defaultTime[3];
arr[4] = this.data.defaultTime[4];
arr[5] = this.data.defaultTime[5];
this.setData({
dateTimeArray: dateArr,
dateTime: arr
});
return false;
}
}
//翻动了日
if (e.detail.column == 2) {
date = dateArr[2][e.detail.value];
var current_times = new Date((year + '-' + month + '-' + date + ' ' + hour + ':' + min + ':' + sec).replace(/-/g, '/')).getTime();
if (current_times < default_times) {
arr[2] = this.data.defaultTime[2];
arr[3] = this.data.defaultTime[3];
arr[4] = this.data.defaultTime[4];
arr[5] = this.data.defaultTime[5];
this.setData({
dateTimeArray: dateArr,
dateTime: arr
});
return false;
}
}
//翻动了时
if (e.detail.column == 3) {
hour = dateArr[3][e.detail.value];
var current_times = new Date((year + '-' + month + '-' + date + ' ' + hour + ':' + min + ':' + sec).replace(/-/g, '/')).getTime();
if (current_times < default_times) {
arr[3] = this.data.defaultTime[3];
arr[4] = this.data.defaultTime[4];
arr[5] = this.data.defaultTime[5];
this.setData({
dateTimeArray: dateArr,
dateTime: arr
});
return false;
}
}
//翻动了分
if (e.detail.column == 4) {
min = dateArr[4][e.detail.value];
var current_times = new Date((year + '-' + month + '-' + date + ' ' + hour + ':' + min + ':' + sec).replace(/-/g, '/')).getTime();
if (current_times < default_times) {
arr[4] = this.data.defaultTime[4];
arr[5] = this.data.defaultTime[5];
this.setData({
dateTimeArray: dateArr,
dateTime: arr
});
return false;
}
}
//翻动了秒
if (e.detail.column == 5) {
sec = dateArr[5][e.detail.value];
var current_times = new Date((year + '-' + month + '-' + date + ' ' + hour + ':' + min + ':' + sec).replace(/-/g, '/')).getTime();
if (current_times < default_times) {
arr[5] = this.data.defaultTime[5];
this.setData({
dateTimeArray: dateArr,
dateTime: arr
});
return false;
}
}
arr[e.detail.column] = e.detail.value;
dateArr[2] = dateTimePicker.getMonthDay(dateArr[0][arr[0]], dateArr[1][arr[1]]);
this.setData({
dateTimeArray: dateArr,
dateTime: arr
});
},
})
说明一下:changeDateTimeColumn 这个函数里,就是在翻动各列时,检查所选择的时间是不是当大于当前时间,如果小于当前时间则将各滚动条重置回默认的当前时间放到数组中,如果是大于当前时间则进行后续处理,将选定的时间放到数组中