Date range with min/max

A range DatePicker clamped to a bookable window via minValue/maxValue. Shows the start–end trigger and in-range calendar highlight.

DatePicker

Preview

Source

apps/docs/app/recipes/datepicker-range/recipe.tsx

'use client';

import { useState } from 'react';
import { DatePicker, type DateRange } from '@hey-mike/tungsten';
import { parseDate } from '@internationalized/date';

export default function DatePickerRangeRecipe() {
  const [value, setValue] = useState<DateRange | null>({
    start: parseDate('2026-05-10'),
    end: parseDate('2026-05-15'),
  });
  return (
    <div className="w-72">
      <DatePicker
        mode="range"
        label="Stay dates"
        value={value}
        onChange={setValue}
        minValue={parseDate('2026-05-01')}
        maxValue={parseDate('2026-05-31')}
        placeholder="Select dates"
      />
    </div>
  );
}

'use client';

import { useState } from 'react';
import { DatePicker, type DateRange } from '@hey-mike/tungsten';
import { parseDate } from '@internationalized/date';

export default function DatePickerRangeRecipe() {
  const [value, setValue] = useState<DateRange | null>({
    start: parseDate('2026-05-10'),
    end: parseDate('2026-05-15'),
  });
  return (
    <div className="w-72">
      <DatePicker
        mode="range"
        label="Stay dates"
        value={value}
        onChange={setValue}
        minValue={parseDate('2026-05-01')}
        maxValue={parseDate('2026-05-31')}
        placeholder="Select dates"
      />
    </div>
  );
}