2015-05-19 33 views
1

禁用特定日期嘿,大家好我試圖設置在我的網頁中的日期選擇器,並從中禁用某些日期,所以它不能被顯示
這是代碼:從HTML日期選擇器的jQuery

<!doctype html> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Untitled Document</title> 

     <link href="jquery-ui/jquery-ui.css" rel="stylesheet"> 
     <script src="jquery-ui/external/jquery/jquery.js" ></script> 
     <script src="jquery-ui/jquery-ui.js"></script> 

     <script> 

      /** Days to be disabled as an array */ 
      var disableddates = ["20-5-2015", "12-11-2014", "12-25-2014", "12-20-2014"]; 

      function DisableSpecificDates(date) { 

       var m = date.getMonth(); 
       var d = date.getDate(); 
       var y = date.getFullYear(); 

       // First convert the date in to the mm-dd-yyyy format 
       // Take note that we will increment the month count by 1 
       var currentdate = (m + 1) + '-' + d + '-' + y; 

       // We will now check if the date belongs to disableddates array 
       for (var i = 0; i < disableddates.length; i++) { 

        // Now check if the current date is in disabled dates array. 
        if ($.inArray(currentdate, disableddates) != -1) { 
         return [false]; 
        } 
       } 
      } 

      $(function() { 
       $("#date").datepicker({ 
        beforeShowDay: DisableSpecificDates 
       }); 
      }); 
     </script> 
    </head> 

    <body> 
     <input id="date" type="text"> 
    </body> 
</html> 

但它不工作的原因...日期選擇器甚至不顯示 可以有人plz幫助

+1

請上傳您的控制檯上顯示的JavaScript錯誤。您是否嘗試過使用Chrome或其他類似的開發者工具? – Fabiano

回答

16

試試這個,運行下面的代碼。第一次添加0的日期,以便它與匹配中的格式相匹配。

/** Days to be disabled as an array */ 
 
var disableddates = ["20-05-2015", "12-11-2014", "12-25-2014", "12-20-2014"]; 
 

 

 
function DisableSpecificDates(date) { 
 
    var string = jQuery.datepicker.formatDate('dd-mm-yy', date); 
 
    return [disableddates.indexOf(string) == -1]; 
 
    } 
 
    /* 
 
var m = date.getMonth(); 
 
var d = date.getDate(); 
 
var y = date.getFullYear(); 
 

 
// First convert the date in to the mm-dd-yyyy format 
 
// Take note that we will increment the month count by 1 
 
var currentdate = (m + 1) + '-' + d + '-' + y ; 
 

 
// We will now check if the date belongs to disableddates array 
 
for (var i = 0; i < disableddates.length; i++) { 
 

 
// Now check if the current date is in disabled dates array. 
 
if ($.inArray(currentdate, disableddates) != -1) { 
 
return [false]; 
 

 
} 
 
} 
 

 
}*/ 
 

 

 
$(function() { 
 
    $("#date").datepicker({ 
 
    beforeShowDay: DisableSpecificDates 
 
    }); 
 
});
<!doctype html> 
 
<html> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Untitled Document</title> 
 

 
    <link href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="http://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script> 
 
</head> 
 

 
<body> 
 

 
    <input id="date" type="text"> 
 

 

 
</body> 
 

 
</html>

0

這個答案是基於托馬斯的答案,在這裏我已經加入noweekends功能DisableSpecificDates功能PrepareDate,在beforeShowDay使用,如:beforeShowDay:PrepareDate

function DisableSpecificDates(date) { 
 
    var string = jQuery.datepicker.formatDate('dd-mm-yy', date); 
 
    return [disableddates.indexOf(string) == -1]; 
 
    } 
 
    function PrepareDate(date){ 
 
    if ($.datepicker.noWeekends(date)[0]) { 
 
    return DisableSpecificDates(date); 
 
    } else { 
 
    return $.datepicker.noWeekends(date); 
 
    } 
 
}

0

周的殘疾人天

<div class="container"> 
    <div class="col-sm-6" style="height:130px;"> 
     <div class="form-group"> 
      <div class='input-group date' id='datetimepicker11'> 
       <input type='text' class="form-control" /> 
       <span class="input-group-addon"> 
        <span class="glyphicon glyphicon-calendar"> 
        </span> 
       </span> 
      </div> 
     </div> 
    </div> 
    <script type="text/javascript"> 
     $(function() { 
      $('#datetimepicker11').datetimepicker({ 
       daysOfWeekDisabled: [0, 6] 
      }); 
     }); 
    </script> 
</div>