CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-datepicker
orszaczky
orszaczky

Reputation: 15675

Navigating between months on jquery datepicker via external buttons

I have to add extra functionality to a jQuery UI Datepicker's titlebar. The easiest way seems to be creating a separate external titlebar, and use it to control the datepicker's month stepper function with external buttons (while hiding the original titlebar).

Currently I can only do it by changing the date, but I want to be able to step to the next month without actually changing the date, just like DatePicker's built in month stepper buttons:

current html:

<div id="datepicker"></div>
<br/>
<button id="prev">Previous Month</button>&nbsp;
<button id="next">Next month</button>

current js:

$('#datepicker').datepicker();

$('#next, #prev').on('click', function(e) {
    var date = $('#datepicker').datepicker('getDate');
    e.target.id == 'next' ? date.setMonth(date.getMonth()+1) : date.setMonth(date.getMonth()-1);
    $('#datepicker').datepicker('setDate', date );
});

Is there a better way to step months externally?

http://jsfiddle.net/KFbZy/1/

Upvotes: 2

Views: 2939

Answers (1)

Irvin Dominin
Irvin Dominin

Reputation: 30993

In the standard usage of the datepicker the right-left arrows at the top of the datepicker allows you to go to the next-prev month.

But if you want to fire the next-prev month you can trigger a click on the standard buttons, so the behaviour will be same of the default funcionality.

Code:

$('#next, #prev').on('click', function(e) {
    $('.ui-datepicker-'+e.target.id).trigger("click");
});

Demo: http://jsfiddle.net/IrvinDominin/5Dcg3/

Upvotes: 2

Related Questions