> ## Documentation Index
> Fetch the complete documentation index at: https://docs.devreadykit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Date Input

> Date input component with calendar popup for date selection

export const DateInputDisablePastPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/DateInputDisablePast" frameBorder="0" width="100%" height="260"></iframe>;

export const DateInputRangePreview = () => <iframe src="https://kerny-custom.vercel.app/preview/DateInputRange" frameBorder="0" width="100%" height="260"></iframe>;

export const DateInputBasicPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/DateInputBasic" frameBorder="0" width="100%" height="260"></iframe>;

## Overview

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

## Basic Usage

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    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"
        />
    );
    }

    ```
  </Tab>

  <Tab title="Preview">
    <DateInputBasicPreview />
  </Tab>
</Tabs>

## Date Range

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    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"
        />
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <DateInputRangePreview />
  </Tab>
</Tabs>

## Disable Past Dates

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    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"
        />
    );
    }

    ```
  </Tab>

  <Tab title="Preview">
    <DateInputDisablePastPreview />
  </Tab>
</Tabs>

## Props

<PropsTable>
  | Prop        | Type                                                 | Default    | Description            |
  | :---------- | :--------------------------------------------------- | :--------- | :--------------------- |
  | mode        | `"single" \| "range"`                                | `"single"` | Selection mode         |
  | selected    | `Date \| { from?: Date; to?: Date }`                 | -          | Selected date(s)       |
  | onSelect    | `(date: Date \| { from?: Date; to?: Date }) => void` | -          | Selection handler      |
  | label       | `string`                                             | -          | Input label            |
  | placeholder | `string`                                             | -          | Placeholder text       |
  | disabled    | `boolean`                                            | `false`    | Disabled state         |
  | disablePast | `boolean`                                            | `false`    | Disable past dates     |
  | className   | `string`                                             | -          | Additional CSS classes |
</PropsTable>

```
```