web-dev-qa-db-ja.com

jQuery UI-日付ピッカー、特定の日付を無効にする

JQuery Uiを使用して特定の日付を無効にしようとしています。しかし、私は運がありません、これが私のコードです：

<!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>

Datepickerオブジェクトをインスタンス化します

<script type="text/javascript">

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

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

    })

カレンダー内で無効にする日付を取得します

    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>

うまくいっていないようで、どうすればこれを解決できるかわかりません。乾杯。

jqueryhtmljquery-uijquery-ui-datepicker
15
bobo2000

1つの入力でdatepickerを2回呼び出しているようです。コードに従うのは難しいですが、コードを再編成して2番目のdatepicker呼び出しを削除すると、すべてが機能するはずです。

<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>

例：http://jsfiddle.net/daCrosby/JjPrU/334/

32
Andrew Whitaker

役立つ回答..特定の日を無効にしたい場合は、以下のようにできます。

          $scope.dateOptions = {
            beforeShowDay: unavailable
          };

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

上記は日曜日のみを有効にし、他のすべての日は無効になります。お役に立てれば。

0
Deva