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();
});
What about this using native jquery ui
Demo 1 http://jsfiddle.net/9Uabd/1/embedded/result/
Demo 2 http://jsfiddle.net/9Uabd/2/embedded/result/
$(function() {
$( "#datepicker" ).datepicker({
numberOfMonths: 3,
showButtonPanel: true,
minDate: '05/09/2014', // 9th May 2014 00:00:00
maxDate: '06/15/2014'
});
});
Documentation: http://jqueryui.com/datepicker/#min-max
Set the beginning and end dates as
If you know your date range, try using absolute dates
$("#datepicker").datepicker({
changeYear: false,
minDate: new Date(2014, 1 - 1, 1),
maxDate: new Date(2014, 2 - 1, 28)
});
Herez a fiddle: http://jsfiddle.net/HL5ap/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With