禁用DATETIMEPICKER javascript中的未来7天

Question

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

结构如下：

<!--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的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/

Answer 2

​

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

​