Swap month/year select list placement in jQuery UI Datepicker

Question

I would like to swap the placement of the month/year select elements in a datepicker that has the changeYear and changeMonth options enabled.

By default the order of appearance is month then year and I want year then month.

Run the code snippet below to see why:

 $( "#picker" ).datepicker({ maxDate: 'today', changeYear: true, changeMonth: true, minDate: "01/01/1939", stepMonths:12, yearRange: "1939:" + new Date().getFullYear() }); 

 <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" /> <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> <form> <div><b>How do I swap the month/year select list placement?</b></div> Birthdate: <input type="text" name="picker" id="picker" value="" /> <ol> <li>Click the input above to open the datepicker.</li> <li>Click on the month select list to view the select options available.</li> <li>Notice that it only shows up to the current month? This is confusing to users.</li> <li>Change the year to any previous one.<li> <li>Now select a month, they are all there.</li> <li>In our world of left to right processing, in this case, it makes sense to have the year appear first followed by the month.</li> </ol> </form> 

Answer 1

Simply float the month and year to the right with CSS:

.ui-datepicker select.ui-datepicker-month, 
.ui-datepicker select.ui-datepicker-year { float: right; }

Or as the duplicate answer provides: use the option showMonthAfterYear: true