在搜索了几个小时并挖掘了jQuery UI代码后,我仍然对如何纠正我的特定情况感到茫然。我正在开发一个应用程序,它使用PHP和datatables.js显示表中数据库的数据。某些列具有可为将更新数据的人员编辑的输入字段。绑定到按钮的三个输入字段显示jQuery datepicker。选择行时,单击需要数据的字段的相应按钮,然后从日期选择器中选择日期,将使用所选日期填充输入字段。绑定到输入字段的按钮位于固定位置,因此它们向下滚动页面。一旦页面被用户滚动,则datepicker位于远离用户视图的下方,具体取决于它们滚动的距离。使用Chrome的检查器,我看到日期选择器附加到文档底部正好在关闭正文标记上方,这使得可以理解为什么日期选择器远离视图,但仍然存在于页面上。当用户滚动???
时,如何使用固定按钮将jQuery日期选择器保持在适当位置我希望我能够清楚地了解我要做的事情,因为这里的信息很可能比这里所需要的更多。如果需要,屏幕截图就在这里......
Screenshot of original position and after scroll
有时需要使用相同的日期同时更新多行,这是不将datepicker绑定到各个输入字段的原因。最终将有数千行,因此需要滚动。
这是HTML ...
<input name="approved-date" type="hidden" id="approved-date" onchange="getApprovedDate()" />
<input name="tobe-paid" type="hidden" id="tobe-paid" onchange="getToBePaid()" />
<input name="paid-date" type="hidden" id="paid-date" onchange="getPaidDate()" />
这里使用的jQuery是设置datepicker的基础......
$("#approved-date").datepicker({
showOn: 'button',
dateFormat: 'yy-mm-dd'
});
$("#paid-date").datepicker({
showOn: 'button',
dateFormat: 'yy-mm-dd'
});
$("#tobe-paid").datepicker({
showOn: 'button',
dateFormat: 'yy-mm-dd'
});
$('#approved-date + button').button({
text: true,
label: 'Approved Date'
});
$('#paid-date + button').button({
text: true,
label: 'Paid Date'
});
$('#tobe-paid + button').button({
text: true,
label: 'Verified Date'
});
最后,jQuery用于将所选日期添加到突出显示的行的输入字段中....
function getApprovedDate() {
if($('tr').hasClass('active') && $('#approved-date').val()) {
$('tr.active td .approved-input').val($('#approved-date').val());
if($('tr.active td.confirmed').html() == 1) {
$('tr.active td .claim-amount').val('$70');
}else if($('tr.active td.confirmed').html() == 0) {
$('tr.active td .claim-amount').val('$50');
}
}else {
$('tr td .approved-input').val("");
}
}
function getPaidDate(){
if($('tr').hasClass('active') && $('#paid-date').val()) {
$('tr.active td .paid-input').val($('#paid-date').val());
}else {
$('tr td .paid-input').val("");
}
}
function getToBePaid(){
if($('tr').hasClass('active') && $('#tobe-paid').val()) {
$('tr.active td .tobepaid-input').val($('#tobe-paid').val());
}else {
$('tr td .tobepaid-input').val("");
}
}
答案 0 :(得分:0)
我几次把头撞在桌子上后,我解决了自己的问题,这很简单。唯一需要的是在jquery-ui.css中设置.ui-datepicker类的顶部位置......
原创CSS ......
.ui-datepicker {
width: 17em;
padding: .2em .2em 0;
display: none;
}
修改CSS ...
.ui-datepicker {
width: 17em;
padding: .2em .2em 0;
display: none;
top: 70px !important;
}
对我来说70px是正确的位置,所以如果有人遇到这个问题,只需将最高位置设置为你需要的任何东西,并确保包括!important或它将被覆盖。现在,无论您在页面上滚动到何处,都会使用按钮显示datepicker小部件。