Custom date validation v2
jQuery
by Sparrow Squire
HTML
<select id="day">
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">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 id="month">
<option value="01|2017">Jan</option>
<option value="02|2017">Feb</option>
<option value="04|2017">Apr</option>
<option value="07|2017">Jul</option>
<option value="08|2017">Aug</option>
</select>
JavaScript
function getDaysInMonth(month, year) {
return new Date(year, month, 0).getDate();
}
$('#month').change(function() {
var newMonth = $('#month option:selected').val().slice(0, 2);
var newYear = $('#month option:selected').val().slice(3, 7);
//default
$('#day option').show();
//Update day select
$('#day option:gt('+(getDaysInMonth(newMonth, newYear)-1)+')').hide();
//run check on selected day val
if ($('#day option:selected').val() > getDaysInMonth(newMonth, newYear)) {
alert("Error! Invalid date");
}
});