Bootstrap 日期范围选择器移动突出显示更改日期时的前一个日期

Posted 2023-05-07

【中文标题】Bootstrap 日期范围选择器移动突出显示更改日期时的前一个日期

【英文标题】：Bootstrap date range picker mobile highlights previous date when changing date

【发布时间】：2016-07-11 12:46:41

【问题描述】：

我使用带有 2 个日历的引导程序 date range picker，因此人们可以选择 start 和 end 日期。我所做的新事情是，一旦用户选择了开始日期，我就会专注于结束日期，这样日历就会自动弹出。

小提琴？

我尝试设置一个小提琴，但它在小提琴上不起作用，但您始终可以在插件网站上进行测试，因为它也发生在原始插件上。请在此处查看date range picker website。

问题

在 iPhone 上，当我选择开始日期时，结束日期日历会自动弹出，这很棒。但问题是，它悬停在我有手指的地方。因此，如果您查看屏幕截图，我在 START 日历上选择了 8th，当它聚焦在 END 日历上时，它也会自动悬停在 6th 上，因为当我选择 8th 时我的手指在同一区域。

如何解决这个问题？我尝试了所有的ios hover issue 修复插件和解决方案，但似乎没有解决这个问题。

【参考方案1】：

当您在用户选择开始日期后显示结束日期日期选择器时，您可以销毁并重新初始化它吗？

每当用户选择日期时，它都会使网站变慢。 我没有 I-phone，所以我无法复制，所以这只是假设。

【参考方案2】：

我会设置autoclose: true，以便在选择日期时自动关闭日期选择器。 然后，您可以使用hide 事件来知道何时显示“结束”日期选择器，但在这里您设置一个小的超时时间，例如 100-200 毫秒

$('#datepicker-start').datepicker(
    autoclose: true
).on( 'hide', function(e) 
    window.setTimeout(function()
        $('#datepicker-end').datepicker('show');
    , 100)
);
$('#datepicker-end').datepicker();

查看Fiddle