JQuery Datepicker date range and months

Question

I would like to show number of months shown based on the number of selectable days.

So an example would be that if I have 15 days to select from and the date starts from today (23/04/2013) I would like only April and May to be shown as number of months shown to select from.

Similarly, if the number of selectable days 60 I would like to show April, May and June as the the number of months shown.

So in essence how do I make number of months shown is conditional to the number of selectable days?

Many thanks in advance.

my plugin

$.fn.showCalendar = function(options){
    var defaults ={
        selector : "#date-selector",
        calendarIcon : "./images/icons/calendar.gif",
        numberOfSelectableDays : "+60D",
        dateFormat: "dd/mm/yy",
        numberOfMonths : 3,
        daySelector : "#day",
        monthSelector : "#month",
        yearSelector : "#year"
    }

    var $this = $(this);
    var params = $.extend({},defaults, options);

    var getDateFromDropDowns = function(){
         var dateOnDropDowns =  new Date($(params.daySelector).val(),$(params.monthSelector).val(),$(params.yearSelector).val());
         return  dateOnDropDowns;
    }


    return $this.each(function(){
        $this.datepicker({
            showOn: "button",
            buttonImage: params.calendarIcon,
            minDate: 0,
            maxDate: params.numberOfSelectableDays,
            dateFormat: params.dateFormat,
            buttonImageOnly: true,
            numberOfMonths: params.numberOfMonths,
            setDate : getDateFromDropDowns,
            onClose: function(dateText, inst) {
                $(params.yearSelector).val(dateText.split('/')[2]);
                $(params.daySelector).val(dateText.split('/')[0]);
                $(params.monthSelector).val(dateText.split('/')[1]);
            }
        });
    });
},

I will suggest to show code related to Question here. instead of link to other question — rahul maindargi, Apr 23 '13 at 15:54

rahul maindargi · Answer 1 · 2013-04-23T16:47:59.453

0

Updates as per comment To Update number of Months to be shown at a time on screen
you can use this code o calculate the number of months

var d = new Date(); 
var n = d.getDate(); 
var total=n+60; 
var numberOfMonthsVal=Math.floor(total/30)+1;

and in $this.datepicker({ use numberOfMonths:numberOfMonthsVal

With JQuery UI Date Picker

$(function() {
    $( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +10D" }); // Thiw will sow the dates Today -20 to today + 1 Month +10 days
});

In Your case you want to show say next 60 days from today?

$(function() {
    var day=new Date();
    $( "#datepicker" ).datepicker({ minDate: day, maxDate: (day+60) }); 
});

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

So in your plugin when you are calling $this.datepicker({ pass below values

        minDate: myDate,
        maxDate: (myDate+60)

where mydate is actual Date object like var mydate=new Date();

edited Apr 23 '13 at 16:47

answered Apr 23 '13 at 16:07

rahul maindargi

5,359
2
16
23

It's the number of Months shown to the user on the same screen next to each other at a given point that I'm after. I think you may have misunderstood the question. Thanks for looking though :) – Dev Apr 23 '13 at 16:21
Then you can clauclate the `numberOfMonths` something like this... `var d = new Date(); var n = d.getDate(); var total=n+60; // 60 o 15 the days you want to add var numberOfMonths=(total/30)+1; ` – rahul maindargi Apr 23 '13 at 16:41
I ended up writing this myself using few custom functions. Thanks for you help :) – Dev Apr 24 '13 at 10:30

JQuery Datepicker date range and months

1 Answers1