Lost chevron with "yearDropDown"

[frck006]

Hi

Do you know why sometime I lost chevron with "yearDropDown" ?

I put 2 dates pickers in differents position in my page and one is ok, other no.

When I inspect the page, I see differents but I don't understand why: The second with "arrowUp/arrowDown" doesn't work.

If you have an idea... :)

PS: I use svelte carbon, perhaps their css are responsable.

Regard

[frck006]

I found. I was using a props to pass a 'handleChange' function to my "DatePicker". Now I use a "dispatch" to send the information back to the parent. I don't know why but there is no more problem.

[kodaicoder]

Can you show me a code that have problem ?

[kodaicoder]

btw for a note you can using on directive to catching event of hook using hook name too. e.g.

<input
    name="datepickerOnDirectiveDate"
    use:datePicker={dateOptions}
    on:change={changeHandler}
    on:open={openHandler}
    on:close={closeHandler}
    readonly
/>

or you can see a demo here

[frck006]

In fact, I've always a problem.

I want to set date programaticaly, and for this, I need to get "flatpickr" instance. I write this code, but the first time, "fp" is undefined. :(

` const getFlatpickr = (id: string): Instance | undefined => {

    if (!id) return undefined

    const fps = flatpickr(`#${id}_input`, options)

    const fp = Array.isArray(fps) ? fps[0] : fps

    return fp

}

`

[frck006]

Ok, I think I found my problem. It's thank to your help, with here

The problem was with calling "flatpickr" without the 3rd argument plugins = [new yearDropdownPlugin()]

And this example: "Date picker with flatpickr element binding" give me the solution with bind:this={datepickerElement} Now, I can get the good "flatpickr": datepickerElement._flatpickr

Regard.