CriteriaDates

'use client';
import { useState } from 'react';
import type { DateRange } from 'react-day-picker';

import { DeviceProvider } from '@/ui/contexts/devices/Device';
import { CriteriaDates, CriteriaDatesReinsurance } from '@/ui/criteria/CriteriaDates';

export function CriteriaDatesDemo() {
  const [selected, setSelected] = useState<DateRange | undefined>();

  const labels = {
    seeNextMonth: 'Next month',
    seePreviousMonth: 'Previous month',
    bestPrice: 'Best price',
    lastAvailabilities: 'Last availabilities',
    notAvailable: 'Not available',
    priceLegend: 'Price legend',
  };

  return (
    <DeviceProvider device="all">
      <div className="w-[340px] space-y-24">
        <CriteriaDates
          labels={labels}
          showPriceLegend
          selected={selected}
          onSelect={setSelected}
          title="Select your dates"
        >
          <CriteriaDatesReinsurance
            labels={{ disclaimer: 'New! Flexible booking now available.' }}
          />
        </CriteriaDates>
        {selected?.from && (
          <p className="text-b4">
            From: {selected.from.toLocaleDateString()}
            {selected.to ? ` — To: ${selected.to.toLocaleDateString()}` : ''}
          </p>
        )}
      </div>
    </DeviceProvider>
  );
}

Installation

npmpnpmyarnbun
npx shadcn@latest add https://develop.trident-ui.pro.clubmed/r/criteria-dates.json
Copy

Dependencies

CriteriaDates wraps Datepicker internally, which reads the current breakpoint via useDevice. Place DeviceProvider above it in the tree:

Copyimport { DeviceProvider } from '@/ui/contexts/devices/Device';
 
<DeviceProvider device="all">
  <CriteriaDates ... />
</DeviceProvider>

Install the peer dependencies used by Datepicker:

npmpnpmyarnbun
npm install react-day-picker date-fns
Copy

See the Datepicker documentation for the full DeviceProvider setup guide.

Usage

Basic range selection

CriteriaDates is controlled the same way as Datepicker — you own the DateRange state and pass it back via onSelect. The labels object must always contain seeNextMonth and seePreviousMonth for the accessible navigation button labels.

Copy'use client';
 
import { useState } from 'react';
import type { DateRange } from 'react-day-picker';
import { DeviceProvider } from '@/ui/contexts/devices/Device';
import { CriteriaDates } from '@/ui/criteria/CriteriaDates';
 
export function Component() {
  const [selected, setSelected] = useState<DateRange | undefined>();
 
  return (
    <DeviceProvider device="all">
      <CriteriaDates
        fromMonth={new Date()}
        labels={{
          seeNextMonth: 'Next month',
          seePreviousMonth: 'Previous month',
        }}
        selected={selected}
        onSelect={setSelected}
        title="Select your dates"
      />
    </DeviceProvider>
  );
}

With price legend

Pass showPriceLegend and include the extra legend keys in labels to render a colour-coded legend above the calendar. The type system enforces that the extra keys must be present when the legend is enabled — TypeScript will raise an error if showPriceLegend is true but the price keys are missing from labels.

'use client';
import { useState } from 'react';
import type { DateRange } from 'react-day-picker';

import { DeviceProvider } from '@/ui/contexts/devices/Device';
import { CriteriaDates, CriteriaDatesReinsurance } from '@/ui/criteria/CriteriaDates';

export function CriteriaDatesDemo() {
  const [selected, setSelected] = useState<DateRange | undefined>();

  const labels = {
    seeNextMonth: 'Next month',
    seePreviousMonth: 'Previous month',
    bestPrice: 'Best price',
    lastAvailabilities: 'Last availabilities',
    notAvailable: 'Not available',
    priceLegend: 'Price legend',
  };

  return (
    <DeviceProvider device="all">
      <div className="w-[340px] space-y-24">
        <CriteriaDates
          labels={labels}
          showPriceLegend
          selected={selected}
          onSelect={setSelected}
          title="Select your dates"
        >
          <CriteriaDatesReinsurance
            labels={{ disclaimer: 'New! Flexible booking now available.' }}
          />
        </CriteriaDates>
        {selected?.from && (
          <p className="text-b4">
            From: {selected.from.toLocaleDateString()}
            {selected.to ? ` — To: ${selected.to.toLocaleDateString()}` : ''}
          </p>
        )}
      </div>
    </DeviceProvider>
  );
}

With reinsurance message

Place <CriteriaDatesReinsurance> as a child of <CriteriaDates> to render a disclaimer below the calendar. The block renders nothing when labels.disclaimer is an empty string, so you can conditionally suppress it by toggling the string value.

Copyimport { CriteriaDates, CriteriaDatesReinsurance } from '@/ui/criteria/CriteriaDates';
 
<CriteriaDates
  fromMonth={new Date()}
  labels={{ seeNextMonth: 'Next month', seePreviousMonth: 'Previous month' }}
  selected={selected}
  onSelect={setSelected}
>
  <CriteriaDatesReinsurance
    labels={{ disclaimer: 'New! Flexible booking now available on all resorts.' }}
  />
</CriteriaDates>

With date annotations and disabled days

All Datepicker props are forwarded unchanged, including dates for per-day price and status annotations and disabledDays for blocking unavailable dates. When showPriceLegend is enabled, statusLabels are derived automatically from the legend text — screen readers will announce the status of each annotated day without any extra configuration.

Copy<CriteriaDates
  fromMonth={new Date()}
  labels={{
    seeNextMonth: 'Next month',
    seePreviousMonth: 'Previous month',
    bestPrice: 'Best price',
    lastAvailabilities: 'Last availabilities',
    notAvailable: 'Not available',
    priceLegend: 'Price legend',
  }}
  showPriceLegend
  selected={selected}
  onSelect={setSelected}
  disabledDays={{ before: new Date() }}
  dates={[
    { id: '2025-08-10', price: '890 €',   status: 'green'   },
    { id: '2025-08-15', price: '1 450 €', status: 'orange'  },
    { id: '2025-08-20', price: '720 €',   status: 'outline' },
  ]}
/>

API Reference

CriteriaDates

CriteriaDatesLabels

Base labels required for all configurations.

CriteriaDatesLabelsWithPriceLegend

Extends CriteriaDatesLabels with the following fields. Must be provided when showPriceLegend is true.

CriteriaDatesReinsurance

A companion component rendered as a child of CriteriaDates.

Price legend

When showPriceLegend is enabled a legend is rendered above the calendar with colour-coded swatches that mirror the Datepicker day statuses:

The statusLabels passed to the inner Datepicker are derived automatically from the legend labels — no extra configuration needed for screen-reader announcements.

Notes

Labels union type

The labels prop is a union of CriteriaDatesLabels and CriteriaDatesLabelsWithPriceLegend. TypeScript raises a type error if you pass showPriceLegend={true} without the legend keys. Provide the full object to keep the type narrow, even if you conditionally hide the legend at runtime.

All Datepicker props are forwarded

CriteriaDates spreads any prop it does not recognise directly onto the inner Datepicker. labels.seeNextMonth and labels.seePreviousMonth are extracted and passed to Datepicker's own labels prop automatically — do not duplicate them.

Controlled-only

Like the underlying Datepicker, CriteriaDates holds no selection state. Always pass both selected and onSelect, otherwise clicks have no visible effect.

Client component

CriteriaDates uses React hooks internally. Add 'use client' at the top of any file that renders it in a Next.js App Router project.

Accessibility

• The price legend region uses role="region" with aria-labelledby pointing to its title element, so screen readers announce the landmark when entering it.
• Legend items are grouped in role="list" with role="listitem" on each entry.
• Navigation button labels support month-name token interpolation, producing a fully spoken sentence (e.g. "See August 2025 and September 2025").
• When showPriceLegend is enabled, statusLabels are derived from the legend text and injected as visually-hidden <span class="sr-only"> elements inside annotated day buttons, so each day's status is announced by screen readers.
• The reinsurance disclaimer is a plain <p> element; no additional ARIA attributes are required.