Adding custom tags?

[hanusatv]

Hi.
Is is possible to add a custom data tag to the SveltyPicker?
For example, I want to add a data tag data-key="birthday" to the input elemet.

<SveltyPicker
    on:change={handleChange}
    inputClasses="form-control"
    inputId="floatingInput"
    format="dd-mm-yyyy"
    placeholder=" "
    todayBtn={false}
    clearBtn={false}
    data-key="birthday"  <!-- Like this -->
/>

[mskocik]

Yes, but you will need to override inputs slot. Check docs on slots.

[hanusatv]

Thank you.
I've tried this approach, but it doesn't seem to work.

  <SveltyPicker
    on:change={handleChange}
    inputClasses="form-control"
    inputId="floatingInput"
    format="dd-mm-yyyy"
    placeholder=" "
    todayBtn={false}
    clearBtn={false}
  >
      <svelte:fragment slot="inputs">
          <input data-key="birthday" />
      </svelte:fragment>
  </SveltyPicker>

Am I doing it wrong?

[mskocik]

Am I doing it wrong?

Yes, you are not binding event handlers etc.

When you want to customize inputs, you basically need to recreate also the inner logic. Refer to the live example on slots page or check the source.

[mskocik]

Another approach: you could add this property in onMount by using document. querySelector method