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

【问题标题】：How to handle next and previous button in datepicker如何处理日期选择器中的下一个和上一个按钮
【发布时间】：2016-12-04 14:40:13
【问题描述】：

我正在用我的风格构建一个日期选择器，直到现在它工作得非常好。它每次返回 7 天，开始日期为当前日期。

现在我想当用户单击下一个按钮时，它显示下一个七个日期，如果用户单击上一个按钮，它显示返回 7 个七个日期。我怎么能用javascript来做到这一点？我已经有了全年的一天的清单。你们有什么想法吗？

【问题讨论】：

标签： javascript datepicker

【解决方案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;
}

现在每次点击按钮以显示天数列表 - 只需根据当前周动态生成天数。

这可能看起来像这样：

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

此代码未经测试。我希望你能明白。

【讨论】：

谢谢，这段代码很难理解，但最重要的是我知道接下来要做什么，再次感谢。

【解决方案2】：

基于 Daniel 的想法，我编写了一个返回星期几的函数，带有两个参数：点击数量和当前年份。

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

最后一步只计算点击量，希望对和我有同样问题的人有所帮助。

【讨论】：