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

Question

我正在开发一个主题基于 Bootstrap 3 的 Wordpress 网站。

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

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

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

我当前的脚本位于主题的 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();