JQuery UI Datepicker newDate minus 2 months

Question

I have been searching everywhere but can't seem to find a solution to this problem.

I need to set the datepickers input value to today's date minus 2 months.

I am using the following code to display today's date by default in the input field...

jQuery(function () {
jQuery("#datepicker").datepicker({
    dateFormat: 'dd-mm-yy'
});
var day = new Date();
var month = day.getMonth() + 1;
var date = day.getDate() + '-' + month + '-' + day.getFullYear();
jQuery("#datepicker").val(date);
});

Is there a way it can show 2 months prior?

Any help would be much appreciated.

Solution 1

Set the defaultDate option: http://jqueryui.com/demos/datepicker/#option-defaultDate

jQuery(function ($) {
    var day         = new Date(),
        year        = ((day.getMonth() - 2) < 0) ? (day.getFullYear() - 1) : day.getFullYear(),
        month       = ((day.getMonth() - 2) < 0) ? (12 + (day.getMonth() - 2)) : (day.getMonth() + 1),
        date        = day.getDate() + '-' + month + '-' + year;
    $('#datepicker').datepicker({
        dateFormat  : 'dd-mm-yy',
        defaultDate : '-2m'
    }).val(date);
});

Here is a demo: http://jsbin.com/ezuxen/edit#javascript,html,live

Here is a quick run-down of some of the changes I made to your code:

1. I passed in $ to the document.ready event handler so it can be used inside the event handler.
2. The date now sets itself to two months ago with some conditional statements that check if two months ago was a different year.
3. I chained the calls to the $('#datepicker') jQuery object so it didn't have to be selected more than once.
4. I also comma separated your variable declarations rather than re-using the var statement back-to-back-to-back-to...

Note that if the current date is the 31st and two months ago does not have 31 days this will probably create an issue for this code. August is the only month that has 31 days and two months prior does not (June has 30 days).

Solution 2

Try this:

var d = new Date();
d.setMonth(d.getMonth() - 2);
$("#datepickerselector").datepicker('setDate',d);

Hope this helps.

Comments

[Palle]

That works... however it doesn't prepopulate the input field?

[Jasper]

@Palle Check-out the demo, it pre-populates; which is important because the jQuery UI Datepicker will default to the date inside the input. I updated my code a few minutes ago, so check-it-out.

[Palle]

Wow... that was quick. Thank you for your help. It works great except it only works if the date falls in the previous year. Changing the system time to next month and it shows next month, not January? Any ideas?

[Jasper]

@Palle If you want to decrease the output for the month if two months ago is in the same year, then change: : (day.getMonth() + 1), to: : (day.getMonth()),. Removing the addition of one should do it.

[Jasper]

@Palle If you feel that this answer helped you with your question, an up-vote or accepted-answer would be appreciated. Have a good one.