Datepicker disabled selected dates

How to Disable Selected Dates in jQuery Datepicker

In this article, we will explore how to disable specific dates in the jQuery Datepicker. This can be particularly useful for scenarios where certain dates need to be restricted, such as holidays or weekends.

Disabling the Last Day of Every Month

The following script disables the last day of every month using the beforeShowDay method:

$("#date").datepicker({
    beforeShowDay: function (date) {
        var day = date.getDate();
        var month = date.getMonth();
        var currentValue = new Date(2015, month + 1, 0);

        if (day == currentValue.getDate()) {
            return [false];
        } else {
            return [true];
        }
    },
    dateFormat: 'dd-M-yy'
});

Customizing Disabled Dates

You can customize the disabled dates by passing an array of dates. Here’s an example:

<script type="text/javascript">
    var unavailableDates = ["28-7-2015", "3-7-2015", "30-7-2015"];

    function unavailable(date) {
        var dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
        if ($.inArray(dmy, unavailableDates) == -1) {
            return [true, "", "Available"];
        } else {
            return [false, "", "Unavailable"];
        }
    }

    $(function () {
        $("#iDate").datepicker({
            dateFormat: 'dd MM yy',
            beforeShowDay: unavailable
        });
    });
</script>

Disabling Weekends

To disable weekends, you can use the noWeekends property:

$('#pickDate').datepicker({
    dateFormat: "dd/mm/yy",
    beforeShowDay: $.datepicker.noWeekends,
    minDate: new Date(2012, 9, 25) 
});

Conclusion

By using these methods, you can easily disable specific dates, weekends, or any custom set of dates in the jQuery Datepicker. This can help in creating a more controlled and user-friendly date selection process.

Submitted By Vibhuti Singh
Category jquery
Created On 22-Aug-2024