Skip to main content

​
Overview

The DateInput component provides a text input with a calendar popup for date selection, supporting single date and date range modes.

​
Basic Usage

import { DateInput } from '@peppermint-design/devreadykit-custom';
import { useState } from 'react';

export default function DateInputBasic() {
  const [date, setDate] = useState<Date>();

return (
<DateInput
      mode="single"
      selected={date}
      onSelect={setDate}
      label="Select date"
      placeholder="Choose a date"
    />
);
}

​
Date Range

import { DateInput } from '@peppermint-design/devreadykit-custom';
import { useState } from 'react';

export default function DateInputRange() {
  const [range, setRange] = useState<{ from?: Date; to?: Date }>();

  return (
    <DateInput
      mode="range"
      selected={range}
      onSelect={setRange}
      label="Select date range"
      placeholder="Choose dates"
    />
  );
}

​
Disable Past Dates

import { DateInput } from '@peppermint-design/devreadykit-custom';
import { useState } from 'react';

export default function DateInputDisablePast() {
  const [date, setDate] = useState<Date>();

return (
<DateInput
      mode="single"
      selected={date}
      onSelect={setDate}
      disablePast={true}
      label="Select future date"
    />
);
}

​
Props