How to Blackout Specific Dates Across Multiple jQueryUI Datepickers

Question

I want to blackout specific dates (e.g. 5-20-2015 to 5-25-2015) on four different JQuery datepickers on a single page. What is the easiest way (lightweight) to go about this?

HTML

<label>Date Picker 1</label><input type="text" id="datepicker" name="Datepicker" style="border-radius:5px; font-family: sans-serif; color:#333; font-size:14px; margin-bottom:5px;">

<label>Date Picker 2</label><input type="text" id="datepicker22" name="Datepicker2" style="border-radius:5px; font-family: sans-serif; color:#333; font-size:14px; margin-bottom:5px;">

<label>Date Picker 3</label><input type="text" id="datepicker3" name="Datepicker3" style="border-radius:5px; font-family: sans-serif; color:#333; font-size:14px; margin-bottom:5px;">

<label>Date Picker 4</label><input type="text" id="datepicker4" name="Datepicker4" style="border-radius:5px; font-family: sans-serif; color:#333; font-size:14px; margin-bottom:5px;">

jQuery

<script>
$(function() {
$( "#datepicker" ).datepicker({
        minDate:3,
        maxDate:180,
        dateFormat:"DD, d MM, yy",
        changeMonth:true,
        showButtonPanel:true
    });
});
 $(function() {
$( "#datepicker2" ).datepicker({
        minDate:3,
        maxDate:180,
        dateFormat:"DD, d MM, yy",
        changeMonth:true,
        showButtonPanel:true
    });
});
 $(function() {
$( "#datepicker3" ).datepicker({
        minDate:3,
        maxDate:180,
        dateFormat:"DD, d MM, yy",
        changeMonth:true,
        showButtonPanel:true
    });
});
 $(function() {
$( "#datepicker4" ).datepicker({
        minDate:8,
        maxDate:180,
        dateFormat:"DD, d MM, yy",
        changeMonth:true,
        showButtonPanel:true
    });
});
 </script>

Code for original datepicker here: https://jqueryui.com/datepicker/

you may find the answer here http://stackoverflow.com/questions/15400775/jquery-ui-datepicker-disable-array-of-dates — mehany, Apr 09 '15 at 00:37
don't need to repeat all those, pass multiple selectors and call datepicker once — charlietfl, Apr 09 '15 at 00:40
Emm - I saw that but I think I put the code in wrong. Can you provide an example on how to use that? — Rado Dynamic, Apr 09 '15 at 00:40
charlietfl - I am new to coding, can you provide an example? — Rado Dynamic, Apr 09 '15 at 00:41
`$( "#datepicker, #datepicker2, #datepicker3" ).datepicker({ /* options */})` — charlietfl, Apr 09 '15 at 00:42

score 0 · Answer 1 · answered Apr 09 '15 at 00:50

Here is an example on how to use the helpful comments provided by @charlietfl and @Emm. The fiddle can be found here

But basically you keep your HTML markup and then for the javascript do:

var unavailableDates = ["20-5-2015", "21-5-2015", "22-5-2015", "23-5-2015", "24-5-2015", "25-5-2015"];

function unavailable(date) {
    dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
    if ($.inArray(dmy, unavailableDates) < 0) {
        return [true, "", "Book Now"];
    } else {
        return [false, "", "Booked Out"];
    }
}

$(function () {
    $("#datepicker, #datepicker2, #datepicker3, #datepicker4").datepicker({
        minDate: 3,
        maxDate: 180,
        dateFormat: "DD, d MM, yy",
        changeMonth: true,
        beforeShowDay: unavailable,
        showButtonPanel: true
    });
});

score 0 · Answer 2 · answered Apr 09 '15 at 00:54

Got it to Work! Check Code Below

HTML

<label>Date Picker 1</label><input type="text" id="datepicker" name="Datepicker" style="border-radius:5px; font-family: sans-serif; color:#333; font-size:14px; margin-bottom:5px;">

<label>Date Picker 2</label><input type="text" id="datepicker22" name="Datepicker2" style="border-radius:5px; font-family: sans-serif; color:#333; font-size:14px; margin-bottom:5px;">

<label>Date Picker 3</label><input type="text" id="datepicker3" name="Datepicker3" style="border-radius:5px; font-family: sans-serif; color:#333; font-size:14px; margin-bottom:5px;">

<label>Date Picker 4</label><input type="text" id="datepicker4" name="Datepicker4" style="border-radius:5px; font-family: sans-serif; color:#333; font-size:14px; margin-bottom:5px;">

jQuery

<script>
 $(function() {
     var array = ["Tuesday, 14 April, 2015","Wednesday, 15 April, 2015","Thursday, 16 April, 2015"]
$( "#datepicker, #datepicker2, #datepicker3, #datepicker4" ).datepicker({
        minDate:3,
        maxDate:180,
        dateFormat:"DD, d MM, yy",
        changeMonth:true,
        showButtonPanel:true,
        beforeShowDay: function(date){
            var string = jQuery.datepicker.formatDate('DD, d MM, yy', date);
            return [ array.indexOf(string) == -1 ]
    }
    });
});
 </script>

How to Blackout Specific Dates Across Multiple jQueryUI Datepickers

2 Answers2