按 ID 更改 Jquery UI Datepicker Css答案

【问题标题】：Changing Jquery UI Datepicker Css by ID按 ID 更改 Jquery UI Datepicker Css
【发布时间】：2018-01-22 20:40:51
【问题描述】：

我目前正在尝试自定义日期选择器以仅显示月份和年份选择器，但我只想为特定日期选择器隐藏该 CSS。我目前正在尝试通过 ID 指定特定的选择器，但我不知道我正在做的事情是否可行，或者我只是做错了。下面是我正在使用的输入以及 Css 代码。

$(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>

我只是想让这个特定的 Datepicker 显示一年的下拉菜单，而不显示其他任何内容。

【问题讨论】：

去掉逗号。
这不会改变任何事情。
试试这个：stackoverflow.com/questions/13528623/…
为什么只使用 jQuery Datepicker 来选择年份？只需使用下拉列表。
这与我所拥有的类似，我只需要能够更改特定日期选择器上的 Css。我使用了不止一个，我不希望所有的 CSS 都被更改。

标签： css jquery-ui jquery-ui-datepicker

【解决方案1】：

为什么要使用 jQuery 日期选择器，它会向您显示一个带有年份范围的 select 框？

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>

【讨论】：

【解决方案2】：

从技术上讲，下面的代码会做你想做的事……现在。它使用传递给beforeShow 事件处理程序的inst 参数的未记录功能。该特性，dpDiv 属性，是一个 jQuery 对象，它引用特定于该 Datepicker 实例的日历下拉元素。

我建议使用不同的方法（例如创建特定于该用例的唯一控件），因为不能保证未来版本的 jQuery UI 将支持此属性。

$(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>

【讨论】：