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

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

如何处理datepicker中的下一个和上一个按钮

2 个答案: