我使用jQuery日期选择器在我的应用程序上显示日历。我想知道我是否可以使用它来显示月和年(2010年5月)而不是日历?
当前回答
感谢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");
}
}
});
其他回答
对于月份选择器,使用jQuery v1.7.2
我有以下javascript正在做的事情
$l("[id$=txtDtPicker]").monthpicker({
showOn: "both",
buttonImage: "../../images/Calendar.png",
buttonImageOnly: true,
// Default is 'mm/yyyy' and separator char is not mandatory
pattern: 'yyyymm',
monthNames: [
'Jan',
'Fev',
'Mar',
'Abr',
'Mai',
'Jun',
'Jul',
'Ago',
'Set',
'Out',
'Nov',
'Dez'
]
});
我还需要一个月份选择器。我做了一个简单的一年在标题和3行4个月下面。jQuery简单的月-年选择器。
如果有人想也为多个日历它不是很难添加这个功能到jquery ui。 简化搜索功能:
x+='<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix'+t+'">'+(/all|left/.test(t)&&C==0?c?f:n:"")+(
把这个加在x前面
var accl = ''; if(this._get(a,"justMonth")) {accl = ' ui-datepicker-just_month';}
搜索
<table class="ui-datepicker-calendar
并将其替换为
<table class="ui-datepicker-calendar'+accl+'
也可以搜索
this._defaults={
将其替换为
this._defaults={justMonth:false,
对于CSS,你应该使用:
.ui-datepicker table.ui-datepicker-just_month{
display: none;
}
所有这些都完成后,只需转到所需的datepicker init函数并提供设置变量
$('#txt_month_chart_view').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
justMonth: true,
create: function(input, inst) {
$(".ui-datepicker table").addClass("badbad");
},
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));
}
});
justMonth: true是这里的关键:)
的事: http://www.mattkruse.com/javascript/calendarpopup/
选择月-选择示例
我尝试了这里提供的各种解决方案,如果您只是想要几个下拉列表,它们工作得很好。
最好的(外表等)这里建议的'picker' (https://github.com/thebrowser/jquery.ui.monthpicker)基本上是旧版jquery-ui datepicker的副本,并重写了_generateHTML。然而,我发现它不再与当前的jquery-ui(1.10.2)很好地发挥,并有其他问题(esc不关闭,在其他窗口小部件打开时不关闭,有硬编码的样式)。
我没有试图修复那个月份选择器,也没有用最新的日期选择器重新尝试相同的过程,而是钩入了现有日期选择器的相关部分。
这包括重写:
_generateHTML(构建月份选择器标记) parseDate(因为它不喜欢没有day组件), _selectDay (datepicker使用.html()获取日期值)
由于这个问题有点老,并且已经得到了很好的回答,这里只有_selectDay覆盖来展示这是如何完成的:
jQuery.datepicker._base_parseDate = jQuery.datepicker._base_parseDate || jQuery.datepicker.parseDate;
jQuery.datepicker.parseDate = function (format, value, settings) {
if (format != "M y") return jQuery.datepicker._hvnbase_parseDate(format, value, settings);
// "M y" on parse gives error as doesn't have a day value, so 'hack' it by simply adding a day component
return jQuery.datepicker._hvnbase_parseDate("d " + format, "1 " + value, settings);
};
如上所述,这是一个老问题,但我发现它有用,所以想添加反馈与替代解决方案。
推荐文章
- 什么时候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中~~(“双波浪号”)做什么?