微信小程序自定义封装picker实现直接显示年月日时分
效果如入下：
第一步，封装datepicker.js，可放在utils文件夹下。代码如下：
const formatNumber = n => {
n = n.toString()
return n[1] ? n : '0' + n
}
function getCurrentDate(){// 获取当前时间
let date = new Date();
let currentYears=date.getFullYear();
let currentMonths=date.getMonth()+1;
let currentDay=date.getDate();
let currentHours=date.getHours();
let currentMinute=date.getMinutes();
var year=[currentYears].map(formatNumber)
var mm=[currentMonths].map(formatNumber)
var dd=[currentDay].map(formatNumber)
var hh=[currentHours].map(formatNumber)
var min=[currentMinute].map(formatNumber)
// return year+'年'+mm+'月'+dd+'日'+hh+':'+min;
return year+'-'+mm+'-'+dd+' '+hh+':'+min; //2023-08-23-09:43
}
function GetMultiIndex(){ //一点开picker的选中设置
let arr=loadPickerData()
console.log(arr);
let date = new Date();
let currentYears=date.getFullYear();
let currentMonths=date.getMonth()+1;
let currentDay=date.getDate();
let currentHours=date.getHours();
let currentMinute=date.getMinutes();
console.log(currentYears);
let yearindex=0
let monthindex=0
let dayindex=0
let hoursindex=0
let minuteindex=0
arr.forEach((item,index)=>{
switch (index) {
case 0:
currentYears=currentYears+'年'
yearindex =item.indexOf(currentYears)
break;
case 1:
currentMonths=[currentMonths].map(formatNumber)+'月'
monthindex =item.indexOf(currentMonths)
break;
case 2:
currentDay=[currentDay].map(formatNumber)+'日'
dayindex =item.indexOf(currentDay)
break;
case 3:
currentHours=[currentHours].map(formatNumber)+'时'
hoursindex =item.indexOf(currentHours)
break;
case 4:
currentMinute=[currentMinute].map(formatNumber)+'分'
minuteindex =item.indexOf(currentMinute)
break;
default:
break;
}
})
//现在全部列，默认选第一个选项,可以直接在data里面定义
return [yearindex,monthindex,dayindex,hoursindex,minuteindex];
}
function loadYears(startYear,endYear){//获取年份
/**
* params参数
* startYear 当前年份
* endYear 循环结束月份 ，比如 5 年内 newDate().getFullYear() + 4，客户说只能预约两年内
* return 年份数组
*/
let years=[];
for (let i = startYear; i <= endYear; i++) {
years.push("" + i+"年");
}
// console.log(years,'years');
return years;//返回年份数组
}
function loadMonths(startMonth,endMonth){//获取月份
// console.log(startMonth,endMonth,'startMonth,endMonth');
/**
* params参数
* startMonth 当前月份
* endMonth 循环结束月份，一般为 12个月
* return 月份数组
*/
let months=[];
for (let i = startMonth; i <= endMonth; i++) {
if (i < 10) {
i = "0" + i;
}
months.push("" + i+"月");
}
// console.log(months,'months');
return months;//返回月份数组
}
function loadDays(yearSelected,selectedMonths,startDay){ //获取日期
/**
* params参数
* currentYears 当前年份
* selectedMonths 当前选择的月份
* startDay 循环开始日 一般为1号， 希望从当前月份开始 ，startDay=currentDay
* return 日期数组
*/
// console.log(currentYears,selectedMonths,startDay,'111');
let days=[];
if (selectedMonths == 1 || selectedMonths == 3 || selectedMonths == 5 || selectedMonths == 7 || selectedMonths == 8 || selectedMonths == 10 || selectedMonths == 12) { //判断31天的月份，可以用正则简化
for (let i = startDay; i <= 31; i++) {
if (i < 10) {
i = "0" + i;
}
days.push("" + i+'日');
}
} else if (selectedMonths == 4 || selectedMonths == 6 || selectedMonths == 9 || selectedMonths == 11) { //判断30天的月份
for (let i = startDay; i <= 30; i++) {
if (i < 10) {
i = "0" + i;
}
days.push("" + i+'日');
}
} else if (selectedMonths == 2) { //判断2月份天数
console.log('2月');
let year = yearSelected
console.log(year,'year');
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {//闰年
for (let i = startDay; i <= 29; i++) {
if (i < 10) {
i = "0" + i;
}
days.push("" + i+'日');
}
} else {//不是闰年
for (let i = startDay; i <= 28; i++) {
if (i < 10) {
i = "0" + i;
}
days.push("" + i+'日');
}
}
}
console.log(days,'days');
return days;//返回日期数组
}
function loadHours(startHour,endHour){//获取小时
/**
* params参数
* startHour 循环开始小时 一般为 0点， 希望从当前小时开始 startHour=currentHours
* endHour 循环当前小时 ,一般为24个小时
* return 小时数组
*/
let hours=[];
for (let i = startHour; i < endHour ; i++) {
if (i < 10) {//看需求要不要加在前面+‘0’
i = "0" + i;
}
hours.push("" + i+"时");
}
return hours;//返回小时数组
}
function loadMinutes(startMinute,endMinute){//获取分钟
/**
* params参数
* startMinute 循环开始分钟 一般为 0 开始，从当前分钟开始 startMinute=currentMinutes
* endMinute 循环当前秒 ，一般为60分钟
* return 分钟数组
*/
let minutes=[];
for (let i = startMinute; i < endMinute ; i++) {
if (i < 10) {
i = "0" + i;
}
minutes.push("" + i+"分");
}
return minutes;//返回分钟数组
}
//我没有用到秒，可以参考分钟的写法
function loadPickerData(){ //将Picker初始数据，开始时间设置为当前时间
let date1 = new Date();
let currentYears=date1.getFullYear();
let currentMonths=date1.getMonth()+1;
let currentDay=date1.getDate();
let currentHours=date1.getHours();
let currentMinute=date1.getMinutes();
// 下面调用 自定义方法
//获取年份 loadYears(startYear,endYear)
//获取月份 loadMonths(startMonth,endMonth)
//获取日期 loadDays(currentYears,currentMonths,startDay)
//获取小时 loadHours(startHour,endHour)
//获取分钟 loadMinutes(startMinute,endMinute)
let years = loadYears(currentYears-2,date1.getFullYear() + 100) //修改起始年份在两年前
let months = loadMonths(1,12)
let days = loadDays(currentYears,currentMonths,1)
let hours = loadHours(0,24)
let minutes = loadMinutes(0,60)
return [years, months, days, hours, minutes]
}
//导出
module.exports = {
loadPickerData:loadPickerData,
getCurrentDate:getCurrentDate,
GetMultiIndex:GetMultiIndex,
loadYears:loadYears,
loadMonths:loadMonths,
loadDays:loadDays,
loadHours:loadHours,
loadMinutes:loadMinutes
}
第二步，wxml代码：
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
{{time}}
<view class="triangle_border_down"> </view>
</picker>js代码：
const datepicker = require('../datepicker/datepicker')
Page({
data: {
time: '选择预约时间',
multiArray: [],//piker的item项
multiIndex: [],//当前选择列的下标
year: '',//选择的年
month: '',//选择的月
day: '',//选择的日
hour: '',//选择的时
minute: '',//选择的分
},
onShow: function () {
//获取 datepicker 工具下的方法
var loadPickerData = datepicker.loadPickerData()
var getCurrentDate = datepicker.getCurrentDate()
var GetMultiIndex = datepicker.GetMultiIndex()
//这里写的是为了记录当前时间
let year = parseInt(getCurrentDate.substring(0, 4));
let month = parseInt(getCurrentDate.substring(5, 7));
let day = parseInt(getCurrentDate.substring(8, 10));
let hour = parseInt(getCurrentDate.substring(11, 13));
let minute = parseInt(getCurrentDate.substring(14, 16));
console.log(getCurrentDate);
this.setData({
multiArray: loadPickerData,//picker数组赋值，格式 [years, months, days, hours, minutes]
multiIndex: GetMultiIndex,//设置pickerIndex，[0,0,0,0,0]
time: getCurrentDate, //设置当前时间 ，currentYears+'-'+mm+'-'+dd+' '+hh+':'+min
year: year,//记录选择的年
month: month,//记录选择的月
day: day,//记录选择的日
hour: hour,//记录选择的时
minute: minute,//记录选择的分
});
},
bindMultiPickerChange: function (e) { //时间日期picker选择改变后，点击确定
// console.log('picker发送选择改变，携带值为', e.detail.value)
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.replace('年', '-') + month.replace('月', '-') + day.replace('日', '') + ' ' + hour.replace('时', '') + ':' + minute.replace('分', ''),
year: year, //记录选择的年
month: month, //记录选择的月
day: day, //记录选择的日
hour: hour, //记录选择的时
minute: minute, //记录选择的分
})
//console.log(this.data.time);
},
bindMultiPickerColumnChange: function (e) { //监听picker的滚动事件
// console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
let getCurrentDate = datepicker.getCurrentDate();//获取现在时间
let currentYear = parseInt(getCurrentDate.substring(0, 4));
let currentMonth = parseInt(getCurrentDate.substring(5, 7));
let currentDay = parseInt(getCurrentDate.substring(8, 10));
let currentHour = parseInt(getCurrentDate.substring(11, 13));
let currentMinute = parseInt(getCurrentDate.substring(14, 16));
if (e.detail.column == 0) {//修改年份列
let yearSelected = parseInt(this.data.multiArray[e.detail.column][e.detail.value]);//当前选择的年份
this.setData({
multiIndex: [0, 0, 0, 0, 0],//设置pickerIndex
year: yearSelected //当前选择的年份
});
if (yearSelected == currentYear) {//当前选择的年份==当前年份
var loadPickerData = datepicker.loadPickerData();
this.setData({
multiArray: loadPickerData,//picker数组赋值
multiIndex: [0, 0, 0, 0, 0] //设置pickerIndex
});
} else { // 选择的年份！=当前年份
// 处理月份
let monthArr = datepicker.loadMonths(1, 12)
// 处理日期
let dayArr = datepicker.loadDays(currentYear, currentMonth, 1)
// 处理hour
let hourArr = datepicker.loadHours(0, 24);
// 处理minute
let minuteArr = datepicker.loadMinutes(0, 60)
// 给每列赋值回去
this.setData({
['multiArray[1]']: monthArr,
['multiArray[2]']: dayArr,
['multiArray[3]']: hourArr,
['multiArray[4]']: minuteArr
});
}
}
if (e.detail.column == 1) {//修改月份列
let mon = parseInt(this.data.multiArray[e.detail.column][e.detail.value]); //当前选择的月份
this.setData({
month: mon // 记录当前列
})
if (mon == currentMonth) {//选择的月份==当前月份
if (this.data.year == currentYear) {
// 处理日期
let dayArr = datepicker.loadDays(currentYear, mon, currentDay)
// 处理hour
let hourArr = datepicker.loadHours(currentHour, 24);
// 处理minute
let minuteArr = datepicker.loadMinutes(currentMinute, 60)
this.setData({
['multiArray[2]']: dayArr,
['multiArray[3]']: hourArr,
['multiArray[4]']: minuteArr
})
} else {
// 处理日期
let dayArr = datepicker.loadDays(this.data.year, mon, 1)
// 处理hour
let hourArr = datepicker.loadHours(0, 24);
// 处理minute
let minuteArr = datepicker.loadMinutes(0, 60)
this.setData({
['multiArray[2]']: dayArr,
['multiArray[3]']: hourArr,
['multiArray[4]']: minuteArr
});
}
} else { // 选择的月份！=当前月份
// 处理日期
let dayArr = datepicker.loadDays(this.data.year, mon, 1) // 传入当前年份，当前选择的月份去计算日
// 处理hour
let hourArr = datepicker.loadHours(0, 24);
// 处理minute
let minuteArr = datepicker.loadMinutes(0, 60)
console.log(dayArr,'日期');
this.setData({
['multiArray[2]']: dayArr,
['multiArray[3]']: hourArr,
['multiArray[4]']: minuteArr
});
}
}
if (e.detail.column == 2) {//修改日
let dd = parseInt(this.data.multiArray[e.detail.column][e.detail.value]);//当前选择的日
this.setData({
day: dd
})
if (dd == currentDay) {//选择的日==当前日
if (this.data.year == currentYear && this.data.month == currentMonth) {//选择的是今天
// 处理hour
let hourArr = datepicker.loadHours(currentHour, 24);
// 处理minute
let minuteArr = datepicker.loadMinutes(currentMinute, 60)
this.setData({
['multiArray[3]']: hourArr,
['multiArray[4]']: minuteArr
});
} else { //选择的不是今天
// 处理hour
let hourArr = datepicker.loadHours(0, 24);
// 处理minute
let minuteArr = datepicker.loadMinutes(0, 60)
this.setData({
['multiArray[3]']: hourArr,
['multiArray[4]']: minuteArr
});
}
} else { // 选择的日！=当前日
// 处理hour
let hourArr = datepicker.loadHours(0, 24);
// 处理minute
let minuteArr = datepicker.loadMinutes(0, 60)
this.setData({
['multiArray[3]']: hourArr,
['multiArray[4]']: minuteArr
});
}
}
if (e.detail.column == 3) {//修改时
let hh = parseInt(this.data.multiArray[e.detail.column][e.detail.value]); //当前选择的时
this.setData({
hour: hh
})
if (hh == currentHour) {//选择的时==当前时
if (this.data.year == currentYear && this.data.month == currentMonth && this.data.month == currentMonth) { // 选择的是今天
// 处理minute
let minuteArr = datepicker.loadMinutes(currentMinute, 60)
this.setData({
['multiArray[4]']: minuteArr
});
} else { // 选择的不是今天
// 处理minute
let minuteArr = datepicker.loadMinutes(0, 60)
this.setData({
['multiArray[4]']: minuteArr
});
}
} else {//选择的时！=当前时
// 处理minute
let minuteArr = datepicker.loadMinutes(0, 60)
this.setData({
['multiArray[4]']: minuteArr
});
}
}
var data = {
multiArray: this.data.multiArray,
multiIndex: this.data.multiIndex
};
data.multiIndex[e.detail.column] = e.detail.value; //将值赋回去
this.setData(data); //将值赋回去
}
})