The id is missing on the the visibile input, unfortunately by default

[frederikhors]

I just found out that flatpickr doesn't copy the id on the visibile input, as described in this issue: flatpickr/flatpickr#1414.

This is really bad for accessibility and labels as you can imagine.

What do you think about adding an id prop on <FlatPickr> to handle this?

[frederikhors]

@jacobmischka can you please do this?

[jacobmischka]

id (and all other props) should be passed through to the underlying element already:

The types should support this already as well.

I don't quite understand the issue, sorry.

[frederikhors]

Sorry and thank you.

I should have specified right away that I'm using this code: https://svelte.dev/repl/8a4850fd71154b6594e1ce8d756d80f4?version=3.59.1.

[frederikhors]

[christopherdent]

I have the same issue.... I need an ID on the second field for accessibility issues, but it only generates an ID for the hidden field.

[furkanekinci]

I have the same issue too. In my case, if I set altInput property as true, it causes generating a clone input and original input element is being hidden. Clone input is taking original inputs classes but does not take id or name attributes. Because of this problem I could not use jquery validations classic validation methods then I used class based rules etc.

[jacobmischka]

Sorry for being absent for a while. This is an upstream issue unfortunately: flatpickr/flatpickr#579 flatpickr/flatpickr#1630

[frederikhors]

Sorry for being absent for a while. This is an upstream issue unfortunately: flatpickr/flatpickr#579 flatpickr/flatpickr#1630

Maybe if you write something to them thay can create a PR for that.

Or you know how to write a PR already?

[jacobmischka]

There are upstream issues already and I unfortunately don't have the time to look into a PR in the upstream library, sorry. I think you'll have to not use altInput and intead manage the inputs yourselves in svelte as a workaround in the meantime.

[richmilns]

My workaround is to add a new ID (prefixed with an underscore) to the altInput DOM element and then update the corresponding label:

flatpickr('#date', {
    allowInput: true,
    altInput: true,
    altFormat: 'd/m/Y',
    dateFormat: 'Y-m-d',
    onReady(){
        if (this.altInput) {
            this.altInput.id = '_' + this.input.id;
            document.querySelector('label[for="' + this.input.id + '"]').htmlFor = '_' + this.input.id;
        }
    }
});