Question

I have an inline calender that is configured to allow multiple date selection. I want to set number of selectable fields to be set dynamically based on value of a text box. here is my js code

var handle;
    $(function () {
        Date.format = 'yyyy-mm-dd';
        setDatePicker();
    });

    $("#numField").live('click', function () {
        setDatePicker();
    });
    function setDatePicker() {
        //$("#multimonth").destroy();
        handle =  $('#multimonth')
        .datePicker(
            {
                createButton: false,
                inline: true,
                closeOnSelect: false,
                selectMultiple: true,
                numSelectable: $("#numField").val()==""?3:$("#numField").val()
            }
        )
        .bind(
            'click',
            function () {
                $(this).dpDisplay();
                this.blur();
                return false;
            }
        )
        .bind(
            'dateSelected',
            function (e, selectedDate, $td, state, selectedDates) {
                var dotes = $('#multimonth').dpGetSelected();
                for (i = 0; i < dotes.length; i++) {
                    dotes[i] = dotes[i].asString();
                }
                var dates = dotes.join(",");
                alert(dates);
                $("#hiddenDate").val(dates);
            }
        )

    }

I have an input field with id = “numField” and want to change numSelectable parameter of datepicker on change event of my input field. I can’t find any method in its API. thanks in advance

Answer 1

There isn’t anything in the API to change numSelectable but you could add such a thing yourself without that much effort.

If you look at the source, you’ll see a bunch of dp* functions defined in an object literal:

dpSetDisabled : function(s)
{
    //...
},
dpSetStartDate : function(d)
{
    //...
},
// ...

So just add this one to the list:

dpSetNumSelectable: function(n) {
    return _w.call(this, 'setNumSelectable', n);
}

Then, further down, you’ll see where setStartDate, setEndDate, etc. are defined in another object literal so just add your setNumSelectable definition to that list:

setNumSelectable: function(n) {
    if(n <= 0) {
        // Sanity checking is left as an exercise for the reader.
    }
    if(this.numSelected > n) {
        // What to do in this case is also left as an exercise for
        // the reader. All the pieces you need to do something sensible
        // here are available and nearby in the source.
    }
    this.numSelectable = n;
}

Then, you should be able to do this as needed to change the numSelectable option:

$('#multimonth').dpSetNumSelectable(some_integer);

Don’t be afraid to study and modify the source code of the tools you use, that’s the point of open source software after all. You could even send the author a patch which adds your desired functionality and thus help other people as they helped you (which is another point of open source software).