时间戳

首页 > 解决方案 > 我如何打开自动日期选择器范围偏离

javascript - 我如何打开自动日期选择器范围偏离

问题描述

抱歉，我的问题可能太简单了，但我不懂 javascript。我有一个范围日期选择器。到达-离开。我想在我选择到达时自动打开出发选择器。这是我的js代码。

$('#arrival').datetimepicker({
                        useCurrent: false,
                        format: 'DD/MM/YYYY',
                        minDate: 'now'
                    });
        $('#departure').datetimepicker({
            useCurrent: false,
            format: 'DD/MM/YYYY',
            minDate: 'now'
        });
        $("#arrival").on("change.datetimepicker", function (e) {
            $('#departure').datetimepicker('minDate', e.date);
        });
        $("#departure").on("change.datetimepicker", function (e) {
            $('#arrival').datetimepicker('maxDate', e.date);
        });

标签： javascriptjquerydatepicker

解决方案

您可以使用onShow()回调setOptions()来动态设置 datetimepicker 上的最小和最大日期。

我注意到的其他一些事情：

e.date是未定义的，所以我使用了.val()日期时间选择器的日期。

此外，您的格式已关闭，您将月份名称和日期翻倍，将年份翻两番。因此，我在下面的示例中将其设置为 04/May/2018 格式。

如果设置了出发时间，我还会在到达选择器上设置最大日期（到出发时间），否则现在有最大值。

$('#arrival').datetimepicker({
  useCurrent: false,
  format: 'd/M/Y',
  onShow: function(ct) {
    this.setOptions({
      minDate: "now",
      maxDate: $('#departure').val() ? new Date($('#departure').val()) : false
    })
  }
});

$('#departure').datetimepicker({
  useCurrent: false,
  format: 'd/M/Y',
  onShow: function(ct) {
    this.setOptions({
      minDate: new Date($('#arrival').val())
    })
  }
});

$("#arrival").on("change.datetimepicker", function(e) {
  $('#departure').datetimepicker("show");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>

arrive <input id="arrival" type="text"> 
depart <input id="departure" type="text">

推荐阅读