9

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();
    });
2
  • Would you be able to create a fiddle demonstrating your issue? jsfiddle.net/ELTfx/6 or jsfiddle.net/HMzt9 might be good starting points because they already have the Keith Wood datepicker included.
    – Trevor
    Dec 9, 2013 at 20:46
  • post you html or create fiddle that would be helpful to solve this, for me it is working fine with version v4.1.0 Dec 13, 2013 at 11:32

3 Answers 3

3
+50

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'
    });
  });
1
  • i found a solution, just want to tell you im not using the normal jquery becouse of the manipulation of the cells, and also not using the popup version. so this snippet is not relevant to my question.
    – ggzone
    Dec 16, 2013 at 16:47
1

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/

4
  • i already set min and max dates. and your code is working for the popup version. but in inline version this is not fixing the problem. but thanks anyway :(
    – ggzone
    Dec 4, 2013 at 12:16
  • How are you submitting the form? normal submit or ajax? Also, Can you post your Javascript snippet?
    – EvilDevil
    Dec 4, 2013 at 12:28
  • Your code works fine. try the fiddle: jsfiddle.net/HL5ap/2 I only had to change the datepicker spell mistake and timestamp values. (Maybe, that is the issue?)
    – EvilDevil
    Dec 4, 2013 at 12:56
  • im not using the normal datepicker plugin i use datepick plugin (keith wood) so its not a spelling mistake. also your code not showing 2 month at once. plase read the question again and look at the screenshots to understand the problem. but thanks anyway for your response!
    – ggzone
    Dec 4, 2013 at 16:24
0

Fixed it on my own by setting the default date to a date of the left month, but adding active CSS-Class to the actual selected date and keeping the correct value in the hidden input field.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.