javascript - 在DATETIMEPICKER javascript中禁用 future 的7天

我想在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>

最佳答案

您可以这样使用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 和ShowDay 之前的函数，该功能允许您添加一些测试以指定是否可以选择一天。

试试这个 :

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/