2012-03-16 10 views
11

Próbuję wyłączyć określone daty przy użyciu interfejsu JQuery Ui. Jednak mam nie szczęścia, tu jest mój kod:JQuery ui - selektor daty, wyłączając określone daty

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

obiekt instancji datepicker

<script type="text/javascript"> 

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

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

    }) 

uzyskać daty jest wyłączony w kalendarzu

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> 

to nie wydaje się działać, każdy pomysł, jak mogę to rozwiązać. Twoje zdrowie.

Odpowiedz

27

Wygląda na to, że dzwonisz datepicker dwa razy na jednym wejściu. Jego rodzaj trudne do naśladowania swój kod, ale jeśli ponownie zorganizować go i usunąć drugi datepicker połączenia, wszystko powinno działać:

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

Przykład:http://jsfiddle.net/daCrosby/JjPrU/334/

+0

Działa doskonale, szybkie pytanie andrew. Jak mogę to zaadaptować, aby zamiast niedostępnych dat, które były zakodowane w tablicy, daty są pobierane z tabeli bazy danych. Twoje zdrowie. – bobo2000

+0

@ bobo2000: To zależy od technologii po stronie serwera. Ale wyobrażam sobie, że osadziłbyś tablicę wykluczonych dat na stronie podczas wczytywania strony zamiast twardego kodowania ich w JavaScript. –

+0

Korzystanie z PHP. Czy będę musiał wysłać zapytanie do bazy danych, a następnie wypełnić ją zestawem wyników? – bobo2000

0

pomocna answer..If ci chcesz wyłączyć nieprzypadkowy dzień, możesz zrobić, jak poniżej:

  $scope.dateOptions = { 
      beforeShowDay: unavailable 
      }; 

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

powyższe włączą tylko niedzielę, a wszystkie inne dni zostaną wyłączone. Mam nadzieję że to pomoże.

Powiązane problemy