我使用jQuery日期选择器在我的应用程序上显示日历。我想知道我是否可以使用它来显示月和年(2010年5月)而不是日历?
当前回答
这是我想到的。它隐藏了日历，而不需要额外的样式块，并添加了一个清除按钮，以解决单击输入后无法清除值的问题。同样适用于同一页面上的多个月份选择器。
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('');
})
);
其他回答
我使用了这段代码，并完美地工作
$(".your_input_class").datepicker({
dateFormat: 'MM yy',
changeMonth: true,
changeYear: true,
showButtonPanel: true,
startView: "months",
minViewMode: "months"
});
以上答案都很不错。我唯一的抱怨是，一旦设置了值，就不能清除它。另外，我更喜欢像插件一样扩展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();
对上面BrianS近乎完美的回答做了一些改进:
我对显示的值集进行了regexed，因为我认为在这种情况下，它实际上使它更具可读性(尽管注意，我使用的格式略有不同) 我的客户不想要日历，所以我添加了一个显示/隐藏类，在不影响任何其他日期选择器的情况下做到这一点。类的删除是在一个定时器上，以避免表在日期选择器淡出时闪回，这在IE中似乎非常明显。
编辑:剩下要解决的一个问题是没有办法清空datepicker -清除字段并单击离开，它重新填充所选的日期。
EDIT2:我还没有设法很好地解决这个问题(即没有在输入旁边添加一个单独的清除按钮)，所以最终只使用这个:https://github.com/thebrowser/jquery.ui.monthpicker -如果有人能得到标准的UI一个来做这件事，那将是惊人的。
$('.typeof__monthpicker').datepicker({
dateFormat: 'mm/yy',
showButtonPanel:true,
beforeShow:
function(input, dpicker)
{
if(/^(\d\d)\/(\d\d\d\d)$/.exec($(this).val()))
{
var d = new Date(RegExp.$2, parseInt(RegExp.$1, 10) - 1, 1);
$(this).datepicker('option', 'defaultDate', d);
$(this).datepicker('setDate', d);
}
$('#ui-datepicker-div').addClass('month_only');
},
onClose:
function(dt, dpicker)
{
setTimeout(function() { $('#ui-datepicker-div').removeClass('month_only') }, 250);
var m = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var y = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(y, m, 1));
}
});
你还需要这样的样式规则:
#ui-datepicker-div.month_only .ui-datepicker-calendar {
display:none
}
像其他许多人一样，我遇到了许多问题，试图这样做，只有一个解决方案的组合张贴，最终一个大黑客使它完美，让我有一个解决方案，适用于所有的日期格式和本地化，就像正常的数据采集器。
我在这个帖子中尝试过的其他解决方案的问题:
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”
我对公认的答案有一定的困难，没有其他答案可以用最小的努力作为基础。因此，我决定对已接受答案的最新版本进行调整，直到它至少满足最低的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;
}
就是这样。希望以上内容能节省更多读者的时间。
推荐文章
- 如何使用Jest测试对象键和值是否相等?
- 将长模板文字行换行为多行，而无需在字符串中创建新行
- 如何在JavaScript中映射/减少/过滤一个集?
- Bower: ENOGIT Git未安装或不在PATH中
- HTML5文本区域占位符不出现
- 添加javascript选项选择
- 在Node.js中克隆对象
- 我如何捕捉Ajax查询后错误?
- 为什么在JavaScript的Date构造函数中month参数的范围从0到11 ?
- 使用JavaScript更改URL参数并指定默认值
- jQuery:什么是限制“数字”仅输入文本框的最佳方法?(允许使用小数点)
- 在window.setTimeout()发生之前取消/终止
- 如何删除未定义和空值从一个对象使用lodash?
- 检测当用户滚动到底部的div与jQuery
- 在JavaScript中检查字符串包含另一个子字符串的最快方法?
