# Date picker (UI SDK): Presets

> A `DatePickerPreset` picks its `value` and closes the popup. It shows as pressed while its value is selected.

Canonical: https://hextaui.com/docs/ui-sdk-date-picker/examples/presets

Component docs: https://hextaui.com/docs/ui-sdk-date-picker

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/ui-sdk-date-picker-presets.json
```

This adds `components/examples/ui-sdk-date-picker/presets.tsx` with the Date picker component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/ui-sdk-date-picker/presets.tsx"
"use client"

import * as React from "react"

import {
  DatePicker,
  DatePickerCalendar,
  DatePickerContent,
  DatePickerControl,
  DatePickerInput,
  DatePickerPreset,
  DatePickerSeparator,
  DatePickerTrigger,
} from "@/components/ui/ui-sdk-date-picker"

function isoDate(date: Date) {
  const month = String(date.getMonth() + 1).padStart(2, "0")
  const day = String(date.getDate()).padStart(2, "0")
  return `${date.getFullYear()}-${month}-${day}`
}

function daysAgo(days: number) {
  const date = new Date()
  date.setDate(date.getDate() - days)
  return isoDate(date)
}

function UiSdkDatePickerPresets() {
  const [today, setToday] = React.useState<string | null>(null)

  React.useEffect(() => {
    setToday(isoDate(new Date()))
  }, [])

  const presets = today
    ? [
        { label: "Today", value: [today, today] as [string, string] },
        {
          label: "Last 7 days",
          value: [daysAgo(6), today] as [string, string],
        },
        {
          label: "Last 30 days",
          value: [daysAgo(29), today] as [string, string],
        },
        {
          label: "Last 90 days",
          value: [daysAgo(89), today] as [string, string],
        },
      ]
    : []

  return (
    <DatePicker mode="range" className="max-w-72">
      <DatePickerControl>
        <DatePickerInput aria-label="From" />
        <DatePickerSeparator />
        <DatePickerInput end aria-label="To" />
        <DatePickerTrigger />
      </DatePickerControl>
      <DatePickerContent>
        <div className="flex flex-wrap gap-0.5 border-b pb-3 sm:w-32 sm:flex-col sm:flex-nowrap sm:border-e sm:border-b-0 sm:pe-3 sm:pb-0">
          {presets.map((preset) => (
            <DatePickerPreset key={preset.label} value={preset.value}>
              {preset.label}
            </DatePickerPreset>
          ))}
        </div>
        <DatePickerCalendar />
      </DatePickerContent>
    </DatePicker>
  )
}

export { UiSdkDatePickerPresets }
```

## Props in this example

### DatePicker

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `mode` | `"single" \| "range"` | `"single"` |  |

### DatePickerInput

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `end` | `boolean` | `false` | Makes it a range’s end. |

### DatePickerPreset

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `string \| [string, string]` | – |  |

## More Date picker examples

- [Range](https://hextaui.com/docs/ui-sdk-date-picker/examples/range)
- [Min, max and unavailable dates](https://hextaui.com/docs/ui-sdk-date-picker/examples/limits)
- [Language](https://hextaui.com/docs/ui-sdk-date-picker/examples/locale)
- [Form](https://hextaui.com/docs/ui-sdk-date-picker/examples/form)
- [Controller](https://hextaui.com/docs/ui-sdk-date-picker/examples/controller)
- [Disabled and read-only](https://hextaui.com/docs/ui-sdk-date-picker/examples/disabled)
- [Right to left](https://hextaui.com/docs/ui-sdk-date-picker/examples/rtl)