前言:
1.年月日要默认显示当前年月日
2.如果客户选择了以前的年月日要提醒(也就是不能小于当前的年月日)【这个问题还没有解决】
3.时分默认显示当前时分
一、实现思路
1. 使用 picker 组件:uniapp 中的 picker 组件可以用于实现时间选择。
2.uniapp 中的日历显示通常使用基于组件的插件实现,以下是其中一种方式。
二、实现步骤
①view部分展示
<view class="person-item">
<view class="flex">
<view style="color: rgba(255, 128, 128, 1); margin-right: 10rpx;margin-top: 12rpx;">*</view>
<view class="item-left">开始时间</view>
</view>
<picker class="item-right" mode="multiSelector" :range="dateTimeArray" v-model="dateTime"
@change="change" @columnchange="columnchange">
<view class="flex" style="margin-left: 18px;">
<input type="text" disabled="true" v-model="upTower" placeholder="请选择"
placeholder-class="inputPlace" />
<view style="margin-left: 10rpx;">
<u-icon name="arrow-right" color="#999" size="16"></u-icon>
</view>
</view>
</picker>
</view>
②JavaScript 内容
<script>
const dateTimePicker = require('@/utils/time/date.js') //时间
export default {
data() {
return {
// 时间
dateTimeArray: [],
dateTime: "",
upTower: "",
}
},
onLoad(e) {
let date = new Date()
let Y = date.getFullYear() + '/'
let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/'
// let D = date.getDate() + ' '
let D = date.getDate() < 10 ? ('0' + date.getDate() + ' ') : (date.getDate() + ' ')
let h = date.getHours() < 10 ? ('0' + date.getHours() + ':') : (date.getHours() + ':')
let m = date.getMinutes() < 10 ? ('0' + date.getMinutes() + ':') : (date.getMinutes() + ':')
let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
// h = '00' + ':',
// m = '00' + ':',
// s = '00';
let arr = Y + M + D + h + m + s
console.log(arr, 'arr1111')
let obj = dateTimePicker.dateTimePicker(this.startYear, this.endYear, arr)
console.log(obj, 'obj')
this.dateTimeArray = obj.dateTimeArray
this.dateTime = obj.dateTime
},
methods: {
//时间格式化
withData(param) {
return param < 10 ? '0' + param : '' + param;
},
change(e) {
let value = []
e.detail.value.forEach((val, index) => {
value.push(this.withData(val))
})
let allYear = this.dateTimeArray[0]
let y = allYear[Number(value[0])];
let m = Number(value[1]) + 1;
let d = Number(value[2]) + 1;
if (y < 10) y = '0' + y
if (m < 10) m = '0' + m
if (d < 10) d = '0' + d
let dateArray = y + "-" + m + "-" + d + " " + value[3] + ":" + value[4] + ":" + value[5]
this.upTower = dateArray
this.formData.visitTime = dateArray
},
columnchange(e) {
console.log(e.detail.value, 'e.detail.value111')
let dateArr = this.dateTimeArray
let arr = this.dateTime
//滑动所在列的数据并对其值进行更新
arr[e.detail.column] = e.detail.value
//更新展示月份对应的天数(28 or 29 or 30 or 31)
dateArr[2] = dateTimePicker.getMonthDay(dateArr[0][arr[0]], dateArr[1][arr[1]])
//最后把最新的数值赋值到dateTimeArray
this.dateTimeArray = dateArr
this.dateTime = arr
},
}
}
</script>
③css中样式展示
// 内容
.person-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 24rpx 24rpx 24rpx 15rpx;
border-bottom: 1px solid #E6E6E8;
.item-left {
color: #333;
// font-family: MiSans-Medium, MiSans;
font-size: 32rpx;
}
.item-right {
text-align: right;
font-size: 32rpx;
color: #999
}
}
④需要引入的js
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;
//处理传过来的字符串转化为数组
let dataArr = date.split(" ")[0].split('/')
let time = date.split(" ")[1].split(':')
// 默认开始显示数据 如果把自定义值传过来的话就使用自定义时间 否则用当前时间 ...dataArr数组解构
var defaultDate = date ? [...dataArr, ...time] : 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数组
dateTimeArray.forEach((current,index) =>{
//匹配defaultDate[index]值在current数组中的位置
dateTime.push(current.indexOf(defaultDate[index]))
});
return {
dateTimeArray: dateTimeArray,
dateTime: dateTime
}
}
module.exports = {
dateTimePicker: dateTimePicker,
getMonthDay: getMonthDay
}
三、效果展示
开始选择时间
四、小结 + 注意事项
以上就是如何在 uniapp 应用中实现时间选择和日历显示的详细步骤和代码示例。
通过使用 picker 组件或自定义时间选择器,以及使用日历插件或自定义日历组件,可以轻松实现时间选择和日历显示功能,满足应用的需求。
需要引入date.js,有可能引入后在项目内会报错,可以考虑把选择日期作为一个组件引入