Select Range Datepicker

1. display selector for change month / year
2. on month/year change preserve day and modify input
3. restriction selection prev or future date

$(function(){

    var d = new Date();

    d.setMonth(d.getMonth(),1);

    $('#from_date').datepicker({

        dateFormat: 'yy-mm-dd',

        changeMonth: true,

        changeYear: true,

        showButtonPanel: true,

        beforeShow: function(input, instance) {

            window.from_day = $('#from_date').val().split('-')[2];

            if($('#from_date').val()==''){

                $(input).datepicker('setDate', d);

            }

        },

        onSelect: function( selectedDate ) {

            $( "#to_date" ).datepicker( "option", "minDate", selectedDate );

        },

        onChangeMonthYear: function(year, month, inst) {

            $(this).val(year+'-'+format(month) + "-" + from_day);

        }

    });

    $('#to_date').datepicker({

        dateFormat: 'yy-mm-dd',

        changeMonth: true,

        changeYear: true,

        showButtonPanel: true,

        maxDate: '0',

        beforeShow: function(input, instance) {

            window.to_day = $('#to_date').val().split('-')[2];

            

            if($('#to_date').val()==''){

                $(input).datepicker('setDate', new Date());

            }

        },

        onSelect: function( selectedDate ) {

            $( "#from_date" ).datepicker( "option", "maxDate", selectedDate );

        },

        onChangeMonthYear: function(year, month, inst) {

            

            $(this).val(year+'-'+format(month) + "-" + to_day);

        }

    }); 

})

function format(i){

    return ( i <= 9 ) ? '0' + i : i;

}