Datepicker は jQuery ui 以外にも沢山あるのでまだ、jQuery ui を使うなんてという批判はさておき、
使い慣れてもいるので。。。
年月セレクタをプルダウンにした時、、
jquery-ui-1.12.1.min.js
と、
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>
で、以下のようにdatepicker を設定して表示した時、、、
$.datepicker.setDefaults($.datepicker.regional["ja"]); $("#datepicker").datepicker({ prevText:"前月", nextText:"翌月", changeMonth: true, changeYear: true, yearRange: '-5:+4', firstDay: 1, });
このままだと以下のように、年と月のプルダウンの僅かに配置がずれてしまいます。
このちょっとのズレをなくす方法が昔はわかりませんでした。
でも、近年のCSSは、flex-box があります。
ui-datepicker-title クラスに、display: flex を指定して
justify-content : center もしくは、space-around などを指定します。
.ui-datepicker-title{ display: flex; justify-content: center; -webkit-justify-content: center; } .ui-datepicker select.ui-datepicker-year{ margin-right: 0.1rem; width: auto; } .ui-datepicker select.ui-datepicker-month{ margin-left: 0.3rem; width: auto; } .ui-datepicker{ font-size: 80%; }
これで、無事、年月プルダウンが揃って配置されます。
justify-content: center; を justify-content: space-around; にした場合は、、、
となります。個人的には、center の方が好みです。