JSFiddle - React, Tailwind, and code Playground

by Luis Valle

HTML

<select name="dia" class="form-control dates maindates">
                            <option value="1">1</option><option value="2">2</option>
                            <option value="3">3</option><option value="4">4</option>
                            <option value="5">5</option><option value="6">6</option>
                            <option value="7">7</option><option value="8">8</option>
                            <option value="9">9</option><option value="10">10</option>
                            <option value="11">11</option><option value="12">12</option>
                            <option value="13">13</option><option value="14">14</option>
                            <option value="15">15</option><option value="16">16</option>
                            <option value="17">17</option><option value="18">18</option>
                            <option value="19">19</option><option value="20">20</option>
                            <option value="21">21</option><option value="22">22</option>
                            <option value="23">23</option><option value="24">24</option>
                            <option value="25">25</option><option value="26">26</option>
                            <option value="27">27</option><option value="28">28</option>
                            <option value="29">29</option><option value="30">30</option>
                            <option value="31">31</option>
                        </select>

                        <select name="mes" class="form-control dates operator month">
                            <option value="1">January     </option><option value="2">February   </option>
                            <option value="3">March     </option><option value="4">April     </option>
                            <option value="5">May      </option><option value="6">June     </option>
                            <option value="7">July     </option><option value="8">August    </option>
                           ...

CSS

.dates{
			padding:0;
			width: 4.5em;
			height: 2em;
			margin-right: 0.2em;
			display: inline;
			}
			.month{width: 7em;
			}

JavaScript

$(document).ready(function () {
	$('.operator').on('change', function () {
  	var daysx = Math.round(((new Date($('.year option:selected').val(), $('.month option:selected').val()))-(new Date($('.year option:selected').val(), parseInt($('.month option:selected').val())-1)))/86400000);
    
    console.log(daysx);
    $('.maindates option').remove();
    for (var i=1; i < (daysx + 1); i++) {
    	$('.maindates').append('<option value="' + i + '">' + i + '</option>');
    }
  });
});