# nylas-date-picker

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

The `nylas-date-picker` component is a UI component that allows users to select a date.

## Overview

- **Tag**: `<nylas-date-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-date-picker></nylas-date-picker>
```

### React

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

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

## Props

| Property | Attribute | Type | Default | Required | Description |
| --- | --- | --- | --- | --- | --- |
| `configSettings` | `config-settings` | any | - | No | Configuration settings including event name, organizer info, and scheduling constraints. |
| `eventDuration` | `event-duration` | number \| undefined | - | No | The event duration. |
| `isLoading` | `is-loading` | boolean \| undefined | - | No | The loading state. |
| `selectableDates` | `selectable-dates` | Date[] \| undefined | - | No | The dates that are available for selection in the calendar. Only these dates will be clickable. |
| `selectedDate` | `selected-date` | Date \| undefined | - | No | The currently selected date. Controls which date appears highlighted. |
| `selectedLanguage` | `selected-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 \| undefined | - | No | The selected language for i18n. Controls day names and month translations. |
| `selectedTimezone` | `selected-timezone` | string | `Intl.DateTimeFormat().resolvedOptions().timeZone` | No | The IANA timezone identifier for date selection (e.g., 'America/New_York'). |
| `themeConfig` | `theme-config` | any | - | No | Theme configuration object for custom styling. Keys are CSS custom property names. |

## Events

| Event | Detail | Description |
| --- | --- | --- |
| `dateSelected` | Date | This event is fired when a date is selected. |
| `monthChanged` | Date | This event is fired when the month is changed. |

## CSS shadow parts

| Part | Description |
| --- | --- |
| `ndp` | The date picker host. |
| `ndp__date` | The date. |
| `ndp__date--current-day` | The current day. |
| `ndp__date--current-month` | The dates in the current month. |
| `ndp__date--disabled` | The disabled dates. |
| `ndp__date--selected` | The selected date. |
| `ndp__day` | The day. |
| `ndp__month-button` | The month button. |
| `ndp__month-header` | The month header. |
| `ndp__title` | The title. |

## Dependencies

This component uses the following child components:

- [`<person-icon>`](/docs/reference/ui/person-icon/)
- [`<clock-icon>`](/docs/reference/ui/clock-icon/)
- [`<chevron-icon>`](/docs/reference/ui/chevron-icon/)

## Used by

This component is used inside:

- [`<nylas-scheduling>`](/docs/reference/ui/scheduling/)