Date Picker

Style

Semantic colors, visual variants, density, corner radius, and max-width via modifier classes on the date picker root.

Preview

Subtle (default)

    <.date_picker class="date-picker" value="2024-06-15">
  <:label>Subtle (default)</:label>
  <:trigger><.heroicon name="hero-calendar" /></:trigger>
  <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
  <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
</.date_picker>

Semantic

Use class="ui-{role}" to set the semantic palette of a date picker.

Available options: accent, alert, brand, info, success

Default

Accent

Brand

Alert

Info

Success

    <.date_picker class="date-picker" value="2024-06-15">
  <:label>Default</:label>
  <:trigger><.heroicon name="hero-calendar" /></:trigger>
  <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
  <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
</.date_picker>
<.date_picker class="date-picker ui-accent" value="2024-06-15">
  <:label>Accent</:label>
  <:trigger><.heroicon name="hero-calendar" /></:trigger>
  <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
  <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
</.date_picker>
<.date_picker class="date-picker ui-brand" value="2024-06-15">
  <:label>Brand</:label>
  <:trigger><.heroicon name="hero-calendar" /></:trigger>
  <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
  <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
</.date_picker>
<.date_picker class="date-picker ui-alert" value="2024-06-15">
  <:label>Alert</:label>
  <:trigger><.heroicon name="hero-calendar" /></:trigger>
  <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
  <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
</.date_picker>
<.date_picker class="date-picker ui-info" value="2024-06-15">
  <:label>Info</:label>
  <:trigger><.heroicon name="hero-calendar" /></:trigger>
  <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
  <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
</.date_picker>
<.date_picker class="date-picker ui-success" value="2024-06-15">
  <:label>Success</:label>
  <:trigger><.heroicon name="hero-calendar" /></:trigger>
  <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
  <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
</.date_picker>

Variant

Variant modifiers control date-picker surface treatment. Default is subtle (neutral fill and border; semantic roles tint text ink); add ui-solid for a filled surface.

Subtle (default)

Solid

Ghost

    <.date_picker class="date-picker" value="2024-06-15">
  <:label>Subtle (default)</:label>
  <:trigger><.heroicon name="hero-calendar" /></:trigger>
  <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
  <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
</.date_picker>
<.date_picker class="date-picker ui-solid" value="2024-06-15">
  <:label>Solid</:label>
  <:trigger><.heroicon name="hero-calendar" /></:trigger>
  <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
  <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
</.date_picker>
<.date_picker class="date-picker ui-ghost" value="2024-06-15">
  <:label>Ghost</:label>
  <:trigger><.heroicon name="hero-calendar" /></:trigger>
  <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
  <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
</.date_picker>

Semantic × variant

Combine semantic palette and variant treatment on the same host, for example date-picker ui-accent ui-solid.

Base

Base

Base

Accent

Accent

Accent

Alert

Alert

Alert

Brand

Brand

Brand

Info

Info

Info

Success

Success

Success

    <.date_picker class="date-picker" value="2024-06-15">
        <:label>Base</:label>
        <:trigger><.heroicon name="hero-calendar" /></:trigger>
        <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
        <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
      </.date_picker>
<.date_picker class="date-picker ui-solid" value="2024-06-15">
        <:label>Base</:label>
        <:trigger><.heroicon name="hero-calendar" /></:trigger>
        <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
        <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
      </.date_picker>
<.date_picker class="date-picker ui-ghost" value="2024-06-15">
        <:label>Base</:label>
        <:trigger><.heroicon name="hero-calendar" /></:trigger>
        <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
        <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
      </.date_picker>
<.date_picker class="date-picker ui-accent" value="2024-06-15">
        <:label>Accent</:label>
        <:trigger><.heroicon name="hero-calendar" /></:trigger>
        <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
        <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
      </.date_picker>
<.date_picker class="date-picker ui-accent ui-solid" value="2024-06-15">
        <:label>Accent</:label>
        <:trigger><.heroicon name="hero-calendar" /></:trigger>
        <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
        <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
      </.date_picker>
<.date_picker class="date-picker ui-accent ui-ghost" value="2024-06-15">
        <:label>Accent</:label>
        <:trigger><.heroicon name="hero-calendar" /></:trigger>
        <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
        <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
      </.date_picker>
<.date_picker class="date-picker ui-alert" value="2024-06-15">
        <:label>Alert</:label>
        <:trigger><.heroicon name="hero-calendar" /></:trigger>
        <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
        <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
      </.date_picker>
<.date_picker class="date-picker ui-alert ui-solid" value="2024-06-15">
        <:label>Alert</:label>
        <:trigger><.heroicon name="hero-calendar" /></:trigger>
        <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
        <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
      </.date_picker>
<.date_picker class="date-picker ui-alert ui-ghost" value="2024-06-15">
        <:label>Alert</:label>
        <:trigger><.heroicon name="hero-calendar" /></:trigger>
        <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
        <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
      </.date_picker>
<.date_picker class="date-picker ui-brand" value="2024-06-15">
        <:label>Brand</:label>
        <:trigger><.heroicon name="hero-calendar" /></:trigger>
        <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
        <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
      </.date_picker>
<.date_picker class="date-picker ui-brand ui-solid" value="2024-06-15">
        <:label>Brand</:label>
        <:trigger><.heroicon name="hero-calendar" /></:trigger>
        <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
        <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
      </.date_picker>
<.date_picker class="date-picker ui-brand ui-ghost" value="2024-06-15">
        <:label>Brand</:label>
        <:trigger><.heroicon name="hero-calendar" /></:trigger>
        <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
        <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
      </.date_picker>
<.date_picker class="date-picker ui-info" value="2024-06-15">
        <:label>Info</:label>
        <:trigger><.heroicon name="hero-calendar" /></:trigger>
        <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
        <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
      </.date_picker>
<.date_picker class="date-picker ui-info ui-solid" value="2024-06-15">
        <:label>Info</:label>
        <:trigger><.heroicon name="hero-calendar" /></:trigger>
        <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
        <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
      </.date_picker>
<.date_picker class="date-picker ui-info ui-ghost" value="2024-06-15">
        <:label>Info</:label>
        <:trigger><.heroicon name="hero-calendar" /></:trigger>
        <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
        <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
      </.date_picker>
<.date_picker class="date-picker ui-success" value="2024-06-15">
        <:label>Success</:label>
        <:trigger><.heroicon name="hero-calendar" /></:trigger>
        <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
        <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
      </.date_picker>
<.date_picker class="date-picker ui-success ui-solid" value="2024-06-15">
        <:label>Success</:label>
        <:trigger><.heroicon name="hero-calendar" /></:trigger>
        <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
        <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
      </.date_picker>
<.date_picker class="date-picker ui-success ui-ghost" value="2024-06-15">
        <:label>Success</:label>
        <:trigger><.heroicon name="hero-calendar" /></:trigger>
        <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
        <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
      </.date_picker>

Size

Use class="ui-size-{size}" to set the size of a date picker.

Available options: xs, sm, md (default), lg, xl

    <.date_picker class="date-picker ui-size-sm" value="2024-06-15">
  <:label>SM</:label>
  <:trigger><.heroicon name="hero-calendar" /></:trigger>
  <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
  <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
</.date_picker>
<.date_picker class="date-picker ui-size-md" value="2024-06-15">
  <:label>MD</:label>
  <:trigger><.heroicon name="hero-calendar" /></:trigger>
  <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
  <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
</.date_picker>
<.date_picker class="date-picker ui-size-lg" value="2024-06-15">
  <:label>LG</:label>
  <:trigger><.heroicon name="hero-calendar" /></:trigger>
  <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
  <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
</.date_picker>
<.date_picker class="date-picker ui-size-xl" value="2024-06-15">
  <:label>XL</:label>
  <:trigger><.heroicon name="hero-calendar" /></:trigger>
  <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
  <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
</.date_picker>

Rounded

Use class="ui-rounded-{step}" to set the corner radius of a date picker.

Available options: none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, full (default)

None

Full

    <.date_picker class="date-picker ui-rounded-none" value="2024-06-15">
  <:label>None</:label>
  <:trigger><.heroicon name="hero-calendar" /></:trigger>
  <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
  <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
</.date_picker>
<.date_picker class="date-picker ui-rounded-sm" value="2024-06-15">
  <:label>SM</:label>
  <:trigger><.heroicon name="hero-calendar" /></:trigger>
  <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
  <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
</.date_picker>
<.date_picker class="date-picker ui-rounded-md" value="2024-06-15">
  <:label>MD</:label>
  <:trigger><.heroicon name="hero-calendar" /></:trigger>
  <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
  <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
</.date_picker>
<.date_picker class="date-picker ui-rounded-lg" value="2024-06-15">
  <:label>LG</:label>
  <:trigger><.heroicon name="hero-calendar" /></:trigger>
  <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
  <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
</.date_picker>
<.date_picker class="date-picker ui-rounded-xl" value="2024-06-15">
  <:label>XL</:label>
  <:trigger><.heroicon name="hero-calendar" /></:trigger>
  <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
  <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
</.date_picker>
<.date_picker class="date-picker ui-rounded-full" value="2024-06-15">
  <:label>Full</:label>
  <:trigger><.heroicon name="hero-calendar" /></:trigger>
  <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
  <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
</.date_picker>

Width

Without w-*, width comes from component CSS. Default for date-picker: none (width: fit-content).

Use class="w-{step}" to set the host stretch mode of a date picker (`w-full`, `w-fit`); use Max width for named container steps.

Available options: default (fit-content), full, fit

default (fit-content)

Save changes to your account settings

full

Save changes to your account settings

fit

Save changes to your account settings

    <.date_picker class="date-picker" value="2024-06-15">
  <:label>Save changes to your account settings</:label>
  <:trigger><.heroicon name="hero-calendar" /></:trigger>
  <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
  <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>

</.date_picker>

<.date_picker class="date-picker w-full" value="2024-06-15">
  <:label>Save changes to your account settings</:label>
  <:trigger><.heroicon name="hero-calendar" /></:trigger>
  <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
  <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>

</.date_picker>

<.date_picker class="date-picker w-fit" value="2024-06-15">
  <:label>Save changes to your account settings</:label>
  <:trigger><.heroicon name="hero-calendar" /></:trigger>
  <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
  <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>

</.date_picker>

Max width

Without max-w-*, width comes from component CSS. Default for date-picker: none (width: fit-content).

Use class="max-w-{step}" to show a capped full-width control on fit-content hosts (pair w-full with max-w-* and wide content when labels are short).

Available options: none (default), full, 9xs, 8xs, 7xs, 6xs, 5xs, 4xs, 3xs, 2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, 8xl, 9xl

default (none)

Save changes to your account settings

none

Save changes to your account settings

full

Save changes to your account settings

9xs

Save changes to your account settings

8xs

Save changes to your account settings

7xs

Save changes to your account settings

6xs

Save changes to your account settings

5xs

Save changes to your account settings

4xs

Save changes to your account settings

3xs

Save changes to your account settings

2xs

Save changes to your account settings

Save changes to your account settings

Save changes to your account settings

Save changes to your account settings

Save changes to your account settings

Save changes to your account settings

2xl

Save changes to your account settings

3xl

Save changes to your account settings

4xl

Save changes to your account settings

5xl

Save changes to your account settings

6xl

Save changes to your account settings

7xl

Save changes to your account settings

8xl

Save changes to your account settings

9xl

Save changes to your account settings

    <.date_picker class="date-picker w-full" value="2024-06-15">
  <:label>Save changes to your account settings</:label>
  <:trigger><.heroicon name="hero-calendar" /></:trigger>
  <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
  <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>

</.date_picker>

<.date_picker class="date-picker w-full max-w-none" value="2024-06-15">
  <:label>Save changes to your account settings</:label>
  <:trigger><.heroicon name="hero-calendar" /></:trigger>
  <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
  <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>

</.date_picker>

<.date_picker class="date-picker w-full max-w-full" value="2024-06-15">
  <:label>Save changes to your account settings</:label>
  <:trigger><.heroicon name="hero-calendar" /></:trigger>
  <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
  <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>

</.date_picker>

<.date_picker class="date-picker w-full max-w-9xs" value="2024-06-15">
  <:label>Save changes to your account settings</:label>
  <:trigger><.heroicon name="hero-calendar" /></:trigger>
  <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
  <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>

</.date_picker>

<.date_picker class="date-picker w-full max-w-8xs" value="2024-06-15">
  <:label>Save changes to your account settings</:label>
  <:trigger><.heroicon name="hero-calendar" /></:trigger>
  <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
  <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>

</.date_picker>

<.date_picker class="date-picker w-full max-w-7xs" value="2024-06-15">
  <:label>Save changes to your account settings</:label>
  <:trigger><.heroicon name="hero-calendar" /></:trigger>
  <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
  <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>

</.date_picker>

<.date_picker class="date-picker w-full max-w-6xs" value="2024-06-15">
  <:label>Save changes to your account settings</:label>
  <:trigger><.heroicon name="hero-calendar" /></:trigger>
  <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
  <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>

</.date_picker>

<.date_picker class="date-picker w-full max-w-5xs" value="2024-06-15">
  <:label>Save changes to your account settings</:label>
  <:trigger><.heroicon name="hero-calendar" /></:trigger>
  <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
  <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>

</.date_picker>

<.date_picker class="date-picker w-full max-w-4xs" value="2024-06-15">
  <:label>Save changes to your account settings</:label>
  <:trigger><.heroicon name="hero-calendar" /></:trigger>
  <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
  <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>

</.date_picker>

<.date_picker class="date-picker w-full max-w-3xs" value="2024-06-15">
  <:label>Save changes to your account settings</:label>
  <:trigger><.heroicon name="hero-calendar" /></:trigger>
  <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
  <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>

</.date_picker>

<.date_picker class="date-picker w-full max-w-2xs" value="2024-06-15">
  <:label>Save changes to your account settings</:label>
  <:trigger><.heroicon name="hero-calendar" /></:trigger>
  <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
  <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>

</.date_picker>

<.date_picker class="date-picker w-full max-w-xs" value="2024-06-15">
  <:label>Save changes to your account settings</:label>
  <:trigger><.heroicon name="hero-calendar" /></:trigger>
  <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
  <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>

</.date_picker>

<.date_picker class="date-picker w-full max-w-sm" value="2024-06-15">
  <:label>Save changes to your account settings</:label>
  <:trigger><.heroicon name="hero-calendar" /></:trigger>
  <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
  <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>

</.date_picker>

<.date_picker class="date-picker w-full max-w-md" value="2024-06-15">
  <:label>Save changes to your account settings</:label>
  <:trigger><.heroicon name="hero-calendar" /></:trigger>
  <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
  <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>

</.date_picker>

<.date_picker class="date-picker w-full max-w-lg" value="2024-06-15">
  <:label>Save changes to your account settings</:label>
  <:trigger><.heroicon name="hero-calendar" /></:trigger>
  <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
  <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>

</.date_picker>

<.date_picker class="date-picker w-full max-w-xl" value="2024-06-15">
  <:label>Save changes to your account settings</:label>
  <:trigger><.heroicon name="hero-calendar" /></:trigger>
  <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
  <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>

</.date_picker>

<.date_picker class="date-picker w-full max-w-2xl" value="2024-06-15">
  <:label>Save changes to your account settings</:label>
  <:trigger><.heroicon name="hero-calendar" /></:trigger>
  <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
  <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>

</.date_picker>

<.date_picker class="date-picker w-full max-w-3xl" value="2024-06-15">
  <:label>Save changes to your account settings</:label>
  <:trigger><.heroicon name="hero-calendar" /></:trigger>
  <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
  <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>

</.date_picker>

<.date_picker class="date-picker w-full max-w-4xl" value="2024-06-15">
  <:label>Save changes to your account settings</:label>
  <:trigger><.heroicon name="hero-calendar" /></:trigger>
  <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
  <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>

</.date_picker>

<.date_picker class="date-picker w-full max-w-5xl" value="2024-06-15">
  <:label>Save changes to your account settings</:label>
  <:trigger><.heroicon name="hero-calendar" /></:trigger>
  <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
  <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>

</.date_picker>

<.date_picker class="date-picker w-full max-w-6xl" value="2024-06-15">
  <:label>Save changes to your account settings</:label>
  <:trigger><.heroicon name="hero-calendar" /></:trigger>
  <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
  <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>

</.date_picker>

<.date_picker class="date-picker w-full max-w-7xl" value="2024-06-15">
  <:label>Save changes to your account settings</:label>
  <:trigger><.heroicon name="hero-calendar" /></:trigger>
  <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
  <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>

</.date_picker>

<.date_picker class="date-picker w-full max-w-8xl" value="2024-06-15">
  <:label>Save changes to your account settings</:label>
  <:trigger><.heroicon name="hero-calendar" /></:trigger>
  <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
  <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>

</.date_picker>

<.date_picker class="date-picker w-full max-w-9xl" value="2024-06-15">
  <:label>Save changes to your account settings</:label>
  <:trigger><.heroicon name="hero-calendar" /></:trigger>
  <:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
  <:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>

</.date_picker>