Date Picker | COSS for Svelte

About

The Date Picker is built using a composition of the Calendar and Popover components.

Installation

The Date Picker is a composition pattern, not a standalone component. Install the required components:

pnpm dlx shadcn-svelte@latest add https://coss-sv.vercel.app/r/calendar.json https://coss-sv.vercel.app/r/popover.json https://coss-sv.vercel.app/r/button.json

Usage

<script lang="ts">
  import { buttonVariants } from "$lib/components/ui/button/index.js";
  import { Calendar } from "$lib/components/ui/calendar/index.js";
  import * as Popover from "$lib/components/ui/popover/index.js";
  import HugeiconsIcon from "$lib/hugeicons-icon.svelte";
  import Calendar03Icon from "@hugeicons/core-free-icons/Calendar03Icon";

  let date = $state<Date>();
</script>

<Popover.Root>
  <Popover.Trigger class={buttonVariants({ class: "w-[280px] justify-start", variant: "outline" })}>
    <HugeiconsIcon aria-hidden="true" icon={Calendar03Icon} strokeWidth={2} />
    {date ? date.toLocaleDateString() : "Pick a date"}
  </Popover.Trigger>
  <Popover.Popup align="start" class="w-auto p-0">
    <Calendar mode="single" bind:selected={date} />
  </Popover.Popup>
</Popover.Root>

Examples

Date Range Picker

Use captionLayout="dropdown" for date of birth or historical date selection.

With Presets

With Input

Close on Select

Control the popover state to close it when a date is selected.