如何處理日期選擇器中的下一個和上一個按鈕

Question

我正在用我的風格構建一個日期選擇器，直到現在它工作得非常好。它每次返回七天，開始日期是當前日期。

現在我想，當用戶點擊下一步按鈕，它顯示接下來的七個日期，如果用戶單擊後退按鈕，顯示它回7個7日期。我怎樣才能使用JavaScript？我已經得到了一整年的名單。你們有什麼想法嗎？

Answer 1

您必須保留一個變量，指出您的列表正在顯示的當前周。 每按一下next/previous按鈕應增加/減少該變量accrodingly。

該變量可能包含引用一週中第一天的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; 
} 

而最後一步只能算點擊量，希望能幫助的人，誰得到同樣的問題我。