JQuery UI – Datepicker disabled selected dates

By | July 29, 2015

In this article we will see how to disabled the JQuery selected dates.

Used the below script to achieve the same, in below script i just disabled the last day of every month.

beforeShowDay is the method where you can enabled or disabled the dates

 

$("#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'
    });

you can customized it as per your requirement by passing dates in array

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

        function unavailable(date) {
            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>

Also you can use noweekends property to disabled the saturday and sunday

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

563 total views, 5 views today