我使用jQuery日期选择器在我的应用程序上显示日历。我想知道我是否可以使用它来显示月和年(2010年5月)而不是日历?
当前回答
在jQueryUI.com上搜索datepicker后,以下是我对你问题的结论和答案。
首先,我想对你的问题说不。你不能只使用jQueryUI datepicker来选择月份和年份。不支持。它没有回调函数。
但是你可以通过使用css来隐藏日期等,让它只显示月份和年份。我认为这没有意义因为你需要点击日期来选择日期。
我只能说你得用另一个约会工具。就像罗杰建议的那样。
其他回答
我今天也有同样的需求,在github上找到了这个,使用jQueryUI工作,并在日历中有月份选择器来代替日期
https://github.com/thebrowser/jquery.ui.monthpicker
以上答案都很不错。我唯一的抱怨是,一旦设置了值,就不能清除它。另外,我更喜欢像插件一样扩展jquery的方法。
这对我来说非常合适:
$.fn.monthYearPicker = function(options) {
options = $.extend({
dateFormat: "MM yy",
changeMonth: true,
changeYear: true,
showButtonPanel: true,
showAnim: ""
}, options);
function hideDaysFromCalendar() {
var thisCalendar = $(this);
$('.ui-datepicker-calendar').detach();
// Also fix the click event on the Done button.
$('.ui-datepicker-close').unbind("click").click(function() {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
thisCalendar.datepicker('setDate', new Date(year, month, 1));
});
}
$(this).datepicker(options).focus(hideDaysFromCalendar);
}
然后像这样调用:
$('input.monthYearPicker').monthYearPicker();
我遇到了日期选择器和月份选择器混合的问题。 我是这样解的。
$('.monthpicker').focus(function()
{
$(".ui-datepicker-calendar").show();
}).datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM/yy',
create: function (input, inst) {
},
onClose: function(dateText, inst) {
var month = 1+parseInt($("#ui-datepicker-div .ui-datepicker-month :selected").val());
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
}
});
我喜欢@user1857829的回答和他的“扩展jquery-like-a-plugin方法”。 我只是做了一点修改,当你以任何方式改变月份或年份时,选择器实际上会在字段中写入日期。 我发现在使用了一段时间后,我喜欢这种行为。
jQuery.fn.monthYearPicker = function(options) {
options = $.extend({
dateFormat: "mm/yy",
changeMonth: true,
changeYear: true,
showButtonPanel: true,
showAnim: "",
onChangeMonthYear: writeSelectedDate
}, options);
function writeSelectedDate(year, month, inst ){
var thisFormat = jQuery(this).datepicker("option", "dateFormat");
var d = jQuery.datepicker.formatDate(thisFormat, new Date(year, month-1, 1));
inst.input.val(d);
}
function hideDaysFromCalendar() {
var thisCalendar = $(this);
jQuery('.ui-datepicker-calendar').detach();
// Also fix the click event on the Done button.
jQuery('.ui-datepicker-close').unbind("click").click(function() {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
thisCalendar.datepicker('setDate', new Date(year, month, 1));
thisCalendar.datepicker("hide");
});
}
jQuery(this).datepicker(options).focus(hideDaysFromCalendar);
}
我还需要一个月份选择器。我做了一个简单的一年在标题和3行4个月下面。jQuery简单的月-年选择器。
推荐文章
- 检测用户何时离开网页的最佳方法?
- 当“模糊”事件发生时,我如何才能找到哪个元素的焦点去了*到*?
- React不会加载本地图像
- 如何将Blob转换为JavaScript文件
- 在另一个js文件中调用JavaScript函数
- 如何在svg元素中使用z索引?
- 熊猫能自动从CSV文件中读取日期吗?
- 如何求一个数的长度?
- 跨源请求头(CORS)与PHP头
- 如何用Express/Node以编程方式发送404响应?
- parseInt(null, 24) === 23…等等,什么?
- 使用jQuery获取第二个孩子
- JavaScript变量声明在循环外还是循环内?
- 元素在“for(…in…)”循环中排序
- 在哪里放置JavaScript在HTML文件?