javascript - 根据日期输入动态显示/隐藏 HTML 表单文本字段

Question

我有一个表单，需要两个日期输入(开始日期和结束日期)。之后，用户将填写每月的上课天数，其中仅应显示与用户在日期开始和日期结束字段中输入相对应的月份(例如，2020年6月8日和2021年3月26日 -那么仅应按照用户输入的日期顺序显示从六月到三月的月份)。

我已经有一个代码，但问题是它只有在日期开始和结束的年份相同时才有效。当年份不同时，它不会显示所需的输出。我尝试过集成其他代码，但到目前为止仍然没有运气，即使使用了 momentjs 库。我希望有人能帮助我解决这个问题。谢谢。

// JS code only works when the years are the same

$('document').ready(function() {
  $('.years').closest('.form-group').hide();
  $('[name=dateStart]').on('blur', function() {
    dateStartEndChange();
  });

  $('[name=dateEnd]').on('blur', function() {
    dateStartEndChange();
  });

  function dateStartEndChange() {
    var date_start = $('[name=dateStart]').val();
    var date_end = $('[name=dateEnd]').val();
    var date_start_month = new Date(date_start).getMonth() + 1;
    var date_end_month = new Date(date_end).getMonth() + 1;

    $('.years').closest('.form-group').hide();

    for ($d = date_start_month; $d <= date_end_month; $d++) {
      $('.year-' + $d).closest('.form-group').show();
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card card-primary">
  <div class="card-header">
    <h3 class="card-title">School Year Information</h3>
  </div>
  <div class="card-body">
    <div class="row">
      <div class="form-group col-3">
        <label for="Yearstart">Year Start: </label>
        <input class="form-control" id="inputYearStart" placeholder="Enter Year Start" type="number" name="yearstart" min="0" required>
      </div>
      <div class="form-group col-3">
        <label for="Yearend">Year End</label>
        <input class="form-control" id="inputYearEnd" placeholder="Enter Year Start" type="number" name="yearend" min="0" required>
      </div>
      <div class="form-group col-3">
        <label for="dateStart"> Date Start</label>
        <input class="form-control" id="inputDateStart" placeholder="Enter first day" type="date" name="dateStart" min="0" required>
      </div>
      <div class="form-group col-3">
        <label for="dateEnd"> Date End</label>
        <input class="form-control" id="inputDateStart" placeholder="Enter last day" type="date" name="dateEnd" min="0" required>
      </div>
    </div>
  </div>
</div>

<div class="card card-primary">
  <div class="card-header">
    <h3 class="card-title">Number of Days per Month</h3>
  </div>
  <div class="card-body">
    <div class="row">
      <div class="form-group col-3">
        <label for="Yearstart">January </label>
        <input class="form-control attNum years year-1" id="inputYearStart" placeholder="Number of days" type="number" step="0.01" name="janAtt" min="0">
      </div>
      <div class="form-group col-3">
        <label for="Yearend">February</label>
        <input class="form-control attNum years year-2" id="inputYearEnd" placeholder="Number of days" type="number" step="0.01" name="febAtt" min="0">
      </div>
      <div class="form-group col-3">
        <label for="Yearstart">March</label>
        <input class="form-control attNum years year-3" id="inputYearStart" placeholder="Number of days" type="number" step="0.01" name="marAtt" min="0">
      </div>
      <div class="form-group col-3">
        <label for="Yearend">April</label>
        <input class="form-control attNum years year-4" id="inputYearEnd" placeholder="Number of days" type="number" step="0.01" name="aprAtt" min="0">
      </div>
    </div>
    <div class="row">
      <div class="form-group col-3">
        <label for="Yearstart">May</label>
        <input class="form-control attNum years year-5" id="inputYearStart" placeholder="Number of days" type="number" step="0.01" name="mayAtt" min="0">
      </div>
      <div class="form-group col-3">
        <label for="Yearend">June</label>
        <input class="form-control attNum years year-6" id="inputYearEnd" placeholder="Number of days" type="number" step="0.01" name="junAtt" min="0">
      </div>
      <div class="form-group col-3">
        <label for="Yearstart">July </label>
        <input class="form-control attNum years year-7" id="inputYearStart" placeholder="Number of days" type="number" step="0.01" name="julAtt" min="0">
      </div>
      <div class="form-group col-3">
        <label for="Yearend">August</label>
        <input class="form-control attNum years year-8" id="inputYearEnd" placeholder="Number of days" type="number" step="0.01" name="augAtt" min="0">
      </div>
    </div>
    <div class="row">
      <div class="form-group col-3">
        <label for="Yearstart">September </label>
        <input class="form-control attNum years year-9" id="inputYearStart" placeholder="Number of days" type="number" step="0.01" name="sepAtt" min="0">
      </div>
      <div class="form-group col-3">
        <label for="Yearend">October</label>
        <input class="form-control attNum years year-10" id="inputYearEnd" placeholder="Number of days" type="number" step="0.01" name="octAtt" min="0">
      </div>
      <div class="form-group col-3">
        <label for="Yearstart">November </label>
        <input class="form-control attNum years year-11" id="inputYearStart" placeholder="Number of days" type="number" step="0.01" name="novAtt" min="0">
      </div>
      <div class="form-group col-3">
        <label for="Yearend">December</label>
        <input class="form-control attNum years year-12" id="inputYearEnd" placeholder="Number of days" type="number" step="0.01" name="decAtt" min="0">
      </div>
    </div>
    <div class="row">
      <div class="form-group col-3">
        <label>Total School Days</label>
        <output class="form-control" id="totalDays"></output>
      </div>
    </div>
  </div>
</div>

Answer 1

检查 date_start_month 和 date_end_month 的位置

if (date_start_month <= date_end_month) {
    for (var $d = date_start_month; $d <= date_end_month; $d++) {
        $('.year-' + $d)
            .closest('.form-group')
            .show();
    }
} else {
    for (var $d = date_start_month; $d <= 12; $d++) {
        $('.year-' + $d).closest`enter code here`('.form-group').show();
    }
    for (var $d = 1; $d <= date_end_month; $d++) {
        $('.year-' + $d)
            .closest('.form-group')
            .show();
    }
}