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

Posted 2023-05-09

【中文标题】Bootstrap Datepicker 在设置第一个日期字段后禁用过去日期

【英文标题】：Bootstrap Datepicker Disable Past Dates After First Date Field is Set

【发布时间】：2014-02-21 16:51:48

【问题描述】：

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

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

例如，如果出发时间设置为 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>

有什么建议吗？

【问题讨论】：

您给定的演示页面有一个签入/签出示例。你试过了还是不行？我觉得这很合理。

是的，我尝试使用它，但可能无法获得正确的 js 语法，因为我必须在 noConflict 模式下使用它，使用 jQuery 而不是 $

能否请您编辑您的帖子并展示您将如何完成它。然后我可以尝试改正你的错误。

我编辑了我的帖子，添加了来自 jsfiddle 的链接。谢谢@nvrmnd :))

好的，所以我尝试修改您的代码以使其在 jsFiddle 中工作......没有实现这一点，但我让它在我的本地环境中工作。我没有对示例中的代码进行太多修改，它确实有效。

【参考方案1】：

所以在经历了一些麻烦之后，我终于找到了适合你的东西：

jsFiddle Bootstrap-datepicker

我做了什么：

我使用了forked Bootstrap-datepicker。在我看来，它有更好的文档记录并且更易于使用。我让它工作了，所以这应该很重要。 例如，我通过在日期选择器上调用 getDate() 来获取相应日期选择器的日期：

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

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

编辑：

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

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

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

【讨论】：

嗨@nvrmnd 非常感谢！这实际上解决了我的问题......它有效，但我现在有一个新问题。问题是，当我选择出发日期时，假设不是在 3 月 1 日，它会自动跳转到到达字段，并且不允许我选择 3 月 1 日之前的任何日期（这是正确的），但我需要从当前日期手动滚动几个月到达 3 月 1 日，然后选择到达日期。有没有办法让到达字段最初显示在出发字段中选择的月份/日期？我希望我说得通，对不起我的英语:))

我的另一个问题是，一旦设置了出发日期 (#dp1)，我将如何禁用到达日期的自动跳转？这个脚本是否适用于多个领域？如果假设我有 3 个出发日期，然后有 1 个到达日期？非常感谢@nvrmnd 我非常感谢您的帮助！ :))

我编辑了 jsFiddle 以满足您的需求。如果你想使用 4 个不同的日期选择器，那么当然你必须做一些小的修改，但这样做应该很容易。

谢谢@nvrmnd 有没有人告诉过你你是他的英雄？ :)) 好吧，先生...你是我的英雄 :D 现在，我要弄清楚的是，如何为我的另一个页面复制这个脚本，我有多个日历字段，用于多个目的地。我假设简单地复制和更改脚本中的 ID 名称应该可以完成这项工作吗？再次非常感谢！ :))

没错，调整ID应该没问题。如果您喜欢我的答案，您应该点赞/标记为已接受的答案，以便其他人知道问题已解决。

【参考方案2】：

试试这个代码 sn-p:

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

【讨论】：

minDate 已更新为 startDate，供最近查看此内容的任何人使用。

我不得不使用 minDate 而不是 startDate：startDate 给出了一个 js 控制台错误 Uncaught TypeError: option startDate is not recognized!