JSFiddle - React, Tailwind, and code Playground

by AlexJsh02

HTML

<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0>
  <tr>
    <td>Select A Month</td>
  </tr>
  <TR>
    <td>
      <SELECT id="month" onchange="selectDate();" tabindex="1">
        <OPTION value="0">January</OPTION>
        <OPTION value="1">February</OPTION>
        <OPTION value="2">March</OPTION>
        <OPTION value="3">April</OPTION>
        <OPTION value="4">May</OPTION>
        <OPTION value="5">June</OPTION>
        <OPTION value="6">July</OPTION>
        <OPTION value="7">August</OPTION>
        <OPTION value="8">September</OPTION>
        <OPTION value="9">October</OPTION>
        <OPTION value="10">November</OPTION>
        <OPTION value="11">December</OPTION>
      </SELECT>
      <INPUT id="year" TYPE=TEXT SIZE=4 MAXLENGTH=4 value="2016" tabindex="2" style="padding: 0 3px 0 3px;"/>
      </td>
  </TR>
  <TR>
    <TD>
      <textarea id="calPage" FONT="Courier" WRAP=no ROWS=9 COLS=22 style='font-family:Courier; overflow:hidden;'></textarea>
    </TD>
  </TR>
  <TR>
    <TD>
      
        <INPUT TYPE=BUTTON id="btnPrevYear" VALUE="&#0032;&#0060;&#0060;&#0032;" tabindex="3"/>
        <INPUT TYPE=BUTTON id="btnPrevMonth" VALUE="  <  " tabindex="4"/>
        <INPUT TYPE=BUTTON id="btnSetToday" VALUE="Today" tabindex="5"/>
        <INPUT TYPE=BUTTON id="btnNextMonth" VALUE="  >  " tabindex="6"/>
        <INPUT TYPE=BUTTON id="btnNextYear" VALUE="  >> " tabindex="7"/>
      
    </TD>
  </TR>
</TABLE>

JavaScript

// jQuery Calendar
function setToday() {
  var now = new Date();
  var day = now.getDate();
  var month = now.getMonth();
  var year = now.getYear();
  if (year < 2000) { year = year + 1900; }
  $('#month').prop('selectedIndex', month);
  $('#year').val(year);
  displayCalendar(month, year);
}

function isFourDigitYear(year) {
  if (year.toString().length !== 4) {
    if ($('#year').is(':focus') !== true)
      alert("Sorry, the year must be four-digits in length.");
    return false;
  } else {
    return true;
  }
}

function selectDate() {
  var year = parseInt($('#year').val());
  if (isFourDigitYear(year)) {
    displayCalendar($('#month').val(), year);
  }
}

function setPreviousYear() {
  var year = $('#year').val();
  if (isFourDigitYear(year)) {
    var month = parseInt($('#month').val());
    // decrement
    year = parseInt(Number(year)-1);
    $('#year').val(year);
    displayCalendar(month, year);
  }
}

function setPreviousMonth() {
  var year = $('#year').val();
  if (isFourDigitYear(year)) {
    var month = parseInt($('#month').val());
    if (month == 0) {
      month = 11;
      if (year > 1000) {
        year -= 1;
        $('#year').val(year);
      }
    } else {
      // decrement
      month -= 1;
    }
    $("#month").prop('selectedIndex', month);
    displayCalendar(month, year);
  }
}

function setNextMonth() {
  var year = $('#year').val();
  if (isFourDigitYear(year)) {
    var month = parseInt(Number($('#month').val()));
    if (month == 11) {
      month = 0;
      year = parseInt(Number(year)+1);
    	$('#year').val(year);
    } else {
      month += 1;
    }
    $("#month").prop('selectedIndex', month);
    displayCalendar(month, year);
  }
}

function setNextYear() {
  var year = $('#year').val();
  if (isFourDigitYear(year)) {
    var month = parseInt($('#month').val());
    year = parseInt(Number(year)+1);
    $('#year').val(year.toString());
    displayCalendar(month, year);
  }
}

function displayCalendar(month, year) {
 ...