时间戳

首页 > 解决方案 > Bootstrap DatePicker 动态限制开始日期

jquery - Bootstrap DatePicker 动态限制开始日期

问题描述

我有 2 个日期选择器，用于选择开始日期和返回日期。

我想使用开始日期值来限制返回日期，例如，如果我选择 2019 年 7 月 15 日，那么返回日期应该从 2019 年 7 月 16 日开始。这应该是动态的。

我尝试了以下实现：

var returndate = new Date();
returndate.setDate(returndate.getDate() + 1);
$('.travel-depature-dates').datepicker({
    autoclose: true,
    todayHighlight: true,
    startDate: returndate,
    beforeShowYear: function (date) {

    },
    toggleActive: true,
    format: 'dd/mm/yyyy',
}).on('changeDate', function (e) {
    return_datepicker();
});

function return_datepicker() {
    var departure_date = $(".departure_date").val();

    var minimum_date = new Date();
    minimum_date.setFullYear(minimum_date.getFullYear() - 1);

    console.log("Departure date => " + departure_date);


    $('.travel-return-dates').datepicker({
        autoclose: true,
        todayHighlight: true,
        startDate: departure_date,
        toggleActive: true,
        format: 'dd/mm/yyyy'
    });

}

但是，返回日期的输出不应用出发日期的限制。

如何使用从退货日期中选择的值限制退货、开始日期？

标签： jquerybootstrap-4bootstrap-datepicker

解决方案

如果我是对的，您正在使用bootstrap-datepicker

上面的这个链接为您提供了可以在日期选择器上访问的方法上面的链接向您显示了当您绑定到 datepciker 时发生的“changeDate”事件，然后您可以将它与一个函数结合使用（考虑到您，我已经在 J​​Query 中完成了此操作正在使用引导程序）然后更新日期。

我已经将该方法稍微扩展为第一个输入的结束日期设置好。希望这可以帮助

HTML

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control date" placeholder="Departure Date">
    </div>
    <div class="col">
      <input type="text" class="form-control date" placeholder="Return Date">
    </div>
  </div>
</form>

JS

$("input[type='text']").datepicker({
        autoclose: true,
    todayHighlight: true,
    toggleActive: true,
    format: 'dd/mm/yyyy',
}).on('changeDate', function(selected){
  updateDate($(this).closest('form').find('input:text'), selected);
});

function updateDate(inputs, selected){
   var minDate = new Date(selected.date.valueOf());
   $(inputs[1]).datepicker('setStartDate', minDate);
   $(inputs[0]).datepicker('setEndDate', minDate);
}

JSFIDDLE

详细说明

  1. 如果获取所有输入（$("input[type='text']"))，则使用 JQuery 选择器。这会在页面上创建一个元素数组。
  2. 设置日期选择器默认初始化值。
  3. 链接 '.on('changeDate'' 方法，以便随时输入更改的日期然后运行。
  4. 使用 '$(this).closest('form').find('input:text')' 我得到输入以稍后用作扇区。
  5. 函数（选定）将值输入传递给方法，然后我使用访问器“selected.date.valueOf()”返回该日期的值。
  6. 最后在我的数组中的元素索引上使用“setStartDate”设置日期。

推荐阅读