Take the 2-minute tour ×

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';

    $("#numField").live('click', function () {
    function setDatePicker() {
        handle =  $('#multimonth')
                createButton: false,
                inline: true,
                closeOnSelect: false,
                selectMultiple: true,
                numSelectable: $("#numField").val()==""?3:$("#numField").val()
            function () {
                return false;
            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(",");


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

share|improve this question
aren't you using juery ui datepicker? if not please explain a bit more and also add html code a bit –  Santosh Linkha Mar 4 '11 at 5:01

1 Answer 1

up vote 3 down vote accepted

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:


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).

share|improve this answer
Great answer including advice on how to figure out the solution to similar problems by yourself... –  vitch Mar 4 '11 at 10:04
@vitch: Thanks, much appreciated. Use the source Luke! –  mu is too short Mar 4 '11 at 20:27
thanks it worked for me. now what i want is how i can clear selected dates after calling dpSetNumSelectable(integar) –  Muhammad Adeel Zahid Mar 5 '11 at 5:35
@Muhammad Adeel Zahid: Have a look at dpSetSelected in the public API, that ends up calling setSelected to do the real work. You should be able to call setSelected directly inside your setNumSelectable function. –  mu is too short Mar 5 '11 at 7:42

Your Answer


