Is there a way to display only 2 months in a datepicker? What I already set up is the datepicker as inline version showing 2 months and hiding the month navigation. On selecting the date, the form submits and default date is set to the selected date. This works fine.
The problem is, when a date from second month is clicked, selected date is set as default date. But now, second and third months are active instead of first and second months.
Example: Initially, only May 2014 and June 2014 are shown. When user clicks 4th June 2014, form submits and now 'June and July' are shown instead of 'May and June'.
I already tried setting monthOffset and dateRanges (minDate, maxDate). Did not fix my problem.
EDIT: Made two screenshots to show you the problem
And Here is the JS:
//program: overview datepicker
var dpInputField = $('input#program-overview-datepicker-value');
var defaultDate = (dpInputField.val() == '') ? '1399593600' : dpInputField.val(); // 1399593600 = 9th May 2014 00:00:00
$('div#program-overview-datepicker').datepick({
dateFormat: $.datepick.TIMESTAMP,
monthsToShow: 2,
changeMonth: false,
altField: '#program-overview-datepicker-value',
minDate: '1399593600', // 9th May 2014 00:00:00
maxDate: '1402790400', // 15th June 2014 00:00:00
onDate: showDayAndMonth,
defaultDate: defaultDate,
}, $.extend($.datepick.regional[window.language]));
function showDayAndMonth(date) {
var dayName = $.datepick.formatDate('D', date);
var dateName = date.getDate();
var monthName = $.datepick.formatDate('M', date);
return {content: '<div class="day">'+dayName+'</div><div class="date">'+dateName+'</div><div class="month">'+monthName+'</div>', dateClass: 'showDAM'};
}
$('a.showDAM').click(function(e){
$('#programoverview form').submit();
});