js和uniapp获取今天的当前时间和以后半小时, 文本框的日期和时间联动, 时间半小时为阶段
需求:
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>
小程序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
}
}
}
参考:
小程序uniapp picker组件的写法https://blog.csdn.net/qq_40007317/article/details/125721938
