Multiple months in single field - select year and month for each calendar

Question

I have single field with date.... and I made that code:

Link to JSFiddle

But I would like to select year and month for each multiple calendar (like on the below image):

(edited in Paint):)

Is possible to get it?:)

Code here:

 $("#date").datepicker({ numberOfMonths: 2, dateFormat: 'mm.yy', changeYear: true, changeMonth: true, yearRange: '-50:' + new Date().getFullYear(), firstDay: 1, onChangeMonthYear: function(){ setTimeout(function(){ $('<div class="ui-widget-header addon-header">Start date</div>').prependTo('.ui-datepicker-group.ui-datepicker-group-first'); $('<div class="ui-widget-header addon-header">End date</div>').prependTo('.ui-datepicker-group.ui-datepicker-group-last'); },010); }, onSelect: function( selectedDate ) { setTimeout(function(){ $('<div class="ui-widget-header addon-header">Start date</div>').prependTo('.ui-datepicker-group.ui-datepicker-group-first'); $('<div class="ui-widget-header addon-header">End date</div>').prependTo('.ui-datepicker-group.ui-datepicker-group-last'); },100); if(!$(this).data().datepicker.first){ $(this).data().datepicker.inline = true $(this).data().datepicker.first = selectedDate; }else{ if(selectedDate > $(this).data().datepicker.first){ $(this).val($(this).data().datepicker.first+" - "+selectedDate); }else{ $(this).val(selectedDate+" - "+$(this).data().datepicker.first); } $(this).data().datepicker.inline = false; } }, onClose:function(){ delete $(this).data().datepicker.first; $(this).data().datepicker.inline = false; } }) $('#date').datepicker().bind('click', function() { $('<div class="ui-widget-header addon-header">Start date</div>').prependTo('.ui-datepicker-group.ui-datepicker-group-first'); $('<div class="ui-widget-header addon-header">End date</div>').prependTo('.ui-datepicker-group.ui-datepicker-group-last'); }); 

 .addon-header { text-align: center; padding: 6px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <input id="date"/> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 

Answer 1

I know, that the answer is not exactly what I needed, but I found the different way for this:

 $("#date").datepicker({ dateFormat: 'mm.yy', changeYear: true, changeMonth: true, showButtonPanel: true, yearRange: '-50:' + new Date().getFullYear(), firstDay: 1, beforeShow: function() { var thisfield=$(this); setTimeout(function() { if(!thisfield.val()) { if(!$('.addon-header').length){ $('<div class="ui-widget-header addon-header">Start date</div>').insertBefore('table.ui-datepicker-calendar'); } } else{ thisfield.val(''); if(!$('.addon-header').length){ $('<div class="ui-widget-header addon-header">Start date</div>').insertBefore('table.ui-datepicker-calendar'); } } },200); }, onChangeMonthYear: function() { var thisfield=$(this); setTimeout(function() { if(!thisfield.val() || thisfield.val().length > 12) { if(!$('.addon-header').length){ $('<div class="ui-widget-header addon-header">Start date</div>').insertBefore('table.ui-datepicker-calendar'); } } else{ if(!$('.addon-header').length){ $('<div class="ui-widget-header addon-header">End date</div>').insertBefore('table.ui-datepicker-calendar'); } } },200); }, onSelect: function(selectedDate) { if (!$(this).data().datepicker.first) { $(this).data().datepicker.inline = true $(this).data().datepicker.first = selectedDate; setTimeout(function() { $('<div class="ui-widget-header addon-header">End date</div>').insertBefore('table.ui-datepicker-calendar'); },200) } else { if (selectedDate > $(this).data().datepicker.first) { $(this).val($(this).data().datepicker.first + " - " + selectedDate); } else { $(this).val(selectedDate + " - " + $(this).data().datepicker.first); } $(this).data().datepicker.inline = false; } }, onClose: function() { delete $(this).data().datepicker.first; $(this).data().datepicker.inline = false; } }) 

 .addon-header { text-align: center; padding: 6px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <input id="date"/> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 

You can change year in "End date" :)