javascript - 比较最多三个日期选择器字段中的日期，然后用最早的字段填充另一个字段

Question

我有一个用 Perl、HTML、CSS 和少量 Javascript 编写的 Web 表单。我有一些基于 jquery 的 Javascript，但总的来说，我对 Javascript 和 jquery 还很陌生。

该表单具有三个日期字段，这些字段由 jquery 的“datepicker”脚本填充。有时仅输入三个日期之一，有时输入两个，有时输入全部三个。

如何比较所选日期(无论是一个、两个还是三个)来确定最早的日期，然后采用该日期并填充表单上的另一个字段？

该表格是公寓楼住房申请表，每间公寓可容纳 1 至 3 名居民。每个居民都必须指明他们打算搬入的日期。然后我的程序需要确定哪个日期是最早的，并用该值填充另一个字段(总体“最早入住日期”)。

我希望能够在输入日期时立即填写“最早入住日期”(而不是必须提交表格，然后重新加载表格才能看到日期被填写)。

Answer 1

这是一个最小的示例 - 没有验证日期选择器字段中的日期等。

https://jsfiddle.net/sdjwoo0a/

HTML

<input name='date1' type='text' class='picky' placeholder='Date 1' />
<input name='date2' type='text' class='picky' placeholder='Date 2' />
<input name='date3' type='text' class='picky' placeholder='Date 3' />
<input id='earliest_date' name='earliest' type='text' readonly placeholder='Earliest' />

JS

jQuery(document).ready(function() {

  $('input.picky').each(function() {
    $(this).datepicker();
    $(this).change(updateEarliest);
  });

  function updateEarliest() {
    var dates = [];
    $('input.picky').each(function() {
      var val = $(this).val();
      if (val != '') {
        dates.push({
          val: val,
          date: new Date(val)
        });
      }
    });
    dates.sort(function(a, b) {
      return a.date > b.date ? 1 : a.date < b.date ? -1 : 0;
    });
    var earliest = dates.length ? dates.shift().val : '';
    $('#earliest_date').val(earliest);
  }
});