我使用jQuery日期选择器在我的应用程序上显示日历。我想知道我是否可以使用它来显示月和年(2010年5月)而不是日历?
当前回答
这段代码对我来说是完美无缺的:
<script type="text/javascript">
$(document).ready(function()
{
$(".monthPicker").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).val($.datepicker.formatDate('MM yy', new Date(year, month, 1)));
}
});
$(".monthPicker").focus(function () {
$(".ui-datepicker-calendar").hide();
$("#ui-datepicker-div").position({
my: "center top",
at: "center bottom",
of: $(this)
});
});
});
</script>
<label for="month">Month: </label>
<input type="text" id="month" name="month" class="monthPicker" />
输出是:
其他回答
的事: http://www.mattkruse.com/javascript/calendarpopup/
选择月-选择示例
使用onSelect回调并手动删除年份部分,并手动设置字段中的文本
我知道这个回复有点晚,但几天前我也遇到了同样的问题,我已经有了一个很好的解决方案。 首先,我在这里找到了这个很棒的日期选择器
然后我刚刚更新了CSS类(jquery.calendarPicker.css),它像这样随示例而来:
.calMonth {
/*border-bottom: 1px dashed #666;
padding-bottom: 5px;
margin-bottom: 5px;*/
}
.calDay
{
display:none;
}
当你改变任何东西时,插件会触发一个事件DateChanged,所以你没有点击某一天并不重要(它适合作为年和月选择器)
希望能有所帮助!
我尝试了这里提供的各种解决方案,如果您只是想要几个下拉列表,它们工作得很好。
最好的(外表等)这里建议的'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);
};
如上所述,这是一个老问题,但我发现它有用,所以想添加反馈与替代解决方案。
如果有人想也为多个日历它不是很难添加这个功能到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是这里的关键:)