Bootstrap Datepicker在第一个日期字段设置后禁用过去的日期 [英] Bootstrap Datepicker Disable Past Dates After First Date Field is Set

问题描述

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

I'm working on a Wordpress website with the theme based on Bootstrap 3.

在表单中，我需要包括日历日期选择器。我从eyecon （Demo Website for Datepicker Library）添加了一个js库。我使它与日期选择器一起工作，但是当出发时间设置时，我无法选择过去的时间到达字段。

In a form I need to include calendar date pickers. I added a js library from eyecon (Demo Website for Datepicker Library). I made it work with date selectors, but I'm having trouble disabling choosing the past times for arrival field, when the departure time is set.

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

For example, if the Departure time is set to be 1 March, when the user clicks on the Arrival field in the calendar that pops up, all the dates before 2nd March should be disabled.

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

I tried multiple versions of code given on demo website, but they didn't work. I think the problem might be that I have jQuery in noConflict mode.

我目前的脚本位于我的主题的footer.php。日历弹出窗口起作用，它会禁用过去的日期，但是在设置离开日期之后，它不会在到达字段之前禁用日期。

My current script is located in footer.php of my theme. The calendar pop up works, and it disables past dates, but it doesn't disable dates before the Arrival field once the Departure date is set.

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

This was the most successful attempt, as at least the calendar popups were working on this attempt: 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>

有什么建议吗？

推荐答案

所以经过一些麻烦，我终于找到了一些有用的东西：

So after some trouble I finally got something working for you:

jsFiddle Bootstrap-datepicker

我做了什么：

我使用分叉引导日期标记。在我看来，更好的记录和更容易使用。我得到它的工作，所以应该算一些东西。
例如，我通过调用datepicker上的 getDate（）来获取相应日期戳的日期：

I used forked Bootstrap-datepicker. It is in my opinion way better documented and easier to use. I got it working so that should count for something. For example I got the date of the respective datepicker by invoking getDate() on a datepicker:

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

如果您对我的代码有任何疑问，请通知我！

If you have any questions about my code, let me know!

编辑

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

I updated the former jsFiddle (see the link above). It automatically sets the value of #dp2 to the selected date of #dp1 + one day. Therefore you should always be in the correct month.

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

If you don't want the code to put the focus on #dp2 after a date is selected just remove the following line in the jsFiddle:

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

这篇关于Bootstrap Datepicker在第一个日期字段设置后禁用过去的日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！