在 DATETIMEPICKER javascript 中禁用未来 7 天答案

【问题标题】：Disabling the future 7days in DATETIMEPICKER javascript在 DATETIMEPICKER javascript 中禁用未来 7 天
【发布时间】：2017-10-05 14:25:10
【问题描述】：

我想在 datetimepicker 中禁用未来 7 天，例如今天的日期是 2017 年 10 月 5 日，所以 10 月 6、7、8、9、10、11、12 将在 datetimepicker 中禁用。

结构如下：

<!--html-->
<input type="text" id="textin">

//javascript
<script type="text/javascript">
    $('#textin').datetimepicker({
        step: 10
    });
    $('#textin').datetimepicker({
        minDate: 00
    });
    $('#textin').datetimepicker({
        timepicker:false,
        format:'M d, Y, D',
        formatDate:'M d, Y, D'
    });
</script>

【问题讨论】：

标签： javascript jquery html datepicker

【解决方案1】：

你可以像这样使用 minDate ：

var after7 = moment().add(7, 'days');

$('#datetimepicker1').datetimepicker({
  minDate: after7,
  ignoreReadonly: true,
  format: 'DD/MM/YYYY',
  allowInputToggle: true,
});

<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet">
<!-- date -->
<div class='input-group date' id='datetimepicker1'>
  <input type='text' class="form-control" />
</div>

您还可以尝试 jquery UI 的 datepicker 和 beforeShowDay 功能，该功能允许您添加一些测试以指定一天是否可供选择

试试这个：

jQuery('#textin').datepicker({
  timepicker: false,
  minDate: new Date(),
  beforeShowDay: function(d) {
    var dnow = new Date();
    var diff = d - dnow;
    if (diff < 0)
      return [true, "", "Available"];
    else {
      diff = (diff / (1000 * 24 * 60 * 60));
      if (diff < 7)
        return [false, "", "unAvailable"];
      else
        return [true, "", "Available"];
    }
  }
});

<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>
<!-- date input -->
<input type="text" id="textin">

您可以在这里找到更多信息：http://api.jqueryui.com/datepicker/

【讨论】：

【解决方案2】：

$('#textin').datetimepicker({
    minDate: "+10d"
});

【讨论】：

先生 @samnu 什么都没发生，先生
请 :(