I am using the jQuery UI datepicker and I have a button that changes the selected date forward by one day and a button that changes the selected date backwards by one day. Right now, my "previous day" button works just fine. If click my previous button several times and then click my "next day" button, it only increments the date once. For example, if the datepicker is set to 1/10/2014 and I click the "next day" button, it will be updated to 1/11/2014 but if I click it again, nothing will happen. If I click the "next day" button without first clicking the "previous day" button it will work just fine. Here is my jQuery:

var currentDay = new Date();
var nextDay = new Date();
var previousDay = new Date();

$('.next-day').each(function() {
    $(this).on("click", function () {

        if (previousDay < currentDay) {
            nextDay.setDate(previousDay.getDate() + 1);
        } else {
            nextDay.setDate(nextDay.getDate() + 1);
        }

        $('#to').datepicker("setDate", nextDay);
        $('#from').datepicker("setDate", nextDay);
    });
});

Edit: Here is a jsFiddle /

I am using the jQuery UI datepicker and I have a button that changes the selected date forward by one day and a button that changes the selected date backwards by one day. Right now, my "previous day" button works just fine. If click my previous button several times and then click my "next day" button, it only increments the date once. For example, if the datepicker is set to 1/10/2014 and I click the "next day" button, it will be updated to 1/11/2014 but if I click it again, nothing will happen. If I click the "next day" button without first clicking the "previous day" button it will work just fine. Here is my jQuery:

var currentDay = new Date();
var nextDay = new Date();
var previousDay = new Date();

$('.next-day').each(function() {
    $(this).on("click", function () {

        if (previousDay < currentDay) {
            nextDay.setDate(previousDay.getDate() + 1);
        } else {
            nextDay.setDate(nextDay.getDate() + 1);
        }

        $('#to').datepicker("setDate", nextDay);
        $('#from').datepicker("setDate", nextDay);
    });
});

Edit: Here is a jsFiddle http://jsfiddle.net/p2T2g/

• javascript
• jquery
• jquery-ui
• datepicker

• Can you re-create this with a jsFiddle? – j08691 Commented Jan 16, 2014 at 17:23
• I added the link to the op. – user715564 Commented Jan 16, 2014 at 17:36

2 Answers 2

It's not that hard, something like

$('.next-day').on("click", function () {
    var date = $('#picker').datepicker('getDate');
    date.setTime(date.getTime() + (1000*60*60*24))
    $('#picker').datepicker("setDate", date);
});

$('.prev-day').on("click", function () {
    var date = $('#picker').datepicker('getDate');
    date.setTime(date.getTime() - (1000*60*60*24))
    $('#picker').datepicker("setDate", date);
});

FIDDLE

Above solution isn't quite right when you factor in Daylight Savings - E.g. country like UK you'll be 1 hour short, better to do below for 1 day increment -

    $('.next-day').on("click", function () {
        var date = $('#picker').datepicker('getDate');
        date.setDate(date.getDate() + 1)
        $('#picker').datepicker("setDate", date);
    });