allowInput and UTC dateFormat causes date shift

[Kevin Schmidt]

When using allowInput: true and a dateFormat in UTC (ie, has Z in the format), the displayed date is shifted by the UTC offset when the date picker is closed.

To reproduce, select a date range and click outside to close the date picker. Note the date shifts by your local UTC offset. Open the picker again, change nothing, and click outside to close it again. The date will shift on each close.

I tracked this down to the documentClick handler calling setDate when allowInput is set. This eventually calls setHoursFromDate, which uses date.getHours() to get the new hours value. That value is in the local time zone, but is displayed as UTC hours due to having Z in the dateFormat.

Including these options should be sufficient to reproduce, but a full example is provided below.

allowInput: true
dateFormat: 'Y-m-d H:i\\Z'

Fiddle Link

https://jsfiddle.net/wybampgu/

Environment

• flatpickr version used: Latest
• Browser name and version: Chrome 115
• OS and version: Reproduced on Mac/Windows/Linux

[Kevin Schmidt]

Current workaround is to display the date in the local time zone with options like:

{
  allowInput: true,
  dateFormat: 'Y-m-d H:i\\Z',
  altFormat: 'Y-m-d H:i',
  altInput: true
}