直接不多说，以代码为准：
小程序我是用的vant 框架来写的，van-field 是一个文本输入框 。
HTML部分：
日期公共组件：年-月-日 时-分
<van-row custom-class='vanRowHeight' :dateType='dateType' :currentTime='currentTime' :index='index'>
<picker mode="multiSelector" @change="bindMultiPickerChange" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray">
<van-field disabled :label="dataTimeTitle" :value="orderData" @click="show2=true" placeholder="请选择"
custom-style="font-size:32rpx;padding:29rpx 0 27rpx 32rpx;font-family:Microsoft YaHei;" input-align="right" is-link />
</picker>
</van-row>
此插件是一个 年月日时分 2020-12-17 17:17:00 的格式插件。代码部分其实可以按需取用的，删掉多余即可。
JS部分：
<script>
var utilPicker = require('../../utils/date-time-picker.js'); //引入小程序插件date-time-picker
export default {
props:['currentTime',"dataTimeTitle",'dateType'],//封装参数释义：当前时间,时间标题（必传），时间类型 可根据业务进行调整
data() {
return {
multiIndex: [0, 0, 0, 0, 0],
index:0,
multiArray: [],
year:"",
month: "",
day: "",
startHour: "",
endHour: "",
orderData:"",
second:"00",
seconddeDefault:false,
}
},
mounted(){
console.log(this.currentTime);
if(this.currentTime === undefined || this.currentTime === 'undefined' || this.currentTime === null || this.currentTime === '' ){
this.initData();//初始化时间，取当前时间
}else{
this.initCurrentTime(this.currentTime);//根据参数初始化时间
}
},
methods: {
initData(){
this.seconddeDefault = false;
let date =new Date();
let year = date.getFullYear()
let month = date.getMonth() + 1
let day = date.getDate()
let hour = date.getHours();
let minute = date.getMinutes();
let surplusMonth = this.surplusMonth(year);
let surplusDay = this.surplusDay(year,month,day);
let surplusHour = this.surplusHour(year, month, day, hour)
if(this.dateType === "vacation"){
this.multiArray = [[(year + '年')],
surplusMonth,
surplusDay,
surplusHour[0],
surplusHour[1]
];
}else{
this.multiArray = [[(year - 1) + '年',year + '年', (year + 1) + '年', (year + 2) + '年', (year + 3)+ '年'],
surplusMonth,
surplusDay,
surplusHour[0],
surplusHour[1]
];
}
// console.log(this.multiArray);
this.year = year;
this.month = month;
this.day = day;
this.hour = hour;
this.minute = minute;
if(this.dateType === "vacation"){
this.multiIndex[0] = 0;
}else{
this.multiIndex[0] = 1;
}
this.multiIndex[1] = this.month-1;
this.multiIndex[2] = this.day-1;
this.multiIndex[3] = hour;
this.multiIndex[4] = minute;
// console.log(this.multiIndex)
},
initCurrentTime(initCurrentTime){
this.currentTime = initCurrentTime;
if(this.currentTime === undefined || this.currentTime === 'undefined' || this.currentTime === null || this.currentTime === '' ){
this.initData();
return
}
this.seconddeDefault = false;
let dateArr = this.currentTime.split(" ");
let dateYearArr = dateArr[0].split("-");
let dateTimeArr = dateArr[1].split(":");
// console.log(dateArr,dateYearArr,dateTimeArr);
let date =new Date();
let year = Number(dateYearArr[0])
let month = Number(dateYearArr[1])
let day = Number(dateYearArr[2])
let hour = Number(dateTimeArr[0]);
let minute = Number(dateTimeArr[1]);
this.second = dateTimeArr[2];
if(this.second === undefined || this.second === 'undefined' || this.second === null || this.second === '' ){
this.second = "00";
}
let surplusMonth = this.surplusMonth(year);
let surplusDay = this.surplusDay(year,month,day);
let surplusHour = this.surplusHour(year, month, day, hour)
if(this.dateType === "vacation"){
this.multiArray = [[(year + '年')],
surplusMonth,
surplusDay,
surplusHour[0],
surplusHour[1]
];
}else{
this.multiArray = [[(year - 1) + '年',year + '年', (year + 1) + '年', (year + 2) + '年', (year + 3)+ '年'],
surplusMonth,
surplusDay,
surplusHour[0],
surplusHour[1]
];
}
// console.log(this.multiArray);
this.year = year;
this.month = month;
this.day = day;
this.startHour = surplusHour[0][0];
this.endHour = surplusHour[1][0];
if(this.dateType === "vacation"){
this.multiIndex[0] = 0;
}else{
this.multiIndex[0] = 1;
}
this.multiIndex[1] = this.month-1;
this.multiIndex[2] = this.day-1;
this.multiIndex[3] = hour;
this.multiIndex[4] = minute;
// console.log(this.multiIndex)
this.bindMultiPickerChange();
},
init(){
this.year = "";
this.month = "";
this.day = "";
this.startHour = "";
this.endHour = "";
this.orderData = "";
this.seconddeDefault = false;
},
//月份计算
surplusMonth:function(year){
var date = new Date();
var year2 = date.getFullYear()
var month = date.getMonth() + 1
var day = date.getDate()
var hour = date.getHours()
var minute = date.getMinutes()
var second = date.getSeconds()
var monthDatas = [];
for (var i = 0; i < 12; i++) {
monthDatas.push(i + 1 + "月")
}
return monthDatas;
},
//天数计算
surplusDay: function (year, month, day) {
var days=31;
var dayDatas = [];
var date = new Date();
var year2 = date.getFullYear()
var month2 = date.getMonth() + 1
switch (parseInt(month)) {
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
days=31;
break;
//对于2月份需要判断是否为闰年
case 2:
if ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0)) {
days=29;
break;
} else {
days = 28;
break;
}
case 4:
case 6:
case 9:
case 11:
days = 30;
break;
}
for (var i = 0; i < days; i++) {
dayDatas.push(i + 1 + "日")
}
return dayDatas;
},
//时间计算
surplusHour: function (year, month, day,hour) {
var date = new Date();
var year2 = date.getFullYear()
var month2 = date.getMonth() + 1
var day2 = date.getDate();
var hourEnd = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23];
var hours = [['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分']];
var j=0;
var surplusHours=[[],[]];
for (var i = j; i < hours[0].length;i++){
surplusHours[0].push(hours[0][i]);
}
for (var i = j; i < hours[1].length; i++) {
surplusHours[1].push(hours[1][i]);
}
hours = surplusHours;
// }
return hours;
},
//某一列的值改变时触发
bindMultiPickerColumnChange: function (e) {
var date = new Date();
var year1 = date.getFullYear()
var month1 = date.getMonth() + 1
var day1 = date.getDate()
var hour1 = date.getHours()
var data = {
multiArray: this.multiArray,
multiIndex: this.multiIndex,
year: this.year,
month: this.month,
day: this.day,
startHour: this.startHour,
endHour: this.startHour,
};
// console.log(e.target.column);
data.multiIndex[e.target.column] = e.target.value;
switch (e.target.column) {
case 0:
var yearStr= data.multiArray[e.target.column][e.target.value];
var year = yearStr.substring(0, yearStr.length - 1)
data.year = parseInt(year);
var surplusDay = this.surplusDay(data.year, data.month,data.day);
data.multiArray[2] = surplusDay;
var surplusHour;
if (data.year == year1 && month1 == data.month && data.day == day1) {
surplusHour = this.surplusHour(data.year, data.month, data.day,hour1)
} else {
surplusHour = this.surplusHour(data.year, data.month, data.day, 1)
}
data.multiArray[3] = surplusHour[0];
data.multiArray[4] = surplusHour[1];
data.startHour = surplusHour[0];
data.endHour = surplusHour[1];
break;
case 1:
var monthStr = data.multiArray[e.target.column][e.target.value];
var month = monthStr.substring(0, monthStr.length - 1);
data.month = month;
if (data.year == year1 && month1 == data.month) {
data.day = day1;
}
var surplusDay = this.surplusDay(data.year, data.month, data.day);
data.multiArray[2] = surplusDay;
var surplusHour ;
if (data.year == year1 && month1 == data.month && data.day == day1) {
surplusHour = this.surplusHour(data.year, data.month, data.day, hour1)
} else {
surplusHour = this.surplusHour(data.year, data.month, data.day, 1)
}
data.multiArray[3] = surplusHour[0];
data.multiArray[4] = surplusHour[1];
data.startHour = surplusHour[0];
data.endHour = surplusHour[1];
break;
case 2:
var dayStr = data.multiArray[e.target.column][e.target.value];
var day = dayStr.substring(0, dayStr.length - 1);
data.day = day;
var surplusHour;
if (data.year == year1 && month1 == data.month && data.day == day1) {
surplusHour = this.surplusHour(data.year, data.month, data.day, hour1)
} else {
surplusHour = this.surplusHour(data.year, data.month, data.day, 1)
}
data.multiArray[3] = surplusHour[0];
data.multiArray[4] = surplusHour[1];
data.startHour = surplusHour[0];
data.endHour = surplusHour[1];
break;
case 3:
let hourStr = data.multiArray[e.target.column][e.target.value];
// console.log(hourStr)
let hour = hourStr.substr(0,hourStr.length-1);
// console.log(hour)
data.multiIndex[3] = parseInt(hour);
break;
case 5:
var hourStr = data.multiArray[e.target.column][e.target.value];
var hour = hourStr.substring(0, hourStr.length - 1);
data.endHour = hour;
break;
}
console.log(data);
this.day = data.day;
this.month = data.month;
this.multiArray = data.multiArray;
this.multiIndex = data.multiIndex;
this.year = data.year;
this.startHour = data.startHour;
this.seconddeDefault = true;
},
//value 改变时触发 change 事件
bindMultiPickerChange: function (e) {
this.orderData = "";
let secondFlag = this.second;
if(this.seconddeDefault){
this.second = "00"
}else{
this.second = secondFlag;
}
let year = parseInt(this.multiArray[0][this.multiIndex[0]])+"-" ;
let monthFlag = parseInt(this.multiArray[1][this.multiIndex[1]]);
let month = monthFlag>9 ? monthFlag+'-' : '0' + monthFlag+'-';
let maxDay = this.multiArray[2][this.multiIndex[2]];
maxDay = maxDay?maxDay:1;
let dayFlag = parseInt(maxDay);
let day = dayFlag>9?dayFlag+' ':'0'+dayFlag+" ";
let hourFlag = parseInt(this.multiArray[3][this.multiIndex[3]])
let hour = hourFlag > 9 ?hourFlag +":" :"0" + hourFlag + ":";
let minuteFlag = parseInt(this.multiArray[4][this.multiIndex[4]])
let minute = minuteFlag > 9 ? minuteFlag+":" + this.second : "0"+ minuteFlag + ":" + this.second;
// console.log( this.second);
this.orderData = year + month + day + hour + minute;
console.log(this.orderData);
this.$emit('changeDataTime', this.orderData);
this.seconddeDefault = false;
},
}
}
</script>
结束语：整个日历插件封装很简单 ，代码也很简单。年月日只需要删除多余代码即可，也不需要更改代码。中间代码可优化部分，大家可自由处理，欢迎分享更简洁的代码。
附上调用部分:
<data-time-picker-van ref='clearDataStart' :dateType='"vacation"' :dataTimeTitle='startDateTimeTitle' :currentTime='form.dateStarT' v-on:changeDataTime='startDataTime'></data-time-picker-van>
出发方法：
if(this.initFinish === false){
return
}
if(this.dateTimeFlag){
this.form.dateStar = val.substring(0,16);
}else{
this.form.dateStar = val+" 00:00";
}
this.mathDateDifference();
},
初始化时间： this.$refs.clearDataStart.init();
时间回填：this.$refs.clearDataStart.initCurrentTime(this.form.dateStarT);
代码拿走记得反手一个赞！！！！
