CODEWITHSUNDEEP
jquerycssjquery-uijquery-ui-datepicker
IntegrateThis
IntegrateThis

Reputation: 962

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.

Upvotes: 1

Views: 4754

Answers (1)

Twisty
Twisty

Reputation: 30883

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.

Upvotes: 2

Related Questions