jQuery Datepick plugin (Keith Wood) How to display only 2 month?

user_1028130 0
Viewed 1838

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

enter image description here

enter image description here

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();
    });
datepicker jquery-ui jquery
3 Answers

Documentation: http://jqueryui.com/datepicker/#min-max

Set the beginning and end dates as

  • actual dates (new Date(2009, 1 - 1, 26)),
  • as a numeric offset from today (-20),
  • as a string of periods and units ('+1M +10D').

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/

user_29868550
Related