在 jquery ui datepicker 中设置 minDate 时如何不覆盖字段的值？答案

【问题标题】：How to not override value of the field when setting minDate in jquery ui datepicker?在 jquery ui datepicker 中设置 minDate 时如何不覆盖字段的值？
【发布时间】：2018-06-26 09:30:22
【问题描述】：

我正在尝试配置#start_date's 日期选择器的minDate，而不覆盖输入值本身。例如#start_date 已经有01.06.2018 的值，我想在有人选择该字段时设置minDate 等于或高于今天。问题是当我使用下面的代码时，字段中的输入会自动更改为今天。我希望该字段保持不变，直到我使用限制为等于或高于今天的日期选择器选择一个新日期。

$("#start_date").datepicker("option",{
  minDate: new Date()
});

我也试过了：

$("#start_date").datepicker({ minDate: 0});

同时销毁并重新创建日期选择器。

我想出了那个解决方案，但我不想使用它，因为它不优雅：

var start_date = self.$('#start_date').val();
$("#start_date").datepicker("option",{
  minDate: new Date()
});
self.$('#start_date').val(start_date);

我正在使用 jQuery-ui-1.10.3。

【问题讨论】：

我认为您的解决方案是做到这一点的唯一真正方法。当您设置 minDate 并删除它时，jQuery 会自动验证当前值，因为它不再适用于提供的规则。
在输入框和日期选择器中设置您当前的日期值，只需添加 { minDate: 0}
@DsRaj 你所描述的是我相信我的解决方案
@RoryMcCrossan 谢谢，这就是我所怀疑的，我希望不是这样
这里似乎有些不对劲。请提供一个最小、完整且可验证的示例：stackoverflow.com/help/mcve

标签： jquery jquery-ui jquery-ui-datepicker

【解决方案1】：

如果我理解正确，您不希望在打开日期选择器时更改输入字段中的日期，除非您单击任何日期。

如果这是正确的，有一种方法可以将日期选择器绑定到除输入以外的元素，例如 span 或 div，然后通过将 click 事件绑定到输入来使其最初隐藏并手动打开甚至是使用$(element).toggle() 打开日期选择器的图标，重要的是在这种情况下，您必须使用日期选择器的onSelect 事件手动将值分配给输入字段。

查看下面我创建的演示，您甚至可以单击图标或输入字段以打开日期选择器，但在您单击任何日期之前，它不会更改输入字段内的日期。默认情况下，我在输入字段中添加了一个较旧的日期，以便您可以单击它并查看它在您更改之前保持不变

$("#span-trigger").datepicker({
  minDate: new Date(),
  onSelect: function(date) {
    $("#date-field").val(date);
  }
}).hide();

$(".fa-calendar,#date-field").on("click", function() {
  $("#span-trigger").toggle();
});

#span-trigger {
  position: absolute;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<p>

  <i class="fas fa-calendar"></i>
  <input type="text" id="date-field" value="06/01/2018">
  <span id="span-trigger"></span>
</p>

【讨论】：