Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JQuery ui - date picker, disabling specific dates

I am trying to disable specific dates using the JQuery Ui. However, I am having no luck, here is my code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="development-bundle/themes/ui-lightness/jquery.ui.all.css">
<style type="text/css">
.ui-datepicker .preBooked_class { background:#111111; }
.ui-datepicker .preBooked_class span { color:#999999; }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery UI Datepicker</title>
<script type="text/javascript" src="development-bundle/jquery-1.7.1.js"></script>
<script type="text/javascript" src="development-bundle/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="development-bundle/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="development-bundle/ui/jquery.ui.datepicker.js"></script>

Instantiate datepicker object

<script type="text/javascript">

    $(function() {
    $( "#iDate" ).datepicker({

    dateFormat: 'dd MM yy',
    beforeShowDay: checkAvailability
    });

    })

Get the dates to be disabled within the calendar

    var unavailableDates = ["9-3-2012","14-3-2012","15-3-2012"];

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

$('#iDate').datepicker({ beforeShowDay: unavailable });

</script>
</head>
<body>
<input id="iDate">
</body>
</html>

It doesn't seem to be working, any idea how I can resolve this. cheers.

like image 947
bobo2000 Avatar asked Mar 16 '12 18:03

bobo2000


People also ask

How to disable dates in jQuery datepicker?

jQuery UI disable() method is used to disable the datepicker. Parameters: This method does not accept any parameters.

How do I turn off dates in calendar?

In the calendar widget their is an option to select max date, in which you can set the value as CurrDate(). So that future dates in the calendar would be disabled.

How do I disable DateRangePicker?

DateRangePicker can be inactivated on a page, by setting enabled value as false that will disable the component completely from all the user interactions including in form post.

How do I turn off Sunday on Datepicker?

To disable the weekends in Bootstrap Datepicker you need to set the daysOfWeekDisabled property value to [0, 6]. Then all the Weekends will be disabled in the datepicker control.


1 Answers

It looks like you're calling datepicker twice on one input. Its kind of hard to follow your code, but if you re-organize it and remove the second datepicker call, everything should work:

<script type="text/javascript">
    var unavailableDates = ["9-3-2012", "14-3-2012", "15-3-2012"];

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

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

    });
</script>

Check this article: disable-dates-in-datepicker

like image 50
Andrew Whitaker Avatar answered Oct 20 '22 05:10

Andrew Whitaker