CODEWITHSUNDEEP
jquerydatepicker
ss888
ss888

Reputation: 1748

jQuery PickMeUp datepicker: disable array of dates

I'm using a jQuery datepicker plugin called PickMeUp.

I have the datepicker working but can't work out how to disable dates in it. My plan is to have an array of dates that would be disabled on the datepicker calendar.

I did manage to disable one date using the documentation from a previous version of the plugin, (http://www.eyecon.ro/datepicker/), but I can't figure out how to add an array of dates to it.

jQuery

    $(document).ready(function(){   
        var now2 = new Date();
        now2.addDays(-1);
        now2.setHours(0,0,0,0);
        $('input#cdate').pickmeup({
        position  : 'right',                                        
            mode      : 'range',                        
            render: function(date) {
                return {
                    disabled: date.valueOf() == now2.valueOf()                          
                }
            }                           
        }); 
    });

Update

Below is the working code. (Many, many thanks to Niloct)

    $(document).ready(function(){   
        var arDates = [new Date("2014-02-14").valueOf(),new Date("2014-02-11").valueOf(),new Date("2014-02-09").valueOf()];
        $('input#cdate').pickmeup({
        position  : 'right',                                        
            mode      : 'range',                        
            render: function(date) {
                return {
                    disabled: arDates.indexOf(date.valueOf()) != -1                         
                }
            }                           
        }); 
    });

Upvotes: 3

Views: 2081

Answers (2)

Jean-Paul
Jean-Paul

Reputation: 21180

You've clearly already solved this issue but, for future reference, here's a little extension to the problem in which also a new class is added to the array of dates. This because PickMeUp's default color-scheme for disabled dates is black; this makes it hard to see them. Besides, I've included a little hack to deselect the current date. This because, by default, PickMeUp selects the current date and this might not be desirable.

The following Javascript/jQuery achieves what you want:

// Creating some 'sample' dates 
var datesArray = [];
var d = new Date();
for (i = 2; i < 7; i++) {
    var tempDay = new Date(); tempDay.setHours(0,0,0,0);
    tempDay.setDate(d.getDate()+i);
    datesArray.push(tempDay.getTime());
}

$(function () {
    $('.multiple').pickmeup({
        flat: true,
        mode: 'multiple',
        // Before rendering each date, deselect dates if in the array
        render: function(date) {
            if ($.inArray(date.getTime(), datesArray) > -1){
                return {
                    disabled   : true,
                    class_name : 'disabled'
                }
            }
        }
    });
});
// Little hack to deselect current day: PickMeUp forces you to have a default date :(
$('.pmu-today').click();

With the following CSS to make it look more intuitive:

.disabled {
    color: #5C5C8A !important;
    background: #000033;
}

DEMO

Upvotes: 1

Niloct
Niloct

Reputation: 10015

Ok, just writing it down:

valueOf() is one of the methods of Date object that gets the number of milliseconds in a date (since 01/01/1970).

indexOf() is a method of the Array object that checks if an element is a member of an array.

So your first code is spot on, also you got the tweaks:

var arDates = [new Date("2014-02-14").valueOf(),new Date("2014-02-11").valueOf(),new Date("2014-02-09").valueOf()];

disabled: arDates.indexOf(date.valueOf()) != -1

What you may face is issues with timezones. For instance: new Date("2014-02-17") for me does not create a date in Feb 17th. It falls back 3 hours due to my timezone.

Upvotes: 2

Related Questions