Вывести указанные дни текущей недели с пропуском прошедших
Задача такая: у меня есть кнопка в атрибуте которой указны дни недели и время приема пациентов. При нажатии на кнопку нужно вывести все дни недели у которых есть время, НО! не выводить дни прошедшие и отобразить дни будущие. Т.е. у меня заполнены в кнопке все дни + сегодня четверг (15.08), значит прошедшие среду, вторник и понедельник мы пропускаем, но выводим после воскресенья остаток дней. Короче, чтобы всегда выводилось 7 дней, но не прошедшие.
А суть всей это истории в том, чтобы можно было сделать заявку на сайте с выбором даты и временем.
function getDayID(name)
{
if (name == 'monday') {
return 1;
} else if (name == 'tuesday') {
return 2;
} else if (name == 'wednesday') {
return 3;
} else if (name == 'thursday') {
return 4;
} else if (name == 'friday') {
return 5;
} else if (name == 'saturday') {
return 6;
} else if (name == 'sunday') {
return 7;
}
}
$(document).on('click', '.btn-about', function() {
$('#timetable-list').text('');
var time = $(this).attr('data-time');
$.each(JSON.parse(time), function(key, val) {
if (val != null) {
getDays(getDayID(key), val);
}
})
})
function getDays(day = 1, time = '')
{
let start = moment();
let end = moment().add(14 , 'd');
var arr = [];
let tmp = start.clone().day(day);
if( tmp.isAfter(start, 'd') ){
arr.push(tmp.format('DD.MM.YYYY'));
}
tmp.locale('ru');
$('#timetable-list').append('<h2 data-time="'+time+'">'+tmp.format('DD.MM.YYYY')+'</h2><ul><li class="text-dark">'+time+'</li></ul>');
}
<script src="https://momentjs.com/downloads/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<button type="button" class="btn btn-med btn-standart btn-about" data-id="1" data-time='{"monday":"17:30, 12:10", "tuesday":"9:15", "wednesday":"9:15", "thursday":"11:00", "friday":"11:00", "saturday":"14:00", "sunday":"14:00"}'>О враче</button>
<div id="timetable-list"></div>
Ответы (1 шт):
Короче, чтобы всегда выводилось 7 дней, но не прошедшие.
Предложу такой вариант...
const inf = [
'sunday',
'monday',
'tuesday',
'wednesday',
'thursday',
'friday',
'saturday',
]
$(document).on('click', '.btn-about', function() {
$('#timetable-list').text('');
let time = $(this).attr('data-time');
time = JSON.parse(time)
const n = 7
const dt = new Date
for (let i = 0; i < n; i++) {
dt.setDate(dt.getDate() + 1)
let v = dt.getDay()
v = inf[v]
v = time[v]
write(dt, v)
}
})
function write(day, time) {
let d = day.toISOString().split('T')[0]
d = d.replace(/(\d+)-(\d+)-(\d+)/, '$3.$2.$1')
const s = `<h2 data-time="${time}">${d}</h2><ul><li class="text-dark">${time}</li></ul>`
$('#timetable-list').append(s);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<button type="button" class="btn btn-med btn-standart btn-about" data-id="1" data-time='{"monday":"17:30, 12:10", "tuesday":"9:15", "wednesday":"9:15", "thursday":"11:00", "friday":"11:00", "saturday":"14:00", "sunday":"14:00"}'>О враче</button>
<div id="timetable-list"></div>
А если в data-time
вместо объекта писать массив - будет еще короче. ;)