Disable hover functionality on flatpickr range calendar

Question

I've been asked to slightly change the functionality on one of the range pickers on our site. The client would like to remove the hover after you clicked the first date. You should be able to click once to set the start date, then move to the end date with the cursor with no visual feedback and then click again to set the end date.

Here's what I have so far:

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

There are two ways to do that:

1. Extend the CSS, creating a sort of custom theme for the plugin (personally, i prefer this way)
2. Modify the JS of the plugin, will give a 'cleaner' solution, but the plugin will be a fork of the original, so no more updates and so on.

As I think that the first solution is the best in most of the use cases, here an implementation:

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