我想要生成多选择按钮的每一个未来小时的一天，直到晚上9点，并显示在30分钟的增量。 例如，如果用户的时间是下午4:45，则用户应该看到以下按钮的列表:下午5:00，下午5:30，下午6:00，下午6:30，下午7:00，下午7:30.。。 直到晚上9点。
所以是12小时的格式，而不是24小时的格式。 这在表单中用于客户希望何时交付服务。 他们应该能够从这些按钮中选择尽可能多的选项。
到目前为止，我所掌握的情况如下:
const timeOptions = [
5,
6,
7,
8,
8,
10,
11,
12,
13,
14,
15,
16,
17,
18,
19,
20,
21,
]
let now = new Date();
let currentHour = now.getHours();
let currentMinute = now.getMinutes();
let availableTimes = [];
for (const time of timeOptions) {
if (time > currentHour) {
availableTimes.push(time);
}
}
$('#repairFormContainer').append('<div id="time-choices"></div>');
let count = 0;
for (const time of availableTimes) {
if (count === 0 || time === 13) {
count += 1;
createTimeButtonGroup();
}
$('#time-choices-group').append(
`
<label class="time-button btn btn-secondary">
<input type="checkbox" id=${time}>${time}
</label>
<label class="time-button btn btn-secondary">
<input type="checkbox" id="${time}:30">${time}:30
</label>
`
)
}
const createTimeButtonGroup = () => {
$('#time-choices').append('<div id="time-choices-group" class="btn-group btn-group-toggle"
data-toggle="buttons"></div>')
}
添加函数getTimeString并将其用作getTimeString(time，'')&； getTimeString(time，':30')。
你可以在下面查一下。
null
const timeOptions = [5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21];
const createTimeButtonGroup = () => {
$('#time-choices').append('<div id="time-choices-group" class="btn-group btn-group-toggle" data-toggle="buttons"></div>')
}
const getTimeString = (time, minutes) => {
if(time >= 13) {
return `${time%12}${minutes} PM`
} else if (time == 12){
return `12${minutes} PM`
}
return `${time}${minutes} AM`
}
let now = new Date();
let currentHour = now.getHours();
let currentMinute = now.getMinutes();
let availableTimes = [];
for (const time of timeOptions) {
if (time > currentHour) {
availableTimes.push(time);
}
}
$('#repairFormContainer').append('<div id="time-choices"></div>');
let count = 0;
for (const time of availableTimes) {
if (count === 0 || time === 13) {
count += 1;
createTimeButtonGroup();
}
$('#time-choices-group').append(
`
<label class="time-button btn btn-secondary">
<input type="checkbox" id=${time}>${getTimeString(time, '')}
</label>
<label class="time-button btn btn-secondary">
<input type="checkbox" id="${time}:30">${getTimeString(time, ':30')}
</label>
`
)
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div id="repairFormContainer"></div>