Dynamically show/hide HTML form text fields based on date inputs

Question

I have a form which takes two date inputs (date start and date end). After this, the user will fill in the number of school days per month, wherein only the months corresponding to the user's input in the date start and date end fields should be shown (for example, Jun 08, 2020 and Mar 26, 2021 - then only the months from June to March should be shown in order following the user's date inputs).

I already have a code for this but the problem is that it only works when the years in the date start and end are the same. It doesn't show the desired output when the years are different. I have tried integrating other codes but still no luck so far, even with the use of the momentjs library. I hope somebody could help me with this. Thanks.

 // 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

Examine the position of date_start_month and 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(); } }