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 (Datepicker 库的演示网站) 添加了一个 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.

例如，如果 Departure 时间设置为 3 月 1 日，当用户点击弹出日历中的 Arrival 字段时，应禁用所有 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

我做了什么:

我使用了 分叉的 Bootstrap-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屋！