# nylas-time-window-picker

Source: https://developer.nylas.com/docs/reference/ui/time-window-picker/

The `nylas-time-window-picker` component is a time picker that can be used to select a time.

## Overview

- **Tag**: `<nylas-time-window-picker>`
- **Encapsulation**: shadow

## Installation

### HTML / Web Component

```html
<script type="module" src="https://cdn.jsdelivr.net/npm/@nylas/web-elements/dist/cdn/nylas-web-elements/nylas-web-elements.esm.js"></script>
```

### React

```bash
npm install @nylas/react
```

## Usage

### HTML

```html
<nylas-time-window-picker></nylas-time-window-picker>
```

### React

```jsx
import { NylasTimeWindowPicker } from '@nylas/react';

export default function Example() {
  return <NylasTimeWindowPicker />;
}
```

## Props

| Property | Attribute | Type | Default | Required | Description |
| --- | --- | --- | --- | --- | --- |
| `hasError` | `has-error` | boolean | `false` | No | This sets the error state of the input. |
| `language` | `language` | LANGUAGE_CODE.de \| LANGUAGE_CODE.en \| LANGUAGE_CODE.es \| LANGUAGE_CODE.fr \| LANGUAGE_CODE.ja \| LANGUAGE_CODE.ko \| LANGUAGE_CODE.nl \| LANGUAGE_CODE.sv \| LANGUAGE_CODE.zh | `LANGUAGE_CODE.en` | No | The language of the input. |
| `minimumStartTime` | `minimum-start-time` | null \| string | `null` | No | This is the start time value if one is set by the parent component. It is useful if this component is used to render an end time which should not be before the start time, defining the earliest selectable time. |
| `name` | `name` | string | - | Yes | The name of the input. |
| `placeholder` | `placeholder` | string | `'hh:mmam/pm'` | No | The placeholder text for the input. |
| `themeConfig` | `theme-config` | undefined \| { '--nylas-primary'?: string \| undefined; '--nylas-info'?: string \| undefined; '--nylas-success'?: string \| undefined; '--nylas-warning'?: string \| undefined; '--nylas-error'?: string \| undefined; '--nylas-error-pressed'?: string \| undefined; '--nylas-base-0'?: string \| undefined; '--nylas-base-25'?: string \| undefined; '--nylas-base-50'?: string \| undefined; '--nylas-base-100'?: string \| undefined; '--nylas-base-200'?: string \| undefined; '--nylas-base-300'?: string \| undefined; '--nylas-base-400'?: string \| undefined; '--nylas-base-500'?: string \| undefined; '--nylas-base-600'?: string \| undefined; '--nylas-base-700'?: string \| undefined; '--nylas-base-800'?: string \| undefined; '--nylas-base-900'?: string \| undefined; '--nylas-base-950'?: string \| undefined; '--nylas-color-blue-50'?: string \| undefined; '--nylas-color-blue-100'?: string \| undefined; '--nylas-color-blue-300'?: string \| undefined; '--nylas-color-blue-500'?: string \| undefined; '--nylas-color-blue-700'?: string \| undefined; '--nylas-color-blue-900'?: string \| undefined; '--nylas-color-red-50'?: string \| undefined; '--nylas-color-red-100'?: string \| undefined; '--nylas-color-red-300'?: string \| undefined; '--nylas-color-red-500'?: string \| undefined; '--nylas-color-red-700'?: string \| undefined; '--nylas-color-red-900'?: string \| undefined; '--nylas-color-green-50'?: string \| undefined; '--nylas-color-green-100'?: string \| undefined; '--nylas-color-green-300'?: string \| undefined; '--nylas-color-green-500'?: string \| undefined; '--nylas-color-green-700'?: string \| undefined; '--nylas-color-green-900'?: string \| undefined; '--nylas-color-yellow-50'?: string \| undefined; '--nylas-color-yellow-100'?: string \| undefined; '--nylas-color-yellow-300'?: string \| undefined; '--nylas-color-yellow-500'?: string \| undefined; '--nylas-color-yellow-700'?: string \| undefined; '--nylas-color-yellow-900'?: string \| undefined; '--nylas-color-purple-50'?: string \| undefined; '--nylas-color-purple-100'?: string \| undefined; '--nylas-color-purple-300'?: string \| undefined; '--nylas-color-purple-500'?: string \| undefined; '--nylas-color-purple-700'?: string \| undefined; '--nylas-color-purple-900'?: string \| undefined; '--nylas-color-sky-50'?: string \| undefined; '--nylas-color-sky-100'?: string \| undefined; '--nylas-color-sky-300'?: string \| undefined; '--nylas-color-sky-500'?: string \| undefined; '--nylas-color-sky-700'?: string \| undefined; '--nylas-color-sky-900'?: string \| undefined; '--nylas-color-black'?: string \| undefined; '--nylas-color-grey-900'?: string \| undefined; '--nylas-color-grey-800'?: string \| undefined; '--nylas-color-grey-700'?: string \| undefined; '--nylas-color-grey-600'?: string \| undefined; '--nylas-color-grey-500'?: string \| undefined; '--nylas-color-grey-400'?: string \| undefined; '--nylas-color-grey-300'?: string \| undefined; '--nylas-color-grey-200'?: string \| undefined; '--nylas-color-grey-100'?: string \| undefined; '--nylas-color-grey-50'?: string \| undefined; '--nylas-color-white'?: string \| undefined; '--nylas-font-family'?: string \| undefined; '--nylas-font-size'?: string \| undefined; '--nylas-border-radius'?: string \| undefined; '--nylas-border-radius-2x'?: string \| undefined; '--nylas-border-radius-3x'?: string \| undefined; } | - | No | The theme configuration. |
| `time` | `time` | string | - | Yes | The time to display in the input. This is passed by the parent component |

## Events

| Event | Detail | Description |
| --- | --- | --- |
| `timeChange` | { key: string; value: string; } | This event is fired when the time is changed. |
| `timeWindowFormError` | { key: string; message: string; } | This event is fired when the form has an error. The parent component can listen for this event and display an error message or set form validity. |

## CSS shadow parts

| Part | Description |
| --- | --- |
| `time-input` | The time input |
| `time-picker` | The time picker container |
| `times` | The list of times |

## Used by

This component is used inside:

- [`<nylas-availability-picker>`](/docs/reference/ui/availability-picker/)
- [`<nylas-event-timeslot>`](/docs/reference/ui/event-timeslot/)
- [`<nylas-specific-time-availability-picker>`](/docs/reference/ui/specific-time-availability-picker/)