我使用jQuery日期选择器在我的应用程序上显示日历。我想知道我是否可以使用它来显示月和年(2010年5月)而不是日历?
当前回答
我对公认的答案有一定的困难，没有其他答案可以用最小的努力作为基础。因此，我决定对已接受答案的最新版本进行调整，直到它至少满足最低的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;
}
就是这样。希望以上内容能节省更多读者的时间。
其他回答
标记回答工作!! 但不是在我的情况下，有一个以上的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/
选择月-选择示例
像其他许多人一样，我遇到了许多问题，试图这样做，只有一个解决方案的组合张贴，最终一个大黑客使它完美，让我有一个解决方案，适用于所有的日期格式和本地化，就像正常的数据采集器。
我在这个帖子中尝试过的其他解决方案的问题:
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”
对上面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
}
我综合了以上许多好的答案，得出了以下结论:
$('#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:否则关闭日期字段将闪烁很短的一段时间，这是非常恼人的。
我知道我的解决办法还远远不够好，但现在它正在工作。希望能有所帮助。
推荐文章
- 给一个数字加上st, nd, rd和th(序数)后缀
- 如何以编程方式触发引导模式?
- setTimeout带引号和不带括号的区别
- 在JS的Chrome CPU配置文件中，'self'和'total'之间的差异
- 用javascript检查输入字符串中是否包含数字
- 如何使用JavaScript分割逗号分隔字符串?
- 在Javascript中~~(“双波浪号”)做什么?
- 谷歌chrome扩展::console.log()从后台页面?
- 未捕获的SyntaxError:
- [].slice的解释。调用javascript?
- 在jQuery中的CSS类更改上触发事件
- jQuery日期/时间选择器
- 我如何预填充一个jQuery Datepicker文本框与今天的日期?
- 数组的indexOf函数和findIndex函数的区别
- jQuery添加必要的输入字段
