[英]jquery datepicker position on scroll triggered by button in fixed header
在搜索了几个小时并浏览了jQuery UI代码之后,我仍然对如何纠正我的特定情况一无所知。 我正在开发一个使用PHP和datatables.js在表中显示数据库中数据的应用程序。 一些列具有可用于将要更新数据的人员可编辑的输入字段。 有三个绑定到显示jQuery datepicker的按钮的输入字段。 选择一行时,单击需要数据的字段的相应按钮,然后从日期选择器中选择一个日期,将使用所选日期填充输入字段。 绑定到输入字段的按钮处于固定位置,因此可以向下滚动页面。 用户滚动页面后,日期选择器将根据用户向下滚动的位置而位于用户视图的下方。 使用Chrome的检查器,我看到日期选择器被附加到文档的底部,紧靠在body标记上方,这使得可以理解为什么日期选择器不可见,但仍然存在于页面上。 当用户滚动时,如何通过固定按钮将jQuery 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 ...
$("#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("");
}
}
几次将头sm在桌子上后,我解决了自己的问题,这很简单。 唯一需要做的就是在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小部件都将带有按钮显示。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.