禁用flatpacker范围日历上的悬停功能

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

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

1. 扩展CSS，为插件创建一种自定义主题(就我个人而言，我更喜欢这种方式(
2. 修改插件的JS，会给出一个"更干净"的解决方案，但插件会是原来的分叉，所以没有更多的更新等等

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

$("[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/>