Geek asks and answers

JQuery PickMeUp datepicker: disable date array

I am using jQuery datepicker plugin called PickMeUp .

The datapicker works for me, but I can’t decide how to disable the dates in it. My plan is to have an array of dates to be disabled on the datepicker calendar.

I managed to disable a single 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 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                         
                }
            }                           
        }); 
    });
+3
source share
2 answers

Ok, just spelling it out:

valueOf() Date , ( 01/01/1970).

indexOf() - Array, , .

, , :

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

. : new Date("2014-02-17") 17 . 3 - .

+2

, , . , PickMeUp ; . , , . , PickMeUp , .

Javascript/jQuery , :

// 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();

CSS, :

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

DEMO

+1

More articles:


All Articles