How to handle next and previous button in datepicker

Question

I'm building a datepicker with my style and until now it works so nice. It returns seven days per time and start date is the current date.

Now i want when user click the next button, it show next seven date and if user click previous button, it show back 7 seven dates. How can i do it using javascript? I've already got list of day all year. Do you guys have any idea?

score 1 · Answer 1 · answered Dec 04 '16 at 15:11

You have to keep a variable indicating the current week that your list is showing. Every hit on the next/previous buttons should increment/decrement that variable accrodingly.

The variable could contain a Date object referencing the first day of week. i.e.

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

Now eveytime you hit the button to show the list of days - just generate the days dynamically based on the current week.

This could look something like this:

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

This code is untested. I hope you get the idea.

Thanks man, this code is quite difficult to understand but the most important that i know what i'm doing next, thanks again. — Thịnh Kều, Dec 04 '16 at 15:22

score 0 · Answer 2 · answered Dec 04 '16 at 15:32

Base on Daniel's idea, i write a function that return days of week with two parameters: click quantity and current year.

    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

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

And the last step only count click quantity, hope it help for someone, who get same issue with me.

How to handle next and previous button in datepicker

2 Answers2