如何使某些日期在 html 日期表单中不可用答案

【问题标题】：How to make certain dates unavailable within html date form如何使某些日期在 html 日期表单中不可用
【发布时间】：2019-03-05 00:10:33
【问题描述】：

我有一个预订表格，从中我有一个日期表格。我想禁用某些已预订/不可用的日子。我的 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>

【问题讨论】：

标签： jquery html datetime jquery-ui-datepicker forms

【解决方案1】：

您的代码似乎运行良好。我在下面唯一改变的是：

添加了yy-mm-dd 的dateFormat 选项，因为这是<input type="date"> 所需的格式，
将输入标记为 readonly，因此只能通过 popin 进行修改（请注意，这可能不是理想的可访问性）。

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>

【讨论】：

@charly 正如您通过运行我发布的 sn-p（蓝色按钮）所看到的，它不会阻止您选择日期。
抱歉，我的日期表格中有一点错字，现在可以正常使用了。你说这可能不是明智的可访问性。对于人们预订日期，有什么替代/更好的方法来处理这个问题？
@charly 见this question。我想说最好的方法是根本不使用 readonly 并像验证任何其他字段一样验证值（通过我不确定你是否可以使用 HTML5 标准属性针对天黑名单进行验证）。无论如何，这不是我的专长，但我相信您可以找到有关它的信息。
我也用它来禁用时间，但我仍然可以选择时间。知道为什么吗？ $('#disableTimeRangesExample').timepicker({ 'disableTimeRanges': [ ['1am', '2am'], ['3am', '4:01am'] ] });
您正在将datepicker 插件应用于所有input 元素。使用一个类仅标记需要日期选择器的控件并使用它。

【解决方案2】：

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

【讨论】：

为什么需要三个不同版本的jQuery和jQuery UI？