如何处理日期选择器中的下一个和上一个按钮

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; 
} 

而最后一步只能算点击量，希望能帮助的人，谁得到同样的问题我。