需求:
1. 日期的前三天是今天,明天, 后天, 其他日期按年月日是正常显示;
2. 时间是半小时一个刻度, 每天是9:00-18:00可以约时间, 但是注意: 今天的时间排列要特别计算, 当前时间只能约下一个时间段以后的时间
如下图一个是jq的demo, 一个是uniapp小程序的picker, 时间紧有点啰嗦
jq写法:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>日期</title>
</head>
<body>
<div style="width: 90%;margin: 0 auto;">
<select id="dates">
<!-- <option value="volvo">选择</option> -->
</select>
<br>
<select id="times">
<!-- <option value="volvo">选择</option> -->
</select>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.5.1.js"></script>
<script>
// .......日期..........
let nowTime = new Date();
// var totalDay = mGetDate(2022, 2); // 29
var nowYear = nowTime.getFullYear();
var year = [nowYear, nowYear + 1];
var month = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
// 所有日期的数组
var dayArr = [];
// 今天的日期
var currentDay = "";
// 明年的今天
var nextDate = "";
// 时间默认的值
let defaultTime = [
"09:00",
"09:30",
"10:00",
"10:30",
"11:00",
"11:30",
"12:00",
"12:30",
"13:00",
"13:30",
"14:00",
"14:30",
"15:00",
"15:30",
"16:00",
"16:30",
"17:00",
"17:30",
"18:00"
]
// 当前的时间组
let timeArr = []
// 获取今天的日期
function getNowFormatDate() {
let date = new Date(),
year = date.getFullYear(), //获取完整的年份(4位)
month = date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
strDate = date.getDate() // 获取当前日(1-31)
// if (month >= 1 && month <= 9) month = '0' + month // 如果月份是个位数，在前面补0
// if (strDate >= 0 && strDate <= 9) strDate = '0' + strDate // 如果日是个位数，在前面补0
let currentDate = year + "年" + month + "月" + strDate + "日";
return currentDate
}
// 获取明年?今天的日期
function getNextFormatDate() {
let date = new Date(),
year = date.getFullYear() + 1, //获取完整的年份(4位)
month = date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
strDate = date.getDate() // 获取当前日(1-31)
// if (month >= 1 && month <= 9) month = '0' + month // 如果月份是个位数，在前面补0
// if (strDate >= 0 && strDate <= 9) strDate = '0' + strDate // 如果日是个位数，在前面补0
let nextDate = year + "年" + month + "月" + strDate + "日";
return nextDate
}
// 获取当前月的天数
function mGetDate(year, month) {
var d = new Date(year, month, 0);
return d.getDate();
}
// 获取所有的天数
function allDay() {
for (var m = 0; m < year.length; m++) {
var tempYear = year[m]
for (var n = 0; n < month.length; n++) {
var tempMonth = month[n]
var days = mGetDate(tempYear, tempMonth)
for (var d = 1; d < days; d++) {
var tempDay = days[d];
dayArr.push(tempYear + "年" + tempMonth + "月" + d + "日")
}
}
}
return dayArr
}
// 处理数据,今天到后?明年的今天
handleDay()
function handleDay() {
// 今天
currentDay = getNowFormatDate();
// 明年的今天
nextDate = getNextFormatDate();
dayArr = allDay();
let startDayIndex = dayArr.indexOf(currentDay);
let endDayIndex = dayArr.indexOf(nextDate);
dayArr = dayArr.slice(startDayIndex, endDayIndex + 1);
dayArr[0] = dayArr[0] + " 今天";
dayArr[1] = dayArr[1] + " 明天";
dayArr[2] = dayArr[2] + " 后天";
return dayArr
}
// console.log(year,month,"??")
for (var i = 0; i < dayArr.length; i++) {
var $select = $("#dates");
$select.append('<option values="' + dayArr[i] + '">' + dayArr[i] + '</option>');
}
// ..........时间.............
// 调用
formatTodayHalfHours(getNowFormatDate())
function formatTodayHalfHours(nowDate) {
timeArr = []
// 其他天 截取的如果包含天就去掉
if (nowDate.indexOf("天") > 0) {
// nowDate = nowDate.slice()
let _index = nowDate.indexOf("天")
nowDate = nowDate.slice(0, _index - 2)
}
// 判断是不是今天
if (nowDate == getNowFormatDate()) {
let nowDate = new Date()
// 如果是今天的小时是几点8:20
let nowHours = new Date(nowDate).getHours();
let nowMinutes = new Date(nowDate).getMinutes();
console.log(nowMinutes)
// 。。。。。。。注意 start。。。。。。。。。
// TODO 测试时间和分钟 待删
nowHours = 1
nowMinutes = 31
// 。。。。。。。注意 end。。。。。。。。。
// 如果是今天9点后17点前
if (nowHours >= 9 && nowHours < 17) {
let hour = nowHours < 10 ? '0' + nowHours : nowHours;
let minute = nowMinutes < 30 ? '30' : '00';
// 当前时分
let nowHourMinute = hour + ':' + minute;
if (nowMinutes > 30 || nowMinutes == 30) {
console.log(nowHourMinute, hour)
nowHourMinute = hour * 1 + 1 + ':' + minute
}
if (defaultTime.indexOf(nowHourMinute) > 0) {
timeArr = defaultTime
let startDayIndex = timeArr.indexOf(nowHourMinute);
let endDayIndex = timeArr.length;
timeArr = timeArr.slice(startDayIndex, endDayIndex + 1);
}
} else if (nowHours == 17) {
// 如果是17:30之前
if (nowMinutes < 30) {
timeArr = ["17:30", "18:00"]
} else {
timeArr = ["18:00"]
}
// // 如果是17:30之后
// if (nowMinutes >= 31) {
// // 今天大于17:30点 只能约明天
// timeArr = ["今日已无预约时间"]
// }
} else if (nowHours >= 18) {
// 今天大于18点 只能约明天
timeArr = ["今日已无预约时间"]
} else if (nowHours < 9) {
timeArr = []
// 如果是今天9点之前和以后的每一天
timeArr = defaultTime
}
} else {
timeArr = []
// 如果是今天9点之前和以后的每一天
timeArr = defaultTime
}
return timeArr
}
timeHtml();
function timeHtml() {
// console.log(timeArr,"值")
var $select = $("#times");
$select.html('')
for (var i = 0; i < timeArr.length; i++) {
$select.append('<option values="' + timeArr[i] + '">' + timeArr[i] + '</option>');
}
}
// 选择日期
$('#dates').change(function() {
// 调用
formatTodayHalfHours($('#dates option:selected').val());
timeHtml();
// alert("选中的"+$('#dates option:selected').val())
// console.log(dayArr, "选中日期")
})
// 选择时间
$('#times').change(function() {
// 调用
// formatTodayHalfHours($('#times option:selected').val())
alert("选中的" + $('#times option:selected').val())
// console.log(dayArr, "选中日期")
})
</script>
</body>
</html>View Code
小程序uniapp写法:
<uni-forms-item label="预约日期" required name="date">
<view class="addText">
<picker class="pickClass" :range="dayArr" :value="bookingDateIndex" @change="dateChange">
<view class="innerBox">
<view>{{dayArr[bookingDateIndex]}}</view>
<image src="/static/pull.png" mode="widthFix" class="arrDown"></image>
</view>
</picker>
</view>
</uni-forms-item>
<uni-forms-item label="预约时间" required name="date">
<view class="addText">
<picker class="pickClass" :range="timeArr" :value="bookingTimeIndex" @change="timeChange">
<view class="innerBox">
<view>{{timeArr[bookingTimeIndex]}}</view>
<image src="/static/pull.png" mode="widthFix" class="arrDown"></image>
</view>
</picker>
</view>
</uni-forms-item>
export default {
data() {
return {
// 当前所选日期下标
bookingDateIndex: 0,
// 当前所选时间下标
bookingTimeIndex: 0,
// 当前时间
nowTime: new Date(),
// 今年是哪年
nowYear: "",
// 总共年长
year: [],
// 每年几个月
month: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
// 所有日期的数组
dayArr: [],
// 今天的日期
currentDay: "",
// 明年的今天
nextDate: "",
// 时间默认的值
defaultTime: [
"09:00",
"09:30",
"10:00",
"10:30",
"11:00",
"11:30",
"12:00",
"12:30",
"13:00",
"13:30",
"14:00",
"14:30",
"15:00",
"15:30",
"16:00",
"16:30",
"17:00",
"17:30",
"18:00"
],
// 当前的时间组
timeArr: [],
},
onLoad(option) {
this.nowYear = this.nowTime.getFullYear()
this.year = [this.nowYear, this.nowYear + 1];
// 日期
this.handleDay();
// 获取当前时间
this.formatTodayHalfHours(this.getNowFormatDate())
},
methods: {
// 选择日期
dateChange(e) {
// console.log(e.detail.value, this.dayArr[this.bookingDateIndex], "选中日期")
this.bookingDateIndex = e.detail.value;
this.bookingTimeIndex = 0;
this.formatTodayHalfHours(this.dayArr[this.bookingDateIndex])
},
// 时间
formatTodayHalfHours(nowDate) {
this.timeArr = []
// 其他天 截取的如果包含天就去掉
if (nowDate.indexOf("天") > 0) {
// nowDate = nowDate.slice()
let _index = nowDate.indexOf("天")
nowDate = nowDate.slice(0, _index - 2)
}
// 判断是不是今天
if (nowDate == this.getNowFormatDate()) {
let nowDate = new Date()
// 如果是今天的小时是几点8:20
let nowHours = new Date(nowDate).getHours();
let nowMinutes = new Date(nowDate).getMinutes();
// console.log(nowMinutes)
// 测试待删
// nowHours = 1
// nowMinutes = 31
// 如果是今天9点后17点前
if (nowHours >= 9 && nowHours < 17) {
let hour = nowHours < 10 ? '0' + nowHours : nowHours;
let minute = nowMinutes < 30 ? '30' : '00';
// 当前时分
let nowHourMinute = hour + ':' + minute;
if (nowMinutes > 30 || nowMinutes == 30) {
// console.log(nowHourMinute, hour)
nowHourMinute = hour * 1 + 1 + ':' + minute
}
if (this.defaultTime.indexOf(nowHourMinute) > 0) {
this.timeArr = this.defaultTime
let startDayIndex = this.timeArr.indexOf(nowHourMinute);
let endDayIndex = this.timeArr.length;
this.timeArr = this.timeArr.slice(startDayIndex, endDayIndex + 1);
}
} else if (nowHours == 17) {
// 如果是17:30之前
if (nowMinutes < 30) {
this.timeArr = ["17:30", "18:00"]
} else {
this.timeArr = ["18:00"]
}
} else if (nowHours >= 18) {
// 今天大于18点 只能约明天
this.timeArr = ["今日已无预约时间"]
} else if (nowHours < 9) {
this.timeArr = []
// 如果是今天9点之前和以后的每一天
this.timeArr = this.defaultTime
}
} else {
this.timeArr = []
// 如果是今天9点之前和以后的每一天
this.timeArr = this.defaultTime
}
return this.timeArr
},
// 选择时间
timeChange(e) {
this.bookingTimeIndex = e.detail.value;
},
// 获取当前月的天数
mGetDate(year, month) {
var d = new Date(year, month, 0);
return d.getDate();
},
// 获取今天的日期
getNowFormatDate() {
let date = new Date(),
year = date.getFullYear(), // 获取完整的年份(4位)
month = date.getMonth() + 1, // 获取当前月份(0-11,0代表1月)
strDate = date.getDate() // 获取当前日(1-31)
// if (month >= 1 && month <= 9) month = '0' + month // 如果月份是个位数，在前面补0
// if (strDate >= 0 && strDate <= 9) strDate = '0' + strDate // 如果日是个位数，在前面补0
let currentDate = year + "年" + month + "月" + strDate + "日";
return currentDate
},
// 获取明年?今天的日期
getNextFormatDate() {
let date = new Date(),
year = date.getFullYear() + 1, //获取完整的年份(4位)
month = date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
strDate = date.getDate() // 获取当前日(1-31)
// if (month >= 1 && month <= 9) month = '0' + month // 如果月份是个位数，在前面补0
// if (strDate >= 0 && strDate <= 9) strDate = '0' + strDate // 如果日是个位数，在前面补0
let nextDate = year + "年" + month + "月" + strDate + "日";
return nextDate
},
// 获取所有的天数
allDay() {
for (var m = 0; m < this.year.length; m++) {
var tempYear = this.year[m]
for (var n = 0; n < this.month.length; n++) {
var tempMonth = this.month[n]
var days = this.mGetDate(tempYear, tempMonth)
for (var d = 1; d < days; d++) {
var tempDay = days[d];
this.dayArr.push(tempYear + "年" + tempMonth + "月" + d + "日")
}
}
}
return this.dayArr
},
// 处理日期
handleDay() {
// 今天
this.currentDay = this.getNowFormatDate();
// 明年的今天
this.nextDate = this.getNextFormatDate();
this.dayArr = this.allDay();
let startDayIndex = this.dayArr.indexOf(this.currentDay);
let endDayIndex = this.dayArr.indexOf(this.nextDate);
this.dayArr = this.dayArr.slice(startDayIndex, endDayIndex + 1);
this.dayArr[0] = this.dayArr[0] + " 今天";
this.dayArr[1] = this.dayArr[1] + " 明天";
this.dayArr[2] = this.dayArr[2] + " 后天";
return this.dayArr
}
}
}View Code
参考:
小程序uniapp picker组件的写法
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
