Designsystem
Tema

Calendar

Calendar lar brukeren velge dato.

Tre forskjellige kalenderbiblioteker er støttet.

Pikaday

Pikaday er et JS-bibliotek som kan brukes som en JS-avhengighet eller fra CDN.

CDN

<script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>
<input type="text" class="input pika-single" id="myDatepicker" />
<script>
  var picker = new Pikaday({ field: document.getElementById("myDatepicker") });
</script>

Svelte

<script>
  import Pikaday from "pikaday";
  let myDatepicker;
  $effect(() => {
    if (myDatepicker) {
      const picker = new Pikaday({
        field: myDatepicker
      });
      return () => picker.destroy();
    }
  });
</script>

<input type="text" class="input pika-single"  bind:this={myDatepicker} value="Pick a day" />

React

import { useEffect, useRef } from "react";
import Pikaday from "pikaday";

export default function App() {
  const myDatepicker = useRef(null);
  useEffect(() => {
    const picker = new Pikaday({
      field: myDatepicker.current,
    });
    return () => picker.destroy();
  }, []);
  return (
    <input
      type="text"
      className="input pika-single"
      defaultValue="Pick a date"
      ref={myDatepicker}
    />
  );
}

Leser mer om bruk hos daisyUI.

Cally

Cally er en web-komponent som kan lastes inn via CDN.

<script type="module" src="https://unpkg.com/cally"></script>
<calendar-date
  class="cally bg-base-100 border border-base-300 shadow-lg rounded-box"
>
  <svg
    aria-label="Previous"
    class="fill-current size-4"
    slot="previous"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
  >
    <path fill="currentColor" d="M15.75 19.5 8.25 12l7.5-7.5"></path>
  </svg>
  <svg
    aria-label="Next"
    class="fill-current size-4"
    slot="next"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
  >
    <path fill="currentColor" d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
  </svg>
  <calendar-month></calendar-month>
</calendar-date>

Leser mer om bruk hos daisyUI.