如何使某些日期无法在html日期格式中使用

时间:2019-03-05 00:10:34

标签: jquery html datetime jquery-ui-datepicker html-form

我有一个预订表格,其中有一个日期表格。我想禁用某些预定/不可用的日子。我有无法在我的情况下使用的JavaScript代码。还有其他方法可以帮助我禁用日历中的日期吗?

var array = ["2019-03-14", "2019-03-11", "2019-03-26"];

$(function () {
  $('input').datepicker({
    dateFormat: 'yy-mm-dd',
    beforeShowDay: function(date) {
      var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
      return [array.indexOf(string) == -1]
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />

<div class="form-group">
  <label for="date">Book your date</label>
  <input type="date" name="date" class="form-control" placeholder="" required readonly>
</div> 
     

2 个答案:

答案 0 :(得分:1)

您的代码似乎运行良好。我在下面所做的唯一更改是:

  • 添加了dateFormat的{​​{1}}选项,因为这是yy-mm-dd要求的格式,
  • 将输入标记为<input type="date">,因此只能通过弹出窗口进行修改(请注意,这可能不是理想的可访问性)。

readonly
var array = ["2019-03-14", "2019-03-11", "2019-03-26"];

$(function () {
  $('input').datepicker({
    dateFormat: 'yy-mm-dd',
    beforeShowDay: function(date) {
      var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
      return [array.indexOf(string) == -1]
    }
  });
});

答案 1 :(得分:0)

请在<head> </head>之间的任意位置添加它:

  <!-- datepicker -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.13/jquery-ui.min.js" type="text/javascript"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="Stylesheet" type="text/css">
  <script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script type="text/javascript" src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <!-- //datepicker -->