根據日期輸入動態顯示/隱藏 HTML 表單文本字段

Question

我有一個表單，它需要兩個日期輸入（日期開始和日期結束）。 之后，用戶將填寫每個月的上學天數，其中只應顯示與用戶在日期開始和日期結束字段中輸入對應的月份（例如，2020 年 6 月 8 日和 2021 年 3 月 26 日 -那么只應按照用戶的日期輸入順序顯示從 6 月到 3 月的月份）。

我已經有了一個代碼，但問題是它只在日期開始和結束的年份相同時才有效。 當年份不同時，它不會顯示所需的輸出。 我已經嘗試集成其他代碼，但到目前為止仍然沒有運氣，即使使用了 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(); } }