我使用jQuery日期选择器在我的应用程序上显示日历。我想知道我是否可以使用它来显示月和年(2010年5月)而不是日历?
当前回答
在jQueryUI.com上搜索datepicker后,以下是我对你问题的结论和答案。
首先,我想对你的问题说不。你不能只使用jQueryUI datepicker来选择月份和年份。不支持。它没有回调函数。
但是你可以通过使用css来隐藏日期等,让它只显示月份和年份。我认为这没有意义因为你需要点击日期来选择日期。
我只能说你得用另一个约会工具。就像罗杰建议的那样。
其他回答
如果您正在寻找月份选择器,请尝试jquery.mtz.monthpicker
这对我很有效。
options = {
pattern: 'yyyy-mm', // Default is 'mm/yyyy' and separator char is not mandatory
selectedYear: 2010,
startYear: 2008,
finalYear: 2012,
monthNames: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
};
$('#custom_widget').monthpicker(options);
我综合了以上许多好的答案,得出了以下结论:
$('#payCardExpireDate').datepicker(
{
dateFormat: "mm/yy",
changeMonth: true,
changeYear: true,
showButtonPanel: true,
onClose: function(dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1)).trigger('change');
},
beforeShow : function(input, inst) {
if ((datestr = $(this).val()).length > 0) {
year = datestr.substring(datestr.length-4, datestr.length);
month = datestr.substring(0, 2);
$(this).datepicker('option', 'defaultDate', new Date(year, month-1, 1));
$(this).datepicker('setDate', new Date(year, month-1, 1));
}
}
}).focus(function () {
$(".ui-datepicker-calendar").hide();
$("#ui-datepicker-div").position({
my: "center top",
at: "center bottom",
of: $(this)
});
});
这被证明是有效的,但面临许多bug,所以我被迫在datepicker的几个地方打补丁:
if($.datepicker._get(inst, "dateFormat") === "mm/yy")
{
$(".ui-datepicker-calendar").hide();
}
patch1: in _showDatepicker:平滑隐藏;
patch2: in _checkOffset:纠正月份选择器的定位(否则当字段位于浏览器底部时,偏移量检查关闭);
patch3:在_hideDatepicker的onClose:否则关闭日期字段将闪烁很短的一段时间,这是非常恼人的。
我知道我的解决办法还远远不够好,但现在它正在工作。希望能有所帮助。
标记回答工作!! 但不是在我的情况下,有一个以上的datepicker,只想实现在特定的datepicker
所以我使用实例的dp和找到datepicker Div 并添加hide类
这里的代码
<style>
.hide-day-calender .ui-datepicker-calendar{
display:none;
}
</style>
<script>
$('#dpMonthYear').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function (dateText, inst) {
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
},
beforeShow: function (elem,dp) {
$(dp.dpDiv).addClass('hide-day-calender'); //here a change
}
});
</script>
注意:你不能瞄准.ui-datepicker-calendar并设置css,因为它会在选择/更改时不断呈现
的事: http://www.mattkruse.com/javascript/calendarpopup/
选择月-选择示例
我对公认的答案有一定的困难,没有其他答案可以用最小的努力作为基础。因此,我决定对已接受答案的最新版本进行调整,直到它至少满足最低的JS编码/可重用性标准。
这里有一个比第三版(最新版)本·克勒的公认答案更清晰的解决方案。此外,它将:
不仅要使用mm/yy格式,还要使用包括 OP的MM yy。 不隐藏页面上其他日期选择器的日历。 不会用datestr隐式污染全局JS对象, 月、年等变量。
看看吧:
$('.date-picker').datepicker({
dateFormat: 'MM yy',
changeMonth: true,
changeYear: true,
showButtonPanel: true,
onClose: function (dateText, inst) {
var isDonePressed = inst.dpDiv.find('.ui-datepicker-close').hasClass('ui-state-hover');
if (!isDonePressed)
return;
var month = inst.dpDiv.find('.ui-datepicker-month').find(':selected').val(),
year = inst.dpDiv.find('.ui-datepicker-year').find(':selected').val();
$(this).datepicker('setDate', new Date(year, month, 1)).change();
$('.date-picker').focusout();
},
beforeShow: function (input, inst) {
var $this = $(this),
// For the simplicity we suppose the dateFormat will be always without the day part, so we
// manually add it since the $.datepicker.parseDate will throw if the date string doesn't contain the day part
dateFormat = 'd ' + $this.datepicker('option', 'dateFormat'),
date;
try {
date = $.datepicker.parseDate(dateFormat, '1 ' + $this.val());
} catch (ex) {
return;
}
$this.datepicker('option', 'defaultDate', date);
$this.datepicker('setDate', date);
inst.dpDiv.addClass('datepicker-month-year');
}
});
你需要的其他所有东西是下面的CSS:
.datepicker-month-year .ui-datepicker-calendar {
display: none;
}
就是这样。希望以上内容能节省更多读者的时间。