JSFiddle - React, Tailwind, and code Playground

by Michael Wender

HTML

<select name="month" id="month">
    <option value="2015-02">Feb 2015</option>
    <option value="2015-01">Jan 2015</option>
    <option value="2014-12">Dec 2014</option>
    <option value="2014-11">Nov 2014</option>    
</select>
<div id="display"></div>

CSS

#display{
    margin: 40px;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 24px;
    font-weight: bold;
}

JavaScript

$('#month').change(function(){
    var selected = $(this).val();
    var dateArray = selected.split('-');
    var yearSelected = dateArray[0];
    var monthSelected = dateArray[1];
    var monthJS = monthSelected - 1;
    
    var monthNames = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", 'Jan');

    var d = new Date( yearSelected, monthJS );
    var month = d.getMonth();
    var year = d.getFullYear();

    console.log("\n" + '---- SELECTED VALUE: ' + selected + ' ----');
    console.log(d);
    logVar( 'yearSelected', yearSelected );
    logVar( 'monthSelected', monthSelected );
    logVar( 'monthJS', monthJS );
    logVar( 'd.getMonth()', d.getMonth() );
 
    $('#display').html( monthNames[d.getMonth()] + ' ' + year );    
});

function logVar( name, value ){
    console.log( "\t" + name + ' = ' + value );  
};