禁用 JQueryUI DatePicker 的年份

Question

我正试图从我的 "YearPicker?" 中禁用年份，它是一个 DatePicker，您只能在其中选择年份。我需要禁用所有年份并仅启用一定范围的年份（例如，从 2012 年到现在）。

我正在使用 JQueryUI DatePicker，它看起来像这样：

CSS:

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
   <style>
        .ui-datepicker-calendar {
            display: none;
        }        
    </style>

JS:

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
    $( function() {
        $('#datepicker').datepicker({
            viewMode: 2,
            format: 'yyyy',
            maxDate: new Date(new Date().getFullYear(), 11, 31),
            minDate: new Date(2012, 0, 1)
        });
    })
</script>

HTML:

<label>Year: <input class="form-control" type="text" id="datepicker"></label>

Answer 1

您可以使您正在做的工作发挥作用，但我认为这比需要的工作要多一些。我建议也许考虑改用自动完成。看一看：

$(function() {
  $("#datepicker").autocomplete({
    minLength: 0,
    source: function(req, resp) {
      var today = new Date();
      var min = today.getFullYear() - 6;
      // Adjust above as needed, currently 6 years before this year
      var results = [];
      for (min; min <= today.getFullYear(); min++) {
        results.push(min.toString());
      }
      resp(results)
    }
  }).focus(function(e) {
    $(e.target).autocomplete("search", "");
  });
})

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<label>Year: <input class="form-control" type="text" id="datepicker" data-years="6"></label>

如果需要也可以将其移动到它自己的函数中。

var function makeYearList(n){
  var today = new Date();
  var min = today.getFullYear() - n;
  var results = [];
  for (min; min <= today.getFullYear(); min++) {
    results.push(min.toString());
  }
  return results;
}

您还可以调整主题以水平而非垂直列出它们。

希望对您有所帮助。

Answer 2

已解决！我正在导入 Bootstrap DatePicker 和 JQueryUI DatePicker，我以为我只使用了第二个，但应用程序只检测到第一个，我现在的代码是这样的并且可以工作：

$('#datepicker').datepicker({
                    minViewMode: 2,
                    format: 'yyyy',
                    startDate: '2012',
                    endDate: 'y'
                });

感谢大家的帮助！

Answer 3

您也可以指定简单的字符串来实现所需的格式：

{
    format: 'MM/yyyy',
    startDate: '01/2022',
    endDate: '12/2022',
}

禁用 JQueryUI DatePicker 的年份

Disable year for JQueryUI DatePicker

jquery-ui

datepicker

jquery-ui-datepicker