引导 datetimepicker - 相对于现在设置 maxDate？答案

【问题标题】：bootstrap datetimepicker - set maxDate relative to now?引导 datetimepicker - 相对于现在设置 maxDate？
【发布时间】：2016-08-18 15:51:55
【问题描述】：

我使用这个日期时间选择器：
http://eonasdan.github.io/bootstrap-datetimepicker/Options/
基本上我想设置maxDate: moment()，即 maxDate 应该限制在现在。问题是日期选择器打开时 maxDate 不再是 now() 了。每次显示日期选择器时，我都想将其 maxDate 设置为现在。

如果可能，我想在全局范围内强制执行它，而不是在每个 datetimepicker() 实例上指定它。是否可以使用 moment.js 以某种方式给出现在的相对日期？

看这个小提琴：
https://jsfiddle.net/0Ltv25o8/3281/
我将 maxDate 设置为现在。您会在页面加载后的一分钟后看到，您将无法使用箭头按钮选择当前分钟数。

【问题讨论】：

我建议您添加相关代码 sn-p 因为设置 maxDate: moment() 应该足以禁用未来的日期（对于每次打开选择器）。问题可能出在代码的其他地方。您可以在选择器初始化时使用类选择器为所有实例设置配置或在变量中缓存配置对象，然后使用该变量而不是重复相同的值。您可以使用add/subtract 等操作矩对象，如docs 中所述

标签： javascript twitter-bootstrap momentjs eonasdan-datetimepicker maxdate

【解决方案1】：

使用自定义版本的 datepicker 插件怎么样？

我添加了新参数maxDateNow（有更好的名称吗？），允许选择日期/时间到当前时间。

$('#datetimepicker1').datetimepicker({maxDateNow: true, format:'DD/MM/YYYY HH:mm'});

看到这个fiddle

【讨论】：

【解决方案2】：

您可以收听dp.show 事件，这样您就可以在每次选择器显示时将maxDate 更改为当前时间。这里是一个代码示例：

$('#datetimepicker1').datetimepicker({
  maxDate: moment(), 
  format:'DD/MM/YYYY HH:mm'
}).on('dp.show', function(){
  $('#datetimepicker1').data("DateTimePicker").maxDate(moment());
});

<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>

【讨论】：

谢谢。我实际上已经考虑过事件回调的选项。问题 - 对于我想将 now() 设置为 max 或 min 的每个日期选择器，我如何在全局范围内强制执行该操作？每次创建新的日期选择器时，我已经在使用自己的默认对象配置并使用 jQuery.extend。
能否在初始化代码和事件回调代码中都使用类选择器？
不，我有动态插入的日期选择器（ajax 繁重的网络应用程序），当页面加载时某些输入还不存在。我可能会将事件回调代码添加到我需要的每个日期选择器中，但这对我的代码来说会有些混乱。太糟糕了，我无法指定现在相对的最大/最小日期。 :(
我认为可能是 datetimepicker init 本身的快捷方式，这样您的代码可能会更好。 $('#datetimepicker').datetimepicker(MY_DEFAULTS).setMinNow() 之类的东西，将设置更改处理程序，将是最不痛苦的。但我不知道如何扩展 datetimepicker 本身。我建议添加相对于现在的最大/最小日期作为 PR，我以前的 jqueryUI datepicker 支持它

【解决方案3】：

我使用 Liked This，它将 min Date 设置为今天的 Date

 $( '#Field_ID' ).datepicker({dateFormat: 'dd-MM-yy', minDate : new Date()});

【讨论】：