jQuery UI的日期选择日/月只,而不是一年的选择(jquery ui datepicker d

2019-06-23 19:36发布

我已经在这里搜查SO并创办了这个问题,各地,但没有妥善的解决方案。 随着jQueryUI的DatePicker的,我需要选择所有年份的递归日期,所以我不想秀年的选择,“因为它没有任何意义。

我怎样才能像下面这样的调用内部获得此?

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

注:我不能使用CSS的解决方案,建议在这里 .ui-datepicker-year{ display:none; } .ui-datepicker-year{ display:none; }因为有在同一个页面的其他datepickers。

任何帮助将不胜感激。

提前致谢。

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文件建立,

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

我发现,使用在输入一类是指定我们想出来的日期选择器的哪个行为更简单的方法。

如果找到了生日类,我们使用了1904年,而不是无论当年是因为1904年是闰年这确保了2月29日可用。 此外,我们限制了小工具,一个12个月期间用的minDate / MAXDATE选项。 你也可以包括numberOfMonths: [ 3, 4 ]在return'd对象来一次,如果你想显示全年。



Answer 5:

对于这个简单的解决方案:

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

它不会影响到在同一个页面的其他datepickers。



Answer 6:

我知道这是一个很老的quesion,但也许这将是有帮助的人。 如果设置选项changeYear: false ,你可以看到一个<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> 



文章来源: jquery ui datepicker day/month only, not year selection