我使用jQuery日期选择器在我的应用程序上显示日历。我想知道我是否可以使用它来显示月和年(2010年5月)而不是日历?
当前回答
我今天也有同样的需求，在github上找到了这个，使用jQueryUI工作，并在日历中有月份选择器来代替日期
https://github.com/thebrowser/jquery.ui.monthpicker
其他回答
像其他许多人一样，我遇到了许多问题，试图这样做，只有一个解决方案的组合张贴，最终一个大黑客使它完美，让我有一个解决方案，适用于所有的日期格式和本地化，就像正常的数据采集器。
我在这个帖子中尝试过的其他解决方案的问题:
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”
这是一个破解(更新了完整的。html文件):
<!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) {
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 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>
编辑 Jsfiddle为上面的例子: http://jsfiddle.net/DBpJe/7755/
编辑2 仅在单击完成按钮时将月年值添加到输入框。 也允许删除输入框的值，这是不可能在上述领域 http://jsfiddle.net/DBpJe/5103/
编辑3 根据rexwolf的解决方案更新了更好的解决方案。 http://jsfiddle.net/DBpJe/5106
这是我想到的。它隐藏了日历，而不需要额外的样式块，并添加了一个清除按钮，以解决单击输入后无法清除值的问题。同样适用于同一页面上的多个月份选择器。
HTML:
<input type='text' class='monthpicker'>
JavaScript:
$(".monthpicker").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: "yy-mm",
showButtonPanel: true,
currentText: "This Month",
onChangeMonthYear: function (year, month, inst) {
$(this).val($.datepicker.formatDate('yy-mm', new Date(year, month - 1, 1)));
},
onClose: function(dateText, inst) {
var month = $(".ui-datepicker-month :selected").val();
var year = $(".ui-datepicker-year :selected").val();
$(this).val($.datepicker.formatDate('yy-mm', new Date(year, month, 1)));
}
}).focus(function () {
$(".ui-datepicker-calendar").hide();
}).after(
$("<a href='javascript: void(0);'>clear</a>").click(function() {
$(this).prev().val('');
})
);
在jQueryUI.com上搜索datepicker后，以下是我对你问题的结论和答案。
首先，我想对你的问题说不。你不能只使用jQueryUI datepicker来选择月份和年份。不支持。它没有回调函数。
但是你可以通过使用css来隐藏日期等，让它只显示月份和年份。我认为这没有意义因为你需要点击日期来选择日期。
我只能说你得用另一个约会工具。就像罗杰建议的那样。
我知道这个回复有点晚，但几天前我也遇到了同样的问题，我已经有了一个很好的解决方案。 首先，我在这里找到了这个很棒的日期选择器
然后我刚刚更新了CSS类(jquery.calendarPicker.css)，它像这样随示例而来:
.calMonth {
/*border-bottom: 1px dashed #666;
padding-bottom: 5px;
margin-bottom: 5px;*/
}
.calDay
{
display:none;
}
当你改变任何东西时，插件会触发一个事件DateChanged，所以你没有点击某一天并不重要(它适合作为年和月选择器)
希望能有所帮助!
推荐文章
- 什么时候JavaScript是同步的?
- 在jQuery中取消<select>的最佳方法?
- 如何在Typescript中解析JSON字符串
- jQuery的“输入”事件
- Javascript reduce()在对象
- 在angularJS中& vs @和=的区别是什么
- 错误"Uncaught SyntaxError:意外的标记与JSON.parse"
- JavaScript中的querySelector和querySelectorAll vs getElementsByClassName和getElementById
- 给一个数字加上st, nd, rd和th(序数)后缀
- 如何以编程方式触发引导模式?
- setTimeout带引号和不带括号的区别
- 在JS的Chrome CPU配置文件中，'self'和'total'之间的差异
- 用javascript检查输入字符串中是否包含数字
- 如何使用JavaScript分割逗号分隔字符串?
- 在Javascript中~~(“双波浪号”)做什么?
