javascript - 在 DATETIMEPICKER javascript 中禁用 future 7 天

Question

我想在 datetimepicker 中禁用 future 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>

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