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.

回答1:

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>

Example: http://jsfiddle.net/daCrosby/JjPrU/334/

回答2:

Helpful answer..If you want to disable a perticular day, you can do as below:

          $scope.dateOptions = {
            beforeShowDay: unavailable
          };

          function unavailable(date) {
                if (date.getDay() === 0) {
                    return [true, ""];
                } else {
                    return [false, "", "Unavailable"];
                }
          }

the above will only enable Sunday and all other days will be disabled. Hope this helps.

来源：https://stackoverflow.com/questions/9742289/jquery-ui-date-picker-disabling-specific-dates

标签

jquery

html

jquery-ui

jquery-ui-datepicker