Eonasdan Bootstrap Datetimepicker - 无法使用当前时间将 minDate 设置为现在

Question

我需要将最小日期设置为当前时间。但它只有在我设置没有时间的日期时才有效。我尝试了几种时间格式，但没有找到解决方案。

这是我的设置

默认值：

settings: {
    locale: 'de',
    viewMode: 'days',
    format: 'DD. MMMM YYYY',
    useStrict: true,
    focusOnShow: false,
    showClose: true,
},

日期选择器设置：

this.$time_from.datetimepicker($.extend(true, DefaultDatepicker.settings, {
    minDate: DefaultDatepicker.getDateRange(0),
    maxDate: DefaultDatepicker.getDateRange(365),
    format: 'DD. MMMM YYYY - HH:mm',
    viewMode: 'days'
}));

输出：08。 2016 年 11 月 - 00:00

计算日期的函数：

getDateRange: function (max) {
    var CurDate = new Date();
    CurDate.setDate(CurDate.getDate() + max);
    var mm = CurDate.getMinutes();
    var hh = CurDate.getHours();
    var dd = CurDate.getDate();
    var mm = CurDate.getMonth() + 1;
    var y = CurDate.getFullYear();

    //return mm + '/' + dd + '/' + y + ' ' + hh + ':' + mm + ':' + ss; //not working output: 2016-11-08T14:18:45+01:00 + error

    return mm + '/' + dd + '/' + y;
},
//Example getDateRange(0) = now, getDateRange(1) = tomorrow

测试： 也不行

newgetDateRange: function (max) {
    var date = new Date();
    date.setDate(date.getDate() + max);
    var ss = ( '0' + (date.getSeconds())).slice(-2);
    var mm = ( '0' + (date.getMinutes())).slice(-2);
    var hh = ( '0' + (date.getHours())).slice(-2);
    var d = ( '0' + (date.getDate())).slice(-2);
    var M = ( '0' + (date.getMonth() + 1) ).slice(-2);
    var Y = date.getFullYear();

    var $new = Y + '-' + M + '-' + d + 'T' + hh + ':' + mm + ':' + ss + 'Z';
    return $new;
},

Answer 1

我认为你的问题是getDateRange 函数的结果格式，可能它应该以DD. MMMM YYYY - HH:mm 格式返回日期。

文档says (for the date function):

使用带有options.format 和options.useStrict 组件配置的矩库来解析newDate 参数。

我认为它对minDate 和maxDate 选项使用相同的逻辑。

无论如何minDate 和maxDate 都接受矩对象，所以你的getDateRange 函数可以返回一个矩而不是一个字符串，你可以简单地使用add() 来获取你的范围。

这是一个工作示例：

var DefaultDatepicker = {
  settings: {
    locale: 'de',
    viewMode: 'days',
    format: 'DD. MMMM YYYY',
    useStrict: true,
    focusOnShow: false,
    showClose: true,
  },
  getDateRange: function(max){
    return moment().add(max, 'days');
  }
};

$('#datetimepicker').datetimepicker($.extend(true, DefaultDatepicker.settings, {
    minDate: DefaultDatepicker.getDateRange(0),
    maxDate: DefaultDatepicker.getDateRange(365),
    format: 'DD. MMMM YYYY - HH:mm',
    viewMode: 'days'
}));

<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.42/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.15.2/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.2/locale/de.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.42/js/bootstrap-datetimepicker.min.js"></script>

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