根据日期输入动态显示/隐藏 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(); } }