Question

我正在使用基于Bootstrap 3主题的Wordpress网站。

在表单中，我需要包含日历日期选择器。我从eyecon (Demo Website for Datepicker Library)添加了一个js库。我使用了日期选择器，但是在设置出发时间时，我无法选择到达字段的过去时间。

例如，如果出发时间设置为3月1日，则当用户单击弹出的日历中的“到达”字段时，应禁用3月2日之前的所有日期。

我尝试了在演示网站上提供的多个版本的代码，但它们没有用。我认为问题可能是我在noConflict模式下使用jQuery。

我当前的脚本位于我主题的footer.php中。日历弹出窗口有效，它会禁用过去的日期，但是一旦设置了离开日期，它就不会在到达字段之前禁用日期。

这是最成功的尝试，因为至少日历弹出窗口正在尝试此尝试：http://jsfiddle.net/j5ZKc/

这是我目前的剧本：

<script type="text/javascript">
jQuery(function() {
  jQuery('#dp1, #dp2'
  ).datepicker({startDate: '-0m'}).on('changeDate', function(){
    jQuery( '#dp1, #dp2'
    ).datepicker('hide');
  })
});
</script>

有什么建议吗？

Answer 1

所以经过一些麻烦我终于找到了适合你的东西：

jsFiddle Bootstrap-datepicker

我做了什么：

我使用了forked Bootstrap-datepicker。在我看来，这是更好的记录和更容易使用。我得到它的工作，所以应该计入一些东西。例如，我通过在日期选择器上调用getDate()来获取相应日期选择器的日期：

checkout.datepicker("getDate").valueOf()

如果您对我的代码有任何疑问，请与我们联系！

修改

我更新了前jsFiddle（参见上面的链接）。它会自动将＃dp2的值设置为＃dp1 +一天的选定日期。因此，您应该始终处于正确的月份。

如果您不希望代码在选择日期后将焦点放在#dp2上，只需删除jsFiddle中的以下行：

$('#dp2')[0].focus();

Answer 2

试试这段代码：

$('#changestartdate').datetimepicker({ minDate:new Date() });

Bootstrap Datepicker在设置第一个日期字段后禁用过去日期

2 个答案: