SvelteKit에서 flatpickr 사용하기

날짜와 시간을 한 번에 선택하는 컴포넌트가 daisyUI에는 없어서 flatpickr을 사용해본다.

$ npm i flatpickr svelte-flatpickr

설치 후 사용할 곳에서 이런 식으로 사용하면 된다.

<script>
  import Flatpickr from "svelte-flatpickr";
  import "flatpickr/dist/l10n/ko.js";

  const flatpickrOptions = {
    enableTime: true,
    locale: "ko",
    time_24hr: true
  };
</script>

<Flatpickr
  options={flatpickrOptions}
  name="birthday"
  bind:value={data.updateUsers.birthday}
  placeholder="생년월일"
  class="form-control input w-full input-primary max-w-xs {form?.errors?.date ? 'input-error' : 'input-bordered'}"
  />