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

# <OrderTimePicker />

> Date and time selector for scheduling pickup or delivery orders.

# OrderTimePicker

<Snippet file="api-key-location.mdx" />

A picker that allows customers to choose between "ASAP" ordering or scheduling a future pickup/delivery time within the location's operating hours.

## Preview

Desktop

Mobile

## Import

```tsx theme={null}
import { OrderTimePicker } from '@/components/OrderTimePicker'
```

## Usage

```tsx theme={null}
<OrderTimePicker
  locationId={locationId}
  fulfillmentType="pickup"
  selectedTime={orderTime}
  onTimeChange={setOrderTime}
/>
```

## Props

**locationId** `string` *required*

Location ID used to fetch available time slots.

**fulfillmentType** `'pickup' | 'delivery'` *required*

The fulfillment method — affects available time windows and lead times.

**selectedTime** `Date | 'asap'` *required*

The currently selected order time.

**onTimeChange** `(time: Date | 'asap') =\> void` *required*

Callback fired when the time selection changes.

## Behavior

* "ASAP" toggle selected by default with estimated ready time
* Date picker for future dates (within location's advance ordering window)
* Time slots in 15-minute increments within operating hours
* Grays out unavailable slots based on kitchen capacity


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.