0

我正在使用 Eonasdan Bootstrap Datetimepicker：http ://eonasdan.github.io/bootstrap-datetimepicker/

虽然我无法让 minDate 和 maxDate 按预期工作。由于日期是动态的并且会发生变化，因此小提琴是用moments.js的减法/加法设置的

条件

minDate = today + 1 day
maxDate = today + 3 days
default value = today + 2 days

以上返回明天的值而不是默认值。如果将 minDate 更改为 -2 天，它就可以正常工作。

见小提琴：http: //jsfiddle.net/9uqpu88v/8/

twoDaysFromToday =  moment().add(2, 'd').format('YYYY-MM-DD');

$('#datetimepicker1 input').val(twoDaysFromToday); 
      var datetimepicker = $('#datetimepicker1').datetimepicker({
      format: 'YYYY-MM-DD',
      minDate: moment().add(1, 'd').format('YYYY-MM-DD'), // Tomorrow
      maxDate: moment().add(3, 'd').format('YYYY-MM-DD'), // Three days from today
    })


<div class="form-group">
  <div class="input-group date" id="datetimepicker1">
    <input type="text" id="datetimepicker1" class="form-control" value="" />    
    <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
  </div>
</div>
4

1 回答 1

2

您可以将 moment 对象而不是字符串传递给minDateand maxDate。使用defaultDateoption 将值设置为您的选择器而不是 jQuery val()。请注意，该库还提供了date一种为组件设置值的方法。

使用时刻startOf独立于小时。

这是一个工作示例：

var datetimepicker1 = $('#datetimepicker1').datetimepicker({
  format: 'YYYY-MM-DD',
  useCurrent: false,
  defaultDate: moment().startOf('day').add(2, 'd'),
  minDate: moment().startOf('day').add(1, 'd'),
  maxDate: moment().startOf('day').add(3, 'd')
})
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<div class="form-group">
  <div class="input-group date" id="datetimepicker1">
    <input type="text" class="form-control" />
    <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
  </div>
</div>

于 2016-06-28T22:27:44.993 回答