classroomio/apps/dashboard/src/lib/components/Form/Date.svelte

<script lang="ts">
  export let label = '';
  export let placeholder = '';
  export let value = '';
  export let className = '';
  export let onChange = (e?: Event) => {}; // This is to know if element is 'dirty'
</script>

<label class="block {className}">
  <span class="text-gray-700 dark:bg-neutral-800 dark:text-white">{label}</span>
  <input
    bind:value
    {placeholder}
    type="date"
    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-neutral-800 dark:text-white"
    on:blur={onChange}
  />
</label>