Date Picker

A highly flexible, headless-inspired calendar component. It renders a month view based on a provided date, giving you full control over navigation and layout.

Props

Prop	Type	Default	Description
`componentId`	`string`	`undefined`	The unique identifier for the component wrapper.
`variant`	`string`	`''`	Custom variant class for theming.
`currentDate`	`string`	`new Date().toISOString()`	ISO 8601 formatted date string that determines the displayed month. Supports $bindable.
`startDate`	`string`	`undefined`	Selected start date (ISO 8601). Supports $bindable.
`endDate`	`string`	`undefined`	Selected end date (ISO 8601). Supports $bindable.
`weekDays`	`string[]`	`['Mon', 'Tue', ...]`	Array of week day names to display in the header.
`hideRollingDays`	`boolean`	`false`	Whether to hide days from previous/next months.

Samples

1. Single Month with External Navigation

Control the displayed month by updating the currentDate prop from outside.

March

Mon

Tue

Wed

Thu

Fri

Sat

Sun

<script>

  import { DatePicker } from 'fluid-ui-svelte/components';

  import { Button, Container } from 'fluid-ui-svelte/base';

  let currentDate = $state(new Date().toISOString());

  const changeMonth = (increment: number) => {

    const date = new Date(currentDate);

    date.setMonth(date.getMonth() + increment);

    currentDate = date.toISOString();

};

</script>

<Container class="flex flex-col gap-4">

  <Container class="flex gap-2">

    <Button onclick={() => changeMonth(-1)}>Prev</Button>

    <Button onclick={() => changeMonth(1)}>Next</Button>

  </Container>

  <DatePicker bind:currentDate componentId="calendar-single" />

</Container>

2. Multi Calendar

Connect multiple calendars to the same state variables.

March

Mon

Tue

Wed

Thu

Fri

Sat

Sun

April

Mon

Tue

Wed

Thu

Fri

Sat

Sun

<script>

  import { DatePicker } from 'fluid-ui-svelte/components';

  import { Button, Container } from 'fluid-ui-svelte/base';

  const multiCalendarState = $state({

    currentDate: new Date().toISOString(),

    startDate: '',

    endDate: ''

});

  const changeMonthMulti = (inc: number) => {

    const d = new Date(multiCalendarState.currentDate);

    d.setMonth(d.getMonth() + inc);

    multiCalendarState.currentDate = d.toISOString();

};

</script>

<Container class="flex flex-col gap-4">

  <Container class="flex gap-2">

    <Button onclick={() => changeMonthMulti(-1)}>Prev</Button>

    <Button onclick={() => changeMonthMulti(1)}>Next</Button>

  </Container>

  <Container class="flex gap-8 flex-wrap">

    <DatePicker

      bind:currentDate={multiCalendarState.currentDate}

      bind:startDate={multiCalendarState.startDate}

      bind:endDate={multiCalendarState.endDate}

/>

    <DatePicker

      currentDate={new Date(new Date(multiCalendarState.currentDate).setMonth(new Date(multiCalendarState.currentDate).getMonth() + 1)).toISOString()}

      bind:startDate={multiCalendarState.startDate}

      bind:endDate={multiCalendarState.endDate}

/>

  </Container>

</Container>