JSFiddle - React, Tailwind, and code Playground

by Professor Tom DeDonno

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
 <fieldset id="deliveryDate" class="checks">
            <legend>Delivery Date</legend>
            <div class="inline" id="delivDate">
               <select id="delivMo" name="DelivMonth" required>

               </select>
               <select id="delivDy" name="DelivDay" required>

               </select>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
               <select id="delivYr" name="DelivYear" required>
               </select>
            </div>
            <div class="errorMessage"></div>
         </fieldset>
</body>
</html>

JavaScript

var months = [
"January",  "February", "March",
"April",    "May",      "June",
"July",     "August",   "September",
"October",  "November", "December"];

//for some odd reason year+5 is a possible infinite loop
function setDates( )
{
   
  var year= (new Date()).getFullYear();
  var i, option;
  //alert( year );
  
  for( i=year; i < year+5; ++i ) {
    //jQuery has shortcut procedure for this
    option = new Option( i, i );
    $(option).innerHTML = i;
    $('#delivYr').append(option);
  }
  
 
  for( i=0; i < months.length ; ++i ) {
    option = new Option( months[i], i+1 );
    $(option).innerHTML = months[i];
    $( '#delivMo' ).append( option );
  }
  
  //could set selected month to current month
  
  //enable it as soon as month is set
  //$('#delivDy').prop( 'disabled', true );
  updateDays( );                        
}

/** this updateDays is a lot cleaner
than the textbook version */

function updateDays( ) {
  
  var month = $('#delivMo').find( ":selected" ).val();

  var lastDay=31;
  switch( parseInt(month) ) {
      
    case 2: lastDay=28; 
      if( parseInt($('#delivYr').find(":selected").val())%4
         === 0 ) ++lastDay;
      break;
    /* April June September November */
    case 4: case 6: case 9: case 11:
      lastDay=30; break;
  }
  //alert( month + ", " + lastDay );
  $('#delivDy').empty( );
  for( var i = 1; i <= lastDay ; ++i ) {
    option = new Option( i, i );
    $(option).innerHTML = i;
    $('#delivDy').append(option);
  } 
}

setDates();

$('#delivYr').change( updateDays );
$('#delivMo').change( updateDays );