效果如入下：
第一步，封裝datepicker.js，可放在utils文件夾下。代碼如下：
?
const formatNumber = n => {
n = n.toString()
return n[1] ? n : '0' + n
}
function getCurrentDate(){// 獲取當(dāng)前時(shí)間
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(){ //一點(diǎn)開(kāi)picker的選中設(shè)置
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)+'時(shí)'
hoursindex =item.indexOf(currentHours)
break;
case 4:
currentMinute=[currentMinute].map(formatNumber)+'分'
minuteindex =item.indexOf(currentMinute)
break;
default:
break;
}
})
//現(xiàn)在全部列，默認(rèn)選第一個(gè)選項(xiàng),可以直接在data里面定義
return [yearindex,monthindex,dayindex,hoursindex,minuteindex];
}
function loadYears(startYear,endYear){//獲取年份
/**
* params參數(shù)
* startYear 當(dāng)前年份
* endYear 循環(huán)結(jié)束月份 ，比如 5 年內(nèi) newDate().getFullYear() + 4，客戶(hù)說(shuō)只能預(yù)約兩年內(nèi)
* return 年份數(shù)組
*/
let years=[];
for (let i = startYear; i <= endYear; i++) {
years.push("" + i+"年");
}
// console.log(years,'years');
return years;//返回年份數(shù)組
}
function loadMonths(startMonth,endMonth){//獲取月份
// console.log(startMonth,endMonth,'startMonth,endMonth');
/**
* params參數(shù)
* startMonth 當(dāng)前月份
* endMonth 循環(huán)結(jié)束月份，一般為 12個(gè)月
* return 月份數(shù)組
*/
let months=[];
for (let i = startMonth; i <= endMonth; i++) {
if (i < 10) {
i = "0" + i;
}
months.push("" + i+"月");
}
// console.log(months,'months');
return months;//返回月份數(shù)組
}
function loadDays(yearSelected,selectedMonths,startDay){ //獲取日期
/**
* params參數(shù)
* currentYears 當(dāng)前年份
* selectedMonths 當(dāng)前選擇的月份
* startDay 循環(huán)開(kāi)始日 一般為1號(hào)， 希望從當(dāng)前月份開(kāi)始 ，startDay=currentDay
* return 日期數(shù)組
*/
// console.log(currentYears,selectedMonths,startDay,'111');
let days=[];
if (selectedMonths == 1 || selectedMonths == 3 || selectedMonths == 5 || selectedMonths == 7 || selectedMonths == 8 || selectedMonths == 10 || selectedMonths == 12) { //判斷31天的月份，可以用正則簡(jiǎn)化
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月份天數(shù)
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;//返回日期數(shù)組
}
function loadHours(startHour,endHour){//獲取小時(shí)
/**
* params參數(shù)
* startHour 循環(huán)開(kāi)始小時(shí) 一般為 0點(diǎn)， 希望從當(dāng)前小時(shí)開(kāi)始 startHour=currentHours
* endHour 循環(huán)當(dāng)前小時(shí) ,一般為24個(gè)小時(shí)
* return 小時(shí)數(shù)組
*/
let hours=[];
for (let i = startHour; i < endHour ; i++) {
if (i < 10) {//看需求要不要加在前面+‘0’
i = "0" + i;
}
hours.push("" + i+"時(shí)");
}
return hours;//返回小時(shí)數(shù)組
}
function loadMinutes(startMinute,endMinute){//獲取分鐘
/**
* params參數(shù)
* startMinute 循環(huán)開(kāi)始分鐘 一般為 0 開(kāi)始，從當(dāng)前分鐘開(kāi)始 startMinute=currentMinutes
* endMinute 循環(huán)當(dāng)前秒 ，一般為60分鐘
* return 分鐘數(shù)組
*/
let minutes=[];
for (let i = startMinute; i < endMinute ; i++) {
if (i < 10) {
i = "0" + i;
}
minutes.push("" + i+"分");
}
return minutes;//返回分鐘數(shù)組
}
//我沒(méi)有用到秒，可以參考分鐘的寫(xiě)法
function loadPickerData(){ //將Picker初始數(shù)據(jù)，開(kāi)始時(shí)間設(shè)置為當(dāng)前時(shí)間
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();
// 下面調(diào)用 自定義方法
//獲取年份 loadYears(startYear,endYear)
//獲取月份 loadMonths(startMonth,endMonth)
//獲取日期 loadDays(currentYears,currentMonths,startDay)
//獲取小時(shí) 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]
}
//導(dǎo)出
module.exports = {
loadPickerData:loadPickerData,
getCurrentDate:getCurrentDate,
GetMultiIndex:GetMultiIndex,
loadYears:loadYears,
loadMonths:loadMonths,
loadDays:loadDays,
loadHours:loadHours,
loadMinutes:loadMinutes
}
第二步，wxml代碼：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-795034.html
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
{{time}}
<view class="triangle_border_down"> </view>
</picker>js代碼：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-795034.html
const datepicker = require('../datepicker/datepicker')
Page({
data: {
time: '選擇預(yù)約時(shí)間',
multiArray: [],//piker的item項(xiàng)
multiIndex: [],//當(dāng)前選擇列的下標(biāo)
year: '',//選擇的年
month: '',//選擇的月
day: '',//選擇的日
hour: '',//選擇的時(shí)
minute: '',//選擇的分
},
onShow: function () {
//獲取 datepicker 工具下的方法
var loadPickerData = datepicker.loadPickerData()
var getCurrentDate = datepicker.getCurrentDate()
var GetMultiIndex = datepicker.GetMultiIndex()
//這里寫(xiě)的是為了記錄當(dāng)前時(shí)間
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數(shù)組賦值，格式 [years, months, days, hours, minutes]
multiIndex: GetMultiIndex,//設(shè)置pickerIndex，[0,0,0,0,0]
time: getCurrentDate, //設(shè)置當(dāng)前時(shí)間 ，currentYears+'-'+mm+'-'+dd+' '+hh+':'+min
year: year,//記錄選擇的年
month: month,//記錄選擇的月
day: day,//記錄選擇的日
hour: hour,//記錄選擇的時(shí)
minute: minute,//記錄選擇的分
});
},
bindMultiPickerChange: function (e) { //時(shí)間日期picker選擇改變后，點(diǎn)擊確定
// console.log('picker發(fā)送選擇改變，攜帶值為', e.detail.value)
this.setData({
multiIndex: e.detail.value
})
const index = this.data.multiIndex; // 當(dāng)前選擇列的下標(biāo)
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('時(shí)', '') + ':' + minute.replace('分', ''),
year: year, //記錄選擇的年
month: month, //記錄選擇的月
day: day, //記錄選擇的日
hour: hour, //記錄選擇的時(shí)
minute: minute, //記錄選擇的分
})
//console.log(this.data.time);
},
bindMultiPickerColumnChange: function (e) { //監(jiān)聽(tīng)picker的滾動(dòng)事件
// console.log('修改的列為', e.detail.column, '，值為', e.detail.value);
let getCurrentDate = datepicker.getCurrentDate();//獲取現(xiàn)在時(shí)間
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]);//當(dāng)前選擇的年份
this.setData({
multiIndex: [0, 0, 0, 0, 0],//設(shè)置pickerIndex
year: yearSelected //當(dāng)前選擇的年份
});
if (yearSelected == currentYear) {//當(dāng)前選擇的年份==當(dāng)前年份
var loadPickerData = datepicker.loadPickerData();
this.setData({
multiArray: loadPickerData,//picker數(shù)組賦值
multiIndex: [0, 0, 0, 0, 0] //設(shè)置pickerIndex
});
} else { // 選擇的年份！=當(dāng)前年份
// 處理月份
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]); //當(dāng)前選擇的月份
this.setData({
month: mon // 記錄當(dāng)前列
})
if (mon == currentMonth) {//選擇的月份==當(dāng)前月份
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 { // 選擇的月份！=當(dāng)前月份
// 處理日期
let dayArr = datepicker.loadDays(this.data.year, mon, 1) // 傳入當(dāng)前年份，當(dāng)前選擇的月份去計(jì)算日
// 處理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]);//當(dāng)前選擇的日
this.setData({
day: dd
})
if (dd == currentDay) {//選擇的日==當(dāng)前日
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 { // 選擇的日！=當(dāng)前日
// 處理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) {//修改時(shí)
let hh = parseInt(this.data.multiArray[e.detail.column][e.detail.value]); //當(dāng)前選擇的時(shí)
this.setData({
hour: hh
})
if (hh == currentHour) {//選擇的時(shí)==當(dāng)前時(shí)
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 {//選擇的時(shí)！=當(dāng)前時(shí)
// 處理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); //將值賦回去
}
})
到了這里，關(guān)于微信小程序自定義封裝picker實(shí)現(xiàn)直接顯示年月日時(shí)分的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
