在 flatpickr 范围日历上禁用悬停功能

Question

我被要求稍微更改我们网站上其中一个范围选择器的功能。单击第一个日期后，客户希望删除悬停。您应该能够单击一次以设置开始日期，然后在没有视觉反馈的情况下使用光标移动到结束日期，然后再次单击以设置结束日期。

这是我目前的情况：

$("[data-range]").flatpickr({
  mode: "range",
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.6/flatpickr.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.6/flatpickr.min.js"></script>

<input type="text" data-range />

Answer 1

有两种方法可以做到这一点：

扩展 CSS，为插件创建一种自定义主题（个人而言，我更喜欢这种方式）
修改插件的JS，会给出'cleaner'的解决方案，但是插件是原版的fork，所以不再更新等。

因为我认为第一个解决方案在大多数用例中是最好的，这里有一个实现：

$("[data-range]").flatpickr({
  mode: "range",
})

span.flatpickr-day.inRange {
    background: #fff;
    box-shadow: 0 0 white;
    border: #fff;
}

span.flatpickr-day.endRange:not(.selected) {
    background: #fff !important;
    color: black !important;
    border: #fff !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.6/flatpickr.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.6/flatpickr.min.js"></script>

<input type="text" data-range/>

在 flatpickr 范围日历上禁用悬停功能

Disable hover functionality on flatpickr range calendar

javascript

jquery

flatpickr