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

Question

我在这里搜索了所有的搜索结果，但没有针对这个问题找到适当的解决方案。 使用jQueryUI DatePicker我需要选择所有年份的递归日期，所以我不想显示年份选择，因为它没有意义。

如何在通话中获取此信息，如下所示？

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

注意：我无法按照建议here .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 .ui-datepicker-year{ display:none; }

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

Answer 3

试试这个：

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

作为jQuery UI DatePicker Documentaion，

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

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

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

如果在init方法之后调用它，它将无效。

Answer 4

在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'>

我发现在输入上使用类是一种更简单的方法来指定我们想要从datepicker中获取哪些行为。

如果找到生日课程，我们使用的是1904年，而不是今年的年份，因为1904年是闰年，确保2月29日可用。此外，我们使用minDate / MaxDate选项将小部件限制为一个12个月的时间段。如果您愿意，还可以在return'd对象中包含numberOfMonths: [ 3, 4 ]以一次显示整年。

Answer 5

简单的解决方案：

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

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

Answer 6

我知道这是一个非常古老的问题，但也许对某人有帮助。如果您设置选项<span>，则可以看到带有年份值的changeYear: true，但如果您设置<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>

 textView.setTextAppearance(R.style.Headline);