jQuery 日期选择器在滚动时的位置由固定标头中的按钮触发

jquery datepicker position on scroll triggered by button in fixed header

本文关键字：按钮 选择器 日期 滚动 位置 jQuery      更新时间：2023-09-26

在搜索了几个小时并挖掘了jQuery UI代码之后，我仍然不知道如何纠正我的特定情况。我正在开发一个应用程序，该应用程序使用 PHP 和数据表.js在表中显示数据库中的数据。某些列具有可编辑的输入字段，供将更新数据的员工使用。有三个输入字段绑定到显示 jQuery 日期选择器的按钮。选择行时，单击需要数据的字段的相应按钮，然后从日期选取器中选择日期，输入字段将填充所选日期。绑定到输入字段的按钮位于固定位置，因此它们向下滚动页面。用户滚动页面后，日期选取器将放置在用户视图下方，具体取决于用户向下滚动的距离。使用 Chrome 的检查器，我看到日期选择器附加到文档底部的关闭正文标签上方，这使得可以理解为什么日期选择器完全不在视野中，但仍然存在于页面上。如何在用户滚动时使用固定按钮将 jQuery 日期选择器保持在适当的位置???

我希望我对我想要做的事情足够清楚，因为这里很可能有更多的信息。如果需要，屏幕截图在这里...

原始位置和滚动后的屏幕截图

有时需要使用相同的日期同时更新多行，这就是未将日期选取器绑定到单个输入字段的原因。最终会有数千行，因此需要滚动。

这是 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，这是设置日期选择器非常基本的...

$("#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("");
}

}

函数 getPaidDate（） {

if($('tr').hasClass('active') && $('#paid-date').val()) {
    $('tr.active td .paid-input').val($('#paid-date').val());
}else {
    $('tr td .paid-input').val("");
}

}

函数 getToBePaid（） {

if($('tr').hasClass('active') && $('#tobe-paid').val()) {
    $('tr.active td .tobepaid-input').val($('#tobe-paid').val());
}else {
    $('tr td .tobepaid-input').val("");
}

}

在用

头撞了几次桌子后，我解决了自己的问题，它是如此简单。唯一需要的是在 jquery-ui 中为 .ui-datepicker 类设置顶部位置.css因此......

原始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，否则它将被覆盖。现在，无论您滚动到页面上的哪个位置，日期选择器小部件都会显示带有按钮。

相关文章：