代码之家 › 专栏 › 技术社区 › Sinem

如何打开自动日期选择器范围出发

datepicker jquery javascript

Sinem · 技术社区 · 6 年前

对不起,我的问题可能太简单了,但我不懂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);
        });

1 回复 | 直到 6 年前

Andrew Lohr 6 年前

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

我注意到了其他一些事情:

e.date 未定义,因此我使用 .val() 日期的日期时间选择器的。

此外,您的格式被禁用,您的月份名称和天数翻倍,年份翻倍。因此,在下面的示例中,我将其设置为2018年5月4日的格式。

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

$('#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">