Question

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

虽然我无法让minDate和maxDate按预期工作。由于日期是动态的，因此改变小提琴是用moment.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>

Answer 1

您可以将时刻对象而不是字符串传递给minDate和maxDate。使用defaultDate选项将值设置为选择器而不是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>

Bootstrap Datetimepicker错误的默认日期与minDate

1 个答案: