我使用jQuery日期选择器在我的应用程序上显示日历。我想知道我是否可以使用它来显示月和年(2010年5月)而不是日历?
当前回答
使用onSelect回调并手动删除年份部分，并手动设置字段中的文本
其他回答
我对公认的答案有一定的困难，没有其他答案可以用最小的努力作为基础。因此，我决定对已接受答案的最新版本进行调整，直到它至少满足最低的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;
}
就是这样。希望以上内容能节省更多读者的时间。
我综合了以上许多好的答案，得出了以下结论:
$('#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:否则关闭日期字段将闪烁很短的一段时间，这是非常恼人的。
我知道我的解决办法还远远不够好，但现在它正在工作。希望能有所帮助。
像其他许多人一样，我遇到了许多问题，试图这样做，只有一个解决方案的组合张贴，最终一个大黑客使它完美，让我有一个解决方案，适用于所有的日期格式和本地化，就像正常的数据采集器。
我在这个帖子中尝试过的其他解决方案的问题:
Selecting a new date in a datepicker, would also change the (internal) date of other datepickers, so when you opened the other ones again (or tried getting their date), they would have a different date than the one displayed in their assigned input-field. The datepicker wouldn't "remember" the date when opened again. The code for juggling the dates used substringing so it wasn't compatible with all formats. The input-field wasn't updated correctly, if you typed in a wrongly formatted input-string for a date, and then clicked 'Close' on the datepicker. The monthpicker only changed the input-field on closing it, rather than whenever the values were changed. You couldn't have normal datepickers, which show the days, on the same page as monthpickers, which don't show the days.
我终于找到了一种方法来解决所有这些问题，甚至在原来的日期选择器!
注意:您不需要使用以下月份选择器脚本来修复普通jQuery数据选择器中的前四个问题。只需使用本文后面的Datepicker实例化脚本即可。问题5和问题6只涉及我尝试过的不同的月份选择解决方案。
问题1-3和问题5涉及如何在其内部代码中引用日期和月份选择器，以确保它们不会干扰其他日期和月份选择器，以及手动更新选择器。您可以在下面的实例中看到这一点。第四个问题是通过向datepicker函数添加一些自定义代码来解决的(参见示例中的注释，特别是关于onClose的注释)。
对于第六个问题，也就是最后一个问题，只涉及月份选择器和日期选择器一起使用，我们只需要正确地分开日期选择器和月份选择器。
那么，为什么不使用几个自定义的jQuery-UI月份选择插件呢? 当我写这篇文章时，我发现它们缺乏本地化灵活性/能力，有些缺乏动画支持……那么，该怎么办呢?从datepicker代码中滚出“自己的”!这为您提供了一个功能完整的月份选择器，具有日期选择器的所有功能，只是没有显示日期。
我用jQuery-UI v1.11.1代码提供了一个月份选择器js-script和附带的CSS-script，使用了下面描述的方法。只需将这些代码段复制到两个新文件中，分别是monthpicker.js和monthpicker.css，并使用下面的实例化代码段。
如果您想了解我将日期选择器转换为月份选择器的相当简单的过程，请向下滚动到最后一节。然后你可以用一个更新版本的jQuery-UI重复这个过程。
现在向页面添加日期选择器和月份选择器!
下面这些javascript代码片段与页面上的多个日期选择器和/或月份选择器一起工作，没有上述问题!通常通过使用'$(this)修正。很多:)
第一个脚本用于普通的日期选择器，第二个脚本用于“新的”月份选择器。
out注释的.after允许您创建一些元素来清除输入字段，它是从Paul Richards的答案中窃取来的。
我在我的月份选择器中使用“MM - yy”格式，在我的日期选择器中使用“yy- MM -dd”格式，但这与所有格式完全兼容，所以你可以自由使用你想要的任何一种格式。只需更改“dateFormat”选项。标准选项“showButtonPanel”，“showAnim”和“yearRange”当然是可选的，可根据您的愿望定制。
添加日期选择器
Datepicker实例化。 这幅画是从90年前到现在的。它可以帮助您保持输入字段的正确，特别是如果您设置了defaultDate、minDate和maxDate选项，但如果您不这样做，它可以处理它。它将与您选择的任何dateFormat工作。
注意:许多“new Date()”调用看起来很可笑，但我找不到另一种方法来将动态Date打包到声明中，而不为每个部分都这样做，因为我(据我所知)无法在该上下文中创建可重用的实例。如果有人知道在设置minDate和maxDate这样的环境中设置增强日期的更好方法，我会非常感激!
$('#MyDateTextBox').datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true,
showButtonPanel: true,
showMonthAfterYear: true,
showWeek: true,
showAnim: "drop",
constrainInput: true,
yearRange: "-90:",
minDate: new Date((new Date().getFullYear() - 90), new Date().getMonth(), new Date().getDate()),
maxDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),
defaultDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),
onClose: function (dateText, inst) {
// When onClose is called after we have clicked a day (and not clicked 'Close' or outside the datepicker), the input-field is automatically
// updated with a valid date-string. They will always pass, because minDate and maxDate are already enforced by the datepicker UI.
// This try is to catch and handle the situations, where you open the datepicker, and manually type in an invalid date in the field,
// and then close the datepicker by clicking outside the datepicker, or click 'Close', in which case no validation takes place.
try {
// If datepicker can parse the date using our formatstring, the instance will automatically parse
// and apply it for us (after the onClose is done).
// If the input-string is invalid, 'parseDate' will throw an exception, and go to our catch.
// If the input-string is EMPTY, then 'parseDate' will NOT throw an exception, but simply return null!
var typedDate = $.datepicker.parseDate($(this).datepicker('option', 'dateFormat'), $(this).val());
// typedDate will be null if the entered string is empty. Throwing an exception will force the datepicker to
// reset to the last set default date.
// You may want to just leave the input-field empty, in which case you should replace 'throw "No date selected";' with 'return;'
if (typedDate == null)throw "No date selected";
// We do a manual check to see if the date is within minDate and maxDate, if they are defined.
// If all goes well, the default date is set to the new date, and datepicker will apply the date for us.
var minDate = $(this).datepicker("option", "minDate");
var maxDate = $(this).datepicker("option", "maxDate");
if (minDate !== null && typedDate < minDate) throw "Date is lower than minDate!";
if (maxDate !== null && typedDate > maxDate) throw "Date is higher than maxDate!";
// We update the default date, because the date seems valid.
// We do not need to manually update the input-field, as datepicker has already done this automatically.
$(this).datepicker('option', 'defaultDate', typedDate);
}
catch (err) {
console.log("onClose: " + err);
// Standard behavior is that datepicker does nothing to fix the value of the input field, until you choose
// a new valid date, by clicking on a day.
// Instead, we set the current date, as well as the value of the input-field, to the last selected (and
// accepted/validated) date from the datepicker, by getting its default date. This only works, because
// we manually change the default date of the datepicker whenever a new date is selected, in both 'beforeShow'
// and 'onClose'.
var date = $(this).datepicker('option', 'defaultDate');
$(this).val($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), date));
$(this).datepicker('setDate', date);
}
},
beforeShow: function (input, inst) {
// beforeShow is particularly irritating when initializing the input-field with a date-string.
// The date-string will be parsed, and used to set the currently selected date in the datepicker.
// BUT, if it is outside the scope of the minDate and maxDate, the text in the input-field is not
// automatically updated, only the internal selected date, until you choose a new date (or, because
// of our onClose function, whenever you click close or click outside the datepicker).
// We want the input-field to always show the date that is currently chosen in our datepicker,
// so we do some checks to see if it needs updating. This may not catch ALL cases, but these are
// the primary ones: invalid date-format; date is too early; date is too late.
try {
// If datepicker can parse the date using our formatstring, the instance will automatically parse
// and apply it for us (after the onClose is done).
// If the input-string is invalid, 'parseDate' will throw an exception, and go to our catch.
// If the input-string is EMPTY, then 'parseDate' will NOT throw an exception, but simply return null!
var typedDate = $.datepicker.parseDate($(this).datepicker('option', 'dateFormat'), $(this).val());
// typedDate will be null if the entered string is empty. Throwing an exception will force the datepicker to
// reset to the last set default date.
// You may want to just leave the input-field empty, in which case you should replace 'throw "No date selected";' with 'return;'
if (typedDate == null)throw "No date selected";
// We do a manual check to see if the date is within minDate and maxDate, if they are defined.
// If all goes well, the default date is set to the new date, and datepicker will apply the date for us.
var minDate = $(this).datepicker("option", "minDate");
var maxDate = $(this).datepicker("option", "maxDate");
if (minDate !== null && typedDate < minDate) throw "Date is lower than minDate!";
if (maxDate !== null && typedDate > maxDate) throw "Date is higher than maxDate!";
// We update the input-field, and the default date, because the date seems valid.
// We also manually update the input-field, as datepicker does not automatically do this when opened.
$(this).val($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), typedDate));
$(this).datepicker('option', 'defaultDate', typedDate);
}
catch (err) {
// Standard behavior is that datepicker does nothing to fix the value of the input field, until you choose
// a new valid date, by clicking on a day.
// We want the same behavior when opening the datepicker, so we set the current date, as well as the value
// of the input-field, to the last selected (and accepted/validated) date from the datepicker, by getting
// its default date. This only works, because we manually change the default date of the datepicker whenever
// a new date is selected, in both 'beforeShow' and 'onClose', AND have a default date set in the datepicker options.
var date = $(this).datepicker('option', 'defaultDate');
$(this).val($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), date));
$(this).datepicker('setDate', date);
}
}
})
//.after( // this makes a link labeled "clear" appear to the right of the input-field, which clears the text in it
// $("<a href='javascript: void(0);'>clear</a>").click(function() {
// $(this).prev().val('');
// })
//)
;
添加月份选择器
在想要使用月份选择器的页面中包含monthpicker.js文件和monthpicker.css文件。
Monthpicker实例化 从这个月份选择器检索的值始终是所选月份的第一天。 从当前月份开始，范围为100年前和未来10年。
$('#MyMonthTextBox').monthpicker({
dateFormat: 'MM yy',
changeMonth: true,
changeYear: true,
showMonthAfterYear: true,
showAnim: "drop",
constrainInput: true,
yearRange: "-100Y:+10Y",
minDate: new Date(new Date().getFullYear() - 100, new Date().getMonth(), 1),
maxDate: new Date((new Date().getFullYear() + 10), new Date().getMonth(), 1),
defaultDate: new Date(new Date().getFullYear(), new Date().getMonth(), 1),
// Monthpicker functions
onClose: function (dateText, inst) {
var date = new Date(inst.selectedYear, inst.selectedMonth, 1);
$(this).monthpicker('option', 'defaultDate', date);
$(this).monthpicker('setDate', date);
},
beforeShow: function (input, inst) {
if ($(this).monthpicker("getDate") !== null) {
// Making sure that the date set is the first of the month.
if($(this).monthpicker("getDate").getDate() !== 1){
var date = new Date(inst.selectedYear, inst.selectedMonth, 1);
$(this).monthpicker('option', 'defaultDate', date);
$(this).monthpicker('setDate', date);
}
} else {
// If the date is null, we reset it to the defaultDate. Make sure that the defaultDate is always set to the first of the month!
$(this).monthpicker('setDate', $(this).monthpicker('option', 'defaultDate'));
}
},
// Special monthpicker function!
onChangeMonthYear: function (year, month, inst) {
$(this).val($.monthpicker.formatDate($(this).monthpicker('option', 'dateFormat'), new Date(year, month - 1, 1)));
}
})
//.after( // this makes a link labeled "clear" appear to the right of the input-field, which clears the text in it
// $("<a href='javascript: void(0);'>clear</a>").click(function() {
// $(this).prev().val('');
// })
//)
;
就是这样! 这就是你制作月选机所需要的。
我似乎不能使jsfiddle工作与此，但它是为我工作在我的ASP。NET MVC项目。只需要像往常一样在页面中添加一个日期选择器，并将上面的脚本合并到一起，可以通过更改选择器(意味着$(“#MyMonthTextBox”))来选择适合您的内容。
我希望这能帮助到一些人。
链接到一些额外的日期和月份选择器设置:
Monthpicker working on the last day of the month. The date you get from this monthpicker will always be the last day of the month. Two collaborating monthpickers; 'start' is working on the first of the month, and 'end' is working on the last of the month. They are both restricted by each other, so choosing a month on 'end' which is before the selected month on 'start', will change 'start' to be the same month as 'end'. And vice versa. OPTIONAL: When selecting a month on 'start', the 'minDate' on 'end' is set to that month. To remove this feature, comment out one line in onClose (read the comments). Two collaborating datepickers; They are both restricted by each other, so choosing a date on 'end' which is before the selected date on 'start', will change 'start' to be the same month as 'end'. And vice versa. OPTIONAL: When selecting a date on 'start', the 'minDate' on 'end' is set to that date. To remove this feature, comment out one line in onClose (read the comments).
我是如何把日期选择器变成月份选择器的
我已经从jquery-ui-1.11.1.js中获取了所有的javascript代码，并将其粘贴到一个新的js文件中，并替换了以下字符串:
"datepicker" ==> "monthpicker" "日期选择器" ==> "月选择器" "日期选择器" ==> "月份选择器" "日期选择器" ==> "月份选择器"
然后我删除了for循环的一部分，它创建了整个ui-datepicker-calendar div(其他解决方案使用CSS隐藏的div)。这可以在_generateHTML: function (inst)中找到。
找到这一行:
"</div><table class='ui-datepicker-calendar'><thead>" +
标记所有内容，从结束div标签之后一直到(不包括)它说的那行:
drawMonth++;
现在它不高兴了，因为我们需要关闭一些东西。在之前的div结束标签之后，添加这个:
";
代码现在应该很好地拼接在一起了。下面是一个代码片段，展示了你应该得到的结果:
...other code...
calender += "<div class='ui-monthpicker-header ui-widget-header ui-helper-clearfix" + cornerClass + "'>" +
(/all|left/.test(cornerClass) && row === 0 ? (isRTL ? next : prev) : "") +
(/all|right/.test(cornerClass) && row === 0 ? (isRTL ? prev : next) : "") +
this._generateMonthYearHeader(inst, drawMonth, drawYear, minDate, maxDate,
row > 0 || col > 0, monthNames, monthNamesShort) + // draw month headers
"</div>";
drawMonth++;
if (drawMonth > 11) {
drawMonth = 0;
drawYear++;
}
...other code...
然后我从jquery-ui.css中复制/粘贴属于datepickers的代码到一个新的css文件中，并替换了以下字符串:
“datepicker”==>“monthpicker”
感谢Ben Koehler的解决方案。
然而，我有一个问题与多个实例的日期选择，其中一些需要与日期选择。Ben Koehler的解决方案(在编辑3中)有效，但在所有情况下都隐藏了日期选择。下面是解决这个问题的更新:
$('.date-picker').datepicker({
dateFormat: "mm/yy",
changeMonth: true,
changeYear: true,
showButtonPanel: true,
onClose: function(dateText, inst) {
if($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1) {
$(this).datepicker(
'setDate',
new Date(
$("#ui-datepicker-div .ui-datepicker-year :selected").val(),
$("#ui-datepicker-div .ui-datepicker-month :selected").val(),
1
)
).trigger('change');
$('.date-picker').focusout();
}
$("#ui-datepicker-div").removeClass("month_year_datepicker");
},
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));
$("#ui-datepicker-div").addClass("month_year_datepicker");
}
}
});
@本·克勒，太棒了!我做了一个小修改，以便多次使用日期选择器的单个实例可以正常工作。如果不进行此修改，日期将被错误地解析，并且先前选择的日期不会突出显示。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<script type="text/javascript">
$(function() {
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
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));
},
beforeShow : function(input, inst) {
var datestr;
if ((datestr = $(this).val()).length > 0) {
year = datestr.substring(datestr.length-4, datestr.length);
month = jQuery.inArray(datestr.substring(0, datestr.length-5), $(this).datepicker('option', 'monthNamesShort'));
$(this).datepicker('option', 'defaultDate', new Date(year, month, 1));
$(this).datepicker('setDate', new Date(year, month, 1));
}
}
});
});
</script>
<style>
.ui-datepicker-calendar {
display: none;
}
</style>
</head>
<body>
<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
</body>
</html>
