jquery UI日期选择器月份和年份只有css定位问题
问题描述:
我已经实现了这里讨论的解决方案: JQuery Datetime picker - Need to pick month and year only.它运行良好。我发现的唯一问题是,当日期选择器出现在输入字段上方时(例如,当下面没有足够的空间时),那么选取器的位置是错误的(它太高了,在选取器和输入之间留下间隙领域)。jquery UI日期选择器月份和年份只有css定位问题
大概这是因为我动态地隐藏了选择器之后之后的月份天数,因此它被定位为它仍然是完整的日期选择器。任何人有任何想法如何解决这个问题?
答
您可以在显示之前操作datepicker
,但请记住,如果页面上有其他日期选择器,则需要重置,因为只有1个实际日期选择器<div>
。
我有created a demo这可能会做你想做的。希望能帮助到你。
HTML
Normal: <input type="text">
<p>No days: <input type="text" class="noDays"></p>
CSS
p {
position:absolute;
bottom:5px;
}
div.noDays table {
display:none;
}
的JavaScript(需要jQuery和jQueryUI的)
$('input').datepicker({
showButtonPanel: true,
changeMonth: true,
changeYear: true,
dateFormat:'MM yy',
beforeShow: function(input, inst) {
if ($(input).hasClass('noDays')) {
$('#ui-datepicker-div').addClass('noDays');
} else {
$('#ui-datepicker-div').removeClass('noDays');
$(this).datepicker('option', 'dateFormat', 'yy-mm-dd');
}
},
onClose: function(dateText, inst) {
if ($('#ui-datepicker-div').hasClass('noDays')) {
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));
}
}
});
感谢安迪,你的方法固定次e问题。 – benb 2011-04-28 16:21:05