Range Calendar

<script lang="ts">
  import { Calendar } from 'sv5ui';
  import type { DateRange } from 'bits-ui';

  let value = $state<DateRange>({});
</script>

<Calendar range bind:value />

{#if value.start && value.end}
  <p>Selected: {value.start} — {value.end}</p>
{/if}

<script lang="ts">
  import { Calendar } from 'sv5ui';
  import type { DateRange } from 'bits-ui';

  let value = $state<DateRange>({});
</script>

<Calendar range numberOfMonths={2} bind:value />

<script lang="ts">
  import { Calendar } from 'sv5ui';
  import type { DateRange } from 'bits-ui';

  let value = $state<DateRange>({});
</script>

<Calendar range minDays={3} maxDays={14} bind:value />

<Calendar range color="primary" />
<Calendar range color="secondary" />
<Calendar range color="success" />
<Calendar range color="error" />

<Calendar range size="xs" />
<Calendar range size="sm" />
<Calendar range size="md" />
<Calendar range size="lg" />
<Calendar range size="xl" />

<script lang="ts">
  import { Calendar } from 'sv5ui';
  import type { DateRange } from 'bits-ui';
  import { today, getLocalTimeZone } from '@internationalized/date';

  const now = today(getLocalTimeZone());
  let value = $state<DateRange>({});
</script>

<Calendar
  range
  minValue={now}
  maxValue={now.add({ days: 30 })}
  bind:value
/>

<script lang="ts">
  import { Calendar, Popover, Button } from 'sv5ui';
  import type { DateRange } from 'bits-ui';

  let value = $state<DateRange>({});
  let open = $state(false);
  let display = $derived(
    value.start && value.end
      ? `${value.start} — ${value.end}`
      : ''
  );
</script>

<Popover bind:open>
  <Button
    variant="outline"
    color="surface"
    leadingIcon="lucide:calendar"
    label={display || 'Pick a date range'}
  />
  {#snippet content()}
    <div class="p-3">
      <Calendar
        range
        bind:value
        onValueChange={(v) => { if (v.start && v.end) open = false; }}
        size="sm"
      />
    </div>
  {/snippet}
</Popover>