jQuery PickMeUp datepicker: disable array of dates

Question

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                         
                }
            }                           
        }); 
    });

Say you have an array arDates of Dates, each one with .valueOf() instead of the objects, what happens if you say disabled: arDates.indexOf(date.valueOf()) != -1 in last line ? — Niloct
– Niloct, Commented Feb 17, 2014 at 23:45
Ok... how would I write the array? Like this? var arDates = ["2014-02-14","2014-02-11","2014-02-10"]; — ss888
– ss888, Commented Feb 18, 2014 at 0:01
Instead of date strings, set e.g. new Date("2014-02-14").valueOf() for first one. Does your calendar have time too ? Try this first. — Niloct
– Niloct, Commented Feb 18, 2014 at 0:09

Niloct · Accepted Answer · 2014-02-18 00:22:31Z

2

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.

answered Feb 18, 2014 at 0:22

Niloct

10.1k3 gold badges47 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jean-Paul · Accepted Answer · 2015-07-12 15:07:39Z

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

Collectives™ on Stack Overflow

jQuery PickMeUp datepicker: disable array of dates

jQuery

Update

2 Answers 2

Comments

DEMO

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

jQuery

Update

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related