jquery - jquery ui datepicker 仅限日/月，而不是年份选择

Question

我已经在 SO 和周围进行了搜索，但没有为这个问题找到合适的解决方案。使用 jQueryUI DatePicker 我需要为所有年份选择一个递归日期，所以我不想显示年份选择，因为它没有意义。

我怎样才能在调用中获得这个，如下所示？

$('#myInput').datepicker({ dateFormat: "dd/mm" });  

注意：我不能使用这里 .ui-datepicker-year{ display:none; }建议的 css 解决方案，因为同一页面中还有其他日期选择器。

任何帮助将不胜感激。

提前致谢。

Answer 1

试试这个演示： http: //jsfiddle.net/rAdV6/20/
另请参阅下面的两个屏幕截图。

进一步详细说明，此修复将允许在日历顶部显示多个日期选择器，无论是否在顶部显示年份。

jQuery代码：

$('.DateTextBox.NoYear').datepicker({
    beforeShow: function (input, inst) {
        inst.dpDiv.addClass('NoYearDatePicker');
    },
    onClose: function(dateText, inst){
        inst.dpDiv.removeClass('NoYearDatePicker');
    }
});

$('#datepicker').datepicker( { changeYear: false, dateFormat: 'dd/mm',});
$('#datepicker1').datepicker( { changeYear: true, dateFormat: 'dd/mm', });
$('#datepicker2').datepicker( { changeYear: false, dateFormat: 'dd/mm', });

CSS：

.NoYearDatePicker .ui-datepicker-year
{
   display:none;   
}

HTML：

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all">

date (without year) <input type="text" id="datepicker" class="DateTextBox NoYear">

<br />
date 1: (With year) <input type="text" id="datepicker1" >
<br />
date 2: (Without year) <input type="text" id="datepicker2" class="DateTextBox NoYear">
​

它在我的 lappy OSX 中的显示方式：

Answer 2

试试这个：

$("#myInput").datepicker();
$("#myInput").datepicker("option", "dateFormat", "dd/mm");

作为 jQuery UI DatePicker 文档，

http://docs.jquery.com/UI/Datepicker#option-dateFormat

您必须在初始化中调用以下函数。

$("#myInput").datepicker({ dateFormat: "dd/mm" });

如果在 init 方法之后调用它，它将不起作用。

Answer 3

基于 Tats_innit 的答案，这里有一个解决方案，可以解决几个问题。

$(function() {
  $('.dp').datepicker({
    dateFormat: 'd MM yy',
    beforeShow: function(inp, inst) {
      if (inp.classList.contains("Birthday")) {
        inst.dpDiv.addClass('BirthdayDatePicker');
        return {
          dateFormat: 'MM d',
          defaultDate: new Date(1904, 0, 1),
          minDate: new Date(1904, 0, 1),
          maxDate: new Date(1904, 11, 31),
        };
      }
    },
    onClose: function(dateText, inst) {
      inst.dpDiv.removeClass('BirthdayDatePicker');
    }
  });
});

.BirthdayDatePicker .ui-datepicker-year {
  display: none;
}

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

Birthday: <input type='text' class='dp Birthday' placeholder='Month day'>

<div style="height: 12px" class="spacer"></div>

Defaults: <input type='text' class='dp' placeholder='day Month year'>

我发现在输入上使用一个类是一种更简单的方法来指定我们希望从日期选择器中获得哪些行为。

如果找到生日类，我们使用 1904 年而不是当前年份，因为 1904 年是闰年，确保 2 月 29 日可用。此外，我们使用 minDate/MaxDate 选项将小部件限制为一个 12 个月的周期。如果您愿意，您还可以numberOfMonths: [ 3, 4 ]在返回的对象中包含一次显示全年。

Answer 4

我知道这是一个很老的问题，但也许它会对某人有所帮助。如果您设置选项changeYear: false，您可以看到<span>带有年份值的 a，但如果您设置changeYear: true，您可以看到 a <select>。我们可以像这样使用这种差异：

$(function() {
  $("#year-datepicker").datepicker({
    changeMonth: true,
    changeYear: true
  });

  $("#no-year-datepicker").datepicker({
    dateFormat: "MM d",
    changeMonth: true,
    changeYear: false
  });
});

span.ui-datepicker-year {
  display: none;
}

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

<p>With year: <input type="text" id="year-datepicker"></p>
<p>Without year: <input type="text" id="no-year-datepicker"></p>

Answer 5

你不能吗

#myInput .ui-datepicker-year{ display:none; }

将其限制为您关注的日期选择器？

Answer 6

简单的解决方案：

$(".daypicker").datepicker( { 
    changeYear: false, 
    dateFormat: 'MM-dd',
}).focus(function () {
    $(".ui-datepicker-year").hide();
});

它不会影响同一页面中的其他日期选择器。