Range picker using alt date config causes parsing/UI errors

[HDShabe]

Development Relevant Information:

• BalmUI version: 11.0.0-canary.2
• Browser: Chrome
• Operating System: Windows

Description:

Using a rangepicker with the alt date config from flatpickr gives error messages around formatting date and subsequent UI bugs

Steps To Reproduce:

Markup:

  <ui-rangepicker v-model="dates"
                  outlined
                  :labels="['Start Date', 'End Date']"
                  :config="rangePickerConfig">
      <template #separator>
          -
      </template>
  </ui-rangepicker>

Config:

rangePickerConfig: {
    enableTime: true,
    dateFormat: "Y-m-d H:i",
    altInput: true,
    altFormat: "d-m-Y H:i"
}

Select a start and end date in the future

balm-ui.js?v=70543755:10736 Uncaught TypeError: Cannot read properties of undefined (reading '0')
at Object.isCheckboxAtRowIndexChecked (balm-ui.js?v=70543755:10736:32)
at t.handleRowCheckboxChange (balm-ui.js?v=70543755:10610:28)
at HTMLTableSectionElement.handleRowCheckboxChange (balm-ui.js?v=70543755:10655:21)
at z2 (balm-ui.js?v=70543755:6917:37)
at p (balm-ui.js?v=70543755:6445:5)
at HTMLDivElement.$ (balm-ui.js?v=70543755:6785:7)

balm-ui.js?v=70543755:6093 Error: Invalid date provided: 0NaN-aN-aN aN:aN
at Object.parseDate (balm-ui.js?v=70543755:6302:22)
at balm-ui.js?v=70543755:6873:18
at Array.map ()
at G (balm-ui.js?v=70543755:6872:15)
at n.setDate (balm-ui.js?v=70543755:6859:5)
at O (balm-ui.js?v=70543755:7451:9)
at balm-ui.js?v=70543755:7484:26
at callWithErrorHandling (chunk-52T3HWCI.js?v=70543755:5493:18)
at callWithAsyncErrorHandling (chunk-52T3HWCI.js?v=70543755:5501:17)
at Array.job (chunk-52T3HWCI.js?v=70543755:5802:9)

balm-ui.js?v=70543755:7417 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'getTime')
at Object.onValueUpdate (balm-ui.js?v=70543755:7417:18)
at z2 (balm-ui.js?v=70543755:6916:17)
at Q2 (balm-ui.js?v=70543755:6947:335)
at n.setDate (balm-ui.js?v=70543755:6860:5)
at O (balm-ui.js?v=70543755:7451:9)
at balm-ui.js?v=70543755:7484:26
at callWithErrorHandling (chunk-52T3HWCI.js?v=70543755:5493:18)
at callWithAsyncErrorHandling (chunk-52T3HWCI.js?v=70543755:5501:17)
at Array.job (chunk-52T3HWCI.js?v=70543755:5802:9)
at flushPreFlushCbs (chunk-52T3HWCI.js?v=70543755:5623:39)

balm-ui.js?v=70543755:10736 Uncaught TypeError: Cannot read properties of undefined (reading '0')
at Object.isCheckboxAtRowIndexChecked (balm-ui.js?v=70543755:10736:32)
at t.handleRowCheckboxChange (balm-ui.js?v=70543755:10610:28)
at HTMLTableSectionElement.handleRowCheckboxChange (balm-ui.js?v=70543755:10655:21)
at z2 (balm-ui.js?v=70543755:6917:37)
at Object.p (balm-ui.js?v=70543755:6445:5)
at balm-ui.js?v=70543755:6126:16

For some reason I can't seem to upload a screenshot at the minute, but the start date UI then displays todays default date, and the end date looks correct in the UI but the placeholder text is also still underneath it and using the Vue dev tools I see my data bound is:

dates:Array[2]
0:"0NaN-aN-aN aN:aN"
1:"0NaN-aN-aN aN:aN"

Any ideas?

Thanks!