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);
    
    var iterations = 31 - daysx;
    console.log(daysx);
    console.log(iterations);
    $('.maindates option').removeAttr('style');   
    
    for (var i=0; i <= iterations; i++) {
    	var thisIndx = 31 - i;
    	$('.maindates option').eq(thisIndx).css('display', 'none');
    }
    
    if (($('.maindates option:selected').index() + 1) > daysx) {
    	$('.maindates').val(daysx);
    }
  });
});