jQuery ui - datepicker: month and year dropdown css

Question

Problem Question: I have a jQuery datepicker with month and year dropdown, when there are month like may,june css between month and year looks bad. Something like December 2016 and May 2016

I have created the fiddle for this https://jsfiddle.net/GeekOnGadgets/wra3pcsv/

What I am trying to achieve: I want month and year to have fixed margin between them. Something like December 2016 and May 2016

Answer 1

Month and Year in the Datepicker are actually select menus, and by default the width of that menu (if unspecified) is the width of the largest option it holds, so you'll need to implement some javascript if you want to adjust the width of the select menu according to the selected option. There's a very good example of how to do that in the accepted answer of this post:

Auto resizing the SELECT element according to selected OPTION's width

Unfortunately you can't directly get the width of the selected option. So in the solution referenced, a hidden select element with only that option is created and it's width is measured, then the actual select element is set to that width. A clever solution.

Answer 2

Add the following snippet into the CSS:

.ui-datepicker-month {
  text-align-last: right;
  padding-right: .25em;
}

Related: Is it possible to center text in select box?