CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-datepicker
anmarti
anmarti

Reputation: 5143

jQuery datepicker showing months and year combos in one row

I want to let user select year and month in both combo boxes. The issue is they are showed one under the other instead of one beside each other.

I want this:

enter image description here

I get this:

enter image description here

Thank you.

Upvotes: 0

Views: 1775

Answers (2)

IT Buff
IT Buff

Reputation: 21

The best way of changing the width no matter what the CSS says is:

  1. Find the js file that has datapicker (usually jquery.ui.datepicker.js)
  2. Find var origyearshtml, numMonths = this._getNumberOfMonths(inst) ...
  3. Just under that or same line you'll notice width=17;
  4. Change that to your preferred width.

This is the only solution that worked for me when using multiple months.

Upvotes: 0

anmarti
anmarti

Reputation: 5143

Solved changing this css class form jquery-ui.css

.ui-datepicker select.ui-datepicker-month .ui-datepicker select.ui-datepicker-year { width: 30%;}

30% ensures in my case that both selects will be showed in one row. I used IE developer tools to find the css class:

enter image description here

Upvotes: 2

Related Questions