Best practice to share functions or classes to +page.svelte

[NormandoHall]

I need to instantiate a DatePicker class in each page that has Date Time field. Because +layout.svelte slot can't used to props, I created a component and used on each +page.svelte where there is a DateTime field.

Component DatePicker.svelte

<script>
  import { onMount } from 'svelte';
  import { browser } from '$app/environment';

  export let datePicker;

  onMount(async () => {
    if (browser) {
      const Datepicker = (await import('vanillajs-datepicker/Datepicker')).default;

      if (datePicker) {
        new Datepicker(datePicker, {
          autohide: true,
          format: 'dd/mm/yyyy',
          clearBtn: true,
          todayBtn: true,
          todayHighlight: true
        });
      }
    }
  });
</script>

+page.svelte

<script>
  import DatePicker from '$lib/components/DatePicker/DatePicker.svelte';

  let datePicker;
<script>

<div>
  <form>
    <input bind:this={datePicker}/>
  </form>
</div>

<DatePicker {datePicker} />

It is correct, or there are other ways to do it better.

Regards