Как обрабатывать следующую и предыдущую кнопку в datepicker

Question

Я строю дампикер с моим стилем, и до сих пор он работает так хорошо. Он возвращает семь дней в день, а дата начала - текущая дата.

Теперь я хочу, когда пользователь нажимает кнопку Далее, она показывает следующие семь даты, и если пользователь нажимает кнопку предыдущей, она показывает обратно 7 семь дат. Как я могу это сделать с помощью javascript? У меня уже есть список дня в году. У вас есть идеи?

Answer 1

Вы должны сохранить переменную, указывающую текущей неделе, что отображается в вашем списке. Каждое нажатие на кнопки next/previous должно увеличивать/уменьшать эту переменную.

Эта переменная может содержать объект Date, ссылающийся на первый день недели. т.е.

function getCurrentWeek() { 
    var dt = new Date(); 
    if (dt.getDay() !== 0) { 
    dt.setDate(dt.getDate() - dt.getDay()); 
    } 
    return dt; 
} 

function incrementWeeks (week, howMany) { 
    var next = new Date(week); // Copy it, to not modify original variable 
    next.setDate(next.getDate() + 7 * (howMany == undefined ? 1 : howMany)); 
    return next; 
} 

Теперь eveytime вы нажмете на кнопку, чтобы показать список дней - просто генерировать дни динамически на основе текущей недели.

Это может выглядеть примерно так:

var currentWeek = getCurrentWeek(); 

var dayStrings = ['su', 'ma', 'ti', 'ke', 'to', 'pe', 'la']; 

document.getElementById('next-button').addEventListener('click', function() { 
    currentWeek = incrementWeeks(currentWeek, 1); 
}); 

document.getElementById('previous-button').addEventListener('click', function() { 
    currentWeek = incrementWeeks(currentWeek, -1); 
}); 

document.getElementById('show-week-button').addEventListener('click', function() { 

    var select = document.getElementById('show-week-select'); 
    select.innerHTML = ''; 

    for (var dt = currentWeek, next = incrementWeeks(dt, 1); 
     +dt < +next; 
     dt.setDate(dt.getDate() + 1)) { 

    var option = document.createElement('option'); 
    option.text = dayStrings[dt.getDay()] + ' ' + dt.getDate() + '.' (dt.getMonth() + 1) + '.' + dt.getFullYear(); 
    option.value = +dt; 
    select.options.add(option); 
    } 

    // Show the SELECT 
    // `click()` may not work, so you can try this (http://stackoverflow.com/questions/249192/how-can-you-programmatically-tell-an-html-select-to-drop-down-for-example-due) 
    // or use a js-based dropdown 
    // or just listen to when the select element opens instead of a simple click 
    select.click(); 
}); 

Этот код тестировался. Надеюсь, вы поняли эту идею.

Answer 2

Основываясь на идее Даниила, я пишу функцию, возвращающую дни недели с двумя параметрами: количество кликов и текущий год.

function getDaysOfAweek(clickQty, daysofyear) { 
     var aweek = new Array(); 
     if(clickQty * 7 > daysofyear.length){ 
      for(i=0; i < 7; i++){ 
       aweek.push(daysofyear[i]); 
      } 
     } else { 
      for (var i = 7*(clickQty-1); i < clickQty*7; i++) { 
       if (typeof daysofyear[i] === "object") { 
        aweek.push(daysofyear[i]); 
       } 
      } 
     } 
    return aweek; 
} 

функция getDayOfYear

function getDaysOfYear(year) { 
    var currentDate = new Date(); 
    var days = new Array(); 

    while(currentDate.getMonth() < 12 && currentDate.getYear() <= year){ 
     days.push(getPaivaObj(currentDate)); 
     currentDate.setDate(currentDate.getDate()+1); 
    } 
    return days; 
} 

И последний шаг рассчитывать только нажмите количество, надеюсь, что это поможет для кого-то, кто получить тот же вопрос со мной.