Changing Jquery UI Datepicker Css by ID

Question

I am currently trying to customize a datepicker to only show Month and Year selectors but I want to only have that CSS hidden for a specific Datepicker. I am currently trying to dictate a specific picker by ID and I do not know if what I am doing is possible or if I am just doing it wrong. Below is the input I am using as well as the Css code.

$(function() {
  $('#QuarterYearPicker').datepicker({
    changeMonth: false,
    changeYear: true,
    showButtonPanel: true,
    yearRange: '1950:2013', // Optional Year Range
    dateFormat: 'yy',
    onClose: function(dateText, inst) {
      var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
      $(this).datepicker('setDate', new Date(year, 0, 1));
    }
  });
});

#QuarterYearPicker.ui-datepicker-calendar,
.ui-datepicker-month {
  display: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div>Pick the Year from which you want to grab data from: <input id="QuarterYearPicker" readonly /></div>

I am only trying to get this specific Datepicker to display the drop down for year and show nothing else.

Try this: https://stackoverflow.com/questions/13528623/jquery-ui-datepicker-to-show-year-only — Nathaniel Flick, Jan 22 '18 at 20:59
Why use a jQuery Datepicker just to select a year? Just use a dropdown list. — Heretic Monkey, Jan 22 '18 at 21:02
That is similar to what I have I just need to be able to change the Css on a specific Datepicker. I am using more than one and I do not want the CSS changed on all of them. — Will Marrone, Jan 22 '18 at 21:02

Roko C. Buljan · Answer 1 · 2018-01-22T21:15:55.020

Why using a jQuery datepicker that will anyways show you a select box with a years range?

var startYear = 1950;
var endYear = new Date().getFullYear(); // or hardcode 2013 here
var optionsYears = "";
while(endYear >= startYear) optionsYears += "<option>"+ (endYear--) +"</option>";

$("#year").append(optionsYears);

Pick a year <select id="year"></select>


<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

score -2 · Answer 2 · answered Jan 22 '18 at 21:20

Technically, the following code will do what you want... for now. It uses an undocumented feature of the inst argument passed to the beforeShow event handler. That feature, the dpDiv property, is a jQuery object that references the calendar drop-down element specific to that Datepicker instance.

I would suggest using a different method (like creating a unique control that is specific to this use case) as there is no guarantee future versions of jQuery UI will support this property.

$(function() {
  $('#QuarterYearPicker').datepicker({
    changeMonth: false,
    changeYear: true,
    showButtonPanel: true,
    yearRange: '1950:2013', // Optional Year Range
    dateFormat: 'yy',
    beforeShow: function(el, inst) {
      inst.dpDiv.addClass("datepicker-" + el.id);
    },
    onClose: function(dateText, inst) {
      var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
      $(this).datepicker('setDate', new Date(year, 0, 1));
    }
  });
  $('#OtherYearPicker').datepicker();
});

.datepicker-QuarterYearPicker .ui-datepicker-calendar {
  display: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div>Pick the Year from which you want to grab data from: <input id="QuarterYearPicker" readonly /></div>

<div>Pick the Year from which you want to grab data from: <input id="OtherYearPicker" readonly /></div>

Changing Jquery UI Datepicker Css by ID

2 Answers2