Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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();
    });
like image 896
ggzone Avatar asked Dec 04 '13 11:12

ggzone


2 Answers

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'
    });
  });
like image 118
Dev Avatar answered Nov 15 '22 02:11

Dev


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/

like image 32
EvilDevil Avatar answered Nov 15 '22 01:11

EvilDevil