2012-03-16 49 views
11

Tôi đang cố gắng vô hiệu hóa các ngày cụ thể bằng cách sử dụng URI JQuery. Tuy nhiên, tôi không có may mắn, đây là mã của tôi:JQuery ui - bộ chọn ngày, tắt các ngày cụ thể

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

đối tượng nhanh chóng datepicker

<script type="text/javascript"> 

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

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

    }) 

Get ngày bị vô hiệu trong lịch

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> 

Nó không dường như đang hoạt động, bất kỳ ý tưởng nào tôi có thể giải quyết vấn đề này. cổ vũ.

Trả lời

27

Có vẻ như bạn đang gọi số datepicker hai lần trên một đầu vào. loại hình này khó để làm theo mã của bạn, nhưng nếu bạn tổ chức lại nó và loại bỏ thứ hai datepicker cuộc gọi, tất cả mọi thứ nên làm việc:

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

Ví dụ:http://jsfiddle.net/daCrosby/JjPrU/334/

+0

Làm việc một cách hoàn hảo, một câu hỏi nhanh và rút gọn. Làm thế nào tôi có thể thích ứng với điều này để thay vì các ngày không có sẵn được mã hóa cứng trong mảng, ngày được lấy ra từ một bảng cơ sở dữ liệu. cổ vũ. – bobo2000

+0

@ bobo2000: Điều đó phụ thuộc vào công nghệ phía máy chủ của bạn. Nhưng tôi sẽ tưởng tượng bạn sẽ nhúng mảng các ngày bị loại trừ trên trang tải trang thay vì mã hóa cứng chúng trong JavaScript. –

+0

Sử dụng PHP. Tôi sẽ cần phải truy vấn db sau đó cư các mảng với tập kết quả? – bobo2000

0

hữu ích answer..If bạn muốn vô hiệu hóa một ngày perticular, bạn có thể làm như sau:

  $scope.dateOptions = { 
      beforeShowDay: unavailable 
      }; 

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

ở trên sẽ chỉ cho phép chủ nhật và tất cả các ngày khác sẽ bị tắt. Hi vọng điêu nay co ich.

Các vấn đề liên quan