import { CodeBlock, ConfigBlock } from "@src/helpers/DocBlocks";
import dayjs from "dayjs";
import Date from "./Date";

# DateInput

> A clickable UI element with active and hover states. Indicates to the user that it's clickable.

<CodeBlock defaultValue={dayjs()}>
  {(value, onChange) => (
    <Date
      label="Select Date"
      value={value}
      onChange={onChange}
      numMonths={2}
      withTime
    />
  )}
</CodeBlock>

## Configuration

<ConfigBlock of={Date} />

## Examples

<CodeBlock title="Single" defaultValue={dayjs()}>
  {(value, onChange) => (
    <Date label="Select Date" value={value} onChange={onChange} numMonths={2} />
  )}
</CodeBlock>

<CodeBlock title="Single disabled" defaultValue={dayjs()}>
  {(value, onChange) => (
    <Date
      label="Select Date"
      value={value}
      onChange={onChange}
      numMonths={2}
      disabled
    />
  )}
</CodeBlock>

<CodeBlock
  title="Range"
  defaultValue={{ startDate: dayjs(), endDate: dayjs().add(7, "d") }}
>
  {(value, onChange) => (
    <Date
      label="Select Date"
      value={value}
      onChange={onChange}
      numMonths={2}
      withRange
    />
  )}
</CodeBlock>

<CodeBlock
  title="Comparison"
  defaultValue={{ startDate: dayjs().subtract(7, "d"), endDate: dayjs() }}
>
  {(value, onChange) => (
    <Date
      label="Select Date"
      value={value}
      onChange={onChange}
      numMonths={2}
      withRange
      withComparison
      maxDate={dayjs()}
      comparisonMaxDate={dayjs()}
      position="TOP"
    />
  )}
</CodeBlock>

<CodeBlock
  title="Minimum Selectable Dates"
  defaultValue={{ startDate: dayjs(), endDate: dayjs().add(7, "d") }}
>
  {(value, onChange) => (
    <Date
      label="Select Date"
      value={value}
      onChange={onChange}
      numMonths={2}
      withRange
      minDate={dayjs().subtract(30, "d")}
    />
  )}
</CodeBlock>
<CodeBlock
  title="Maximum Selectable Dates"
  defaultValue={{ startDate: dayjs(), endDate: dayjs().add(7, "d") }}
>
  {(value, onChange) => (
    <Date
      label="Select Date"
      value={value}
      onChange={onChange}
      numMonths={2}
      withRange
      maxDate={dayjs().add(7, "d")}
      position="TOP"
    />
  )}
</CodeBlock>

<CodeBlock
  title="Minimum & Maximum Selectable Dates"
  defaultValue={{ startDate: dayjs(), endDate: dayjs().add(7, "d") }}
>
  {(value, onChange) => (
    <Date
      label="Select Date"
      value={value}
      onChange={onChange}
      numMonths={2}
      withRange
      maxDate={dayjs().add(7, "d")}
      minDate={dayjs().subtract(30, "d")}
      position="TOP"
    />
  )}
</CodeBlock>
