Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Enhance visual indication of a selected date range

See original GitHub issue

I would love to see a visual indication of selected dates that fall in the middle of a date range selection. While useful in small date ranges, this is especially useful for ranges that fall across multiple months where there is no indication at all that a date is within a range. Perhaps something similar to the DateRangePicker component.

I think it would be relatively simple with the addition of a css class to all values falling within the range and unique classes for the ends of the range. I say unique classes so that one could style the end start and end dates differently such as in the example image below where the start date has a left border radius and the end date has a right border radius.

Possible implementation:

Here i’ve added the classes startRange, inRange, and endRange.

...
<span class="flatpickr-day" tabindex="0">18</span>
<span class="flatpickr-day" tabindex="0">19</span>
<span class="flatpickr-day selected startRange" tabindex="0">20</span>
<span class="flatpickr-day inRange" tabindex="0">21</span>
<span class="flatpickr-day inRange" tabindex="0">22</span>
<span class="flatpickr-day inRange" tabindex="0">23</span>
<span class="flatpickr-day inRange" tabindex="0">24</span>
<span class="flatpickr-day selected endRange" tabindex="0">25</span>
<span class="flatpickr-day" tabindex="0">26</span>
<span class="flatpickr-day" tabindex="0">27</span>

...

Example screenshot from the DateRangePicker: screen shot 2016-10-02 at 19 10 31