James Dickens James Dickens - 4 months ago 16
CSS Question

Style CSS of year and month selects jQuery Datepicker

I am trying to style the selects in a jQuery datepicker object. For instance, neither do the following work.

.ui-datepicker.year.select {
width:200px;
}

.ui-datepicker.select {
width:200px;
}


Any help would be much appreciated.

Answer

Here is a working example. The UI Sheet seems to override, so I used !important.

https://jsfiddle.net/Twisty/whcjw3w6/

HTML

<p>Date:
  <input type="text" id="datepicker">
</p>

CSS

select.ui-datepicker-month,
select.ui-datepicker-year {
  width: 200px !important;
}

jQuery

$(function() {
  $("#datepicker").datepicker({
    changeMonth: true,
    changeYear: true
  });
});

EDIT

Per @mike-mccaughan comment, you can do this as well:

.ui-datepicker-header select.ui-datepicker-month,
.ui-datepicker-header select.ui-datepicker-year {
  width: 200px;
}

Just had to specify the selector more.

Comments