allowInput flag misbehaving for editing date range

[DChau10]

Introduction

I want to use the following on my datetime range:

HTML

<input id="testpicker">

JS

flatpickr("#testpicker", {
  "mode":"range",
  "enableTime": true,
  "allowInput": true
})

Action: The user selects start date & start time, then stop date & stop time.
Alternatively, the dates could be programmatically set via defaultDate.

Expected Behavior

The user should be able to easily edit the currently selected date(time)s. The user should not have to scroll through the calendar months to find the date that they want to edit. If the start or stop date is 50 years in the future or 50 years in the past, it should be easy to set those values. Thus, we decide to utilize the allowInput flag so the user can modify a date via the input.

The user should be able to click on the input with a date range already selected, then be able to edit either of the dates via the input or the calendar.

Current Behavior

Attempting to edit a selected date(time) in the range results in a NaN. It seems to me as though allowInput was only implemented for single date(time) pickers, rather than the date(time) range picker.

Additionally, there is no way to edit a date(time) in the calendar. You currently have to re-select both start and stop. This may not be an acceptable solution for many, as this date range could have been populated by other means, and it may not always be the user's responsibility to edit both dates. This introduces more opportunity for user error, if they happen to forget the date(time) of the date that they aren't trying to update.

Possible Solution

See the bootstrap-daterangepicker project for ideas. Their approach has 3 inputs:

1. The primary input that the user clicks on to spawn the editor window. This primary input can also be edited.
2. The start date(time) input which can be edited and reflected in its calendar picker and time picker.
3. The stop date(time) input which can also be edited and reflected in its calendar picker and time picker.