Get Started

DateRangeInput

Astryx documentation

Selects a date range with two months and standard week presentation.

longlink docs --component "DateRangeInput"
DateRangeInput [Form]
Props and types
type DateRange = { start: ISODateString; end: ISODateString };
​
declare function DateRangeInput(
    props: FieldProps & {
        value: DateRange | null;
        onChange: (value: DateRange | null) => void;
        min?: ISODateString;
        max?: ISODateString;
        dateConstraints?: readonly ((date: Date) => boolean)[];
        minRangeSpan?: number;
        maxRangeSpan?: number;
        placeholder?: string;
        size?: 'sm' | 'md' | 'lg';
        hasClear?: boolean;
    },
): React.JSX.Element;
function Example() {
  const [value, setValue] = useState({
    start: '2026-10-02',
    end: '2026-10-09',
  });
​
  return <DateRangeInput label="Period" value={value} onChange={setValue} />;
}