Вывести указанные дни текущей недели с пропуском прошедших

Задача такая: у меня есть кнопка в атрибуте которой указны дни недели и время приема пациентов. При нажатии на кнопку нужно вывести все дни недели у которых есть время, НО! не выводить дни прошедшие и отобразить дни будущие. Т.е. у меня заполнены в кнопке все дни + сегодня четверг (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 шт):

Автор решения: ksa

Короче, чтобы всегда выводилось 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 вместо объекта писать массив - будет еще короче. ;)

→ Ссылка