### Handle Easepick Events with Setup

Source: https://github.com/easepick/easepick/blob/master/packages/core/README.md

Shows how to use the setup option to hook into the picker's lifecycle. This example demonstrates listening for the 'view' event to perform custom logic when the calendar view is rendered.

```javascript
const picker = new easepick.create({
  element: document.getElementById('datepicker'),
  css: [
    'https://cdn.jsdelivr.net/npm/@easepick/core@[version.number]/dist/index.css',
  ],
  setup(picker) {
    picker.on('view', (e) => {
      const { view, date, target } = e.detail;
      // do something
    });
  },
});
```

--------------------------------

### Complete Integration Example

Source: https://context7.com/easepick/easepick/llms.txt

A full-featured booking system example combining multiple plugins with all common configurations.

```APIDOC
## Complete Integration Example

A full-featured booking system example combining multiple plugins with all common configurations.

### Description
This example demonstrates a comprehensive integration of Easepick with several plugins, including RangePlugin, LockPlugin, TimePlugin, PresetPlugin, AmpPlugin, and KbdPlugin. It showcases common configurations for a booking system, such as setting date ranges, locking specific dates, selecting times, and using presets.

### Method
N/A (Client-side JavaScript)

### Endpoint
N/A (Client-side JavaScript)

### Parameters
N/A (Client-side JavaScript configuration)

### Request Example
```javascript
const bookingPicker = new easepick.create({
  element: document.getElementById('check-in'),
  css: [
    'https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.1/dist/index.css',
  ],
  format: 'YYYY-MM-DD HH:mm',
  lang: 'en-US',
  firstDay: 0, // Sunday
  grid: 2,
  calendars: 2,
  autoApply: false,
  zIndex: 1000,
  header: 'Select your stay dates',
  plugins: ['RangePlugin', 'LockPlugin', 'TimePlugin', 'PresetPlugin', 'AmpPlugin', 'KbdPlugin'],
  RangePlugin: {
    elementEnd: document.getElementById('check-out'),
    tooltip: true,
    locale: { one: 'night', other: 'nights' },
  },
  LockPlugin: {
    minDate: new Date(),
    minDays: 1,
    maxDays: 30,
    filter: (date) => {
      // Block maintenance dates
      const blocked = ['2024-07-04', '2024-07-05'];
      return blocked.includes(date.format('YYYY-MM-DD'));
    },
  },
  TimePlugin: {
    stepHours: 1,
    stepMinutes: 30,
  },
  PresetPlugin: {
    position: 'left',
    customPreset: {
      'Weekend Getaway': [
        new Date(new Date().setDate(new Date().getDate() + (6 - new Date().getDay()))),
        new Date(new Date().setDate(new Date().getDate() + (7 - new Date().getDay()))),
      ],
      'Week Stay': [new Date(), new Date(new Date().setDate(new Date().getDate() + 6))],
    },
  },
  AmpPlugin: {
    dropdown: { months: true, years: true, minYear: 2024, maxYear: 2026 },
    resetButton: true,
    darkMode: true,
  },
  setup(picker) {
    picker.on('select', (e) => {
      const { start, end } = e.detail;
      const nights = end.diff(start, 'day');
      const pricePerNight = 150;

      document.getElementById('summary').innerHTML = `
        <p>Check-in: ${start.format('ddd, MMM D, YYYY')} at ${start.format('HH:mm')}</p>
        <p>Check-out: ${end.format('ddd, MMM D, YYYY')} at ${end.format('HH:mm')}</p>
        <p>Duration: ${nights} night(s)</p>
        <p>Total: $${nights * pricePerNight}</p>
      `;
    });
  },
});
```

### Response
N/A (Client-side JavaScript execution)

#### Success Response (200)
N/A

#### Response Example
N/A
```

--------------------------------

### Installation

Source: https://context7.com/easepick/easepick/llms.txt

Instructions for installing Easepick using CDN or npm.

```APIDOC
## Installation

### Using CDN

```html
<script src="https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.1/dist/index.umd.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.1/dist/index.css">
```

### Using npm

```bash
# Install the full bundle
npm install @easepick/bundle

# Or install individual packages
npm install @easepick/core @easepick/datetime
npm install @easepick/range-plugin
npm install @easepick/lock-plugin
npm install @easepick/time-plugin
npm install @easepick/preset-plugin
npm install @easepick/kbd-plugin
npm install @easepick/amp-plugin
```
```

--------------------------------

### Install Easepick via CDN or npm

Source: https://context7.com/easepick/easepick/llms.txt

Instructions for including Easepick in your project using a CDN link or via npm package manager.

```html
<script src="https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.1/dist/index.umd.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.1/dist/index.css">
```

```bash
npm install @easepick/bundle
npm install @easepick/core @easepick/datetime @easepick/range-plugin @easepick/lock-plugin @easepick/time-plugin @easepick/preset-plugin @easepick/kbd-plugin @easepick/amp-plugin
```

--------------------------------

### Tokens Format

Source: https://github.com/easepick/easepick/blob/master/packages/datetime/README.md

Reference for the available tokens used for formatting DateTime objects, including case sensitivity and output examples.

```APIDOC
## Tokens format

_Tokens are case-sensitive._

| | Token | Output
| --- | :---: | ---
| Day of Month | D | 1 2 … 30 31 
| | DD | 01 02 … 30 31
| Month | M | 1 2 … 11 12
| | MM | 01 02 … 11 12
| | MMM | Jan Feb … Nov Dec
| | MMMM | January February … November December
| Year | YY | 70 71 … 29 30
| | YYYY | 1970 1971 … 2029 2030
| Hours (24 hour time) | H | 0 1 … 22 23
| | HH | 01 02 … 22 23
| Minutes | m | 1 2 … 58 59
| | mm | 01 02 … 58 59
| Seconds | s | 1 2 … 58 59
| | ss | 01 02 … 58 59
```

--------------------------------

### Perform Date Comparisons and Arithmetic

Source: https://github.com/easepick/easepick/blob/master/packages/datetime/README.md

Examples of using built-in methods to compare two dates or perform arithmetic operations like adding or subtracting time units.

```javascript
const date1 = new DateTime('2023-01-01', 'YYYY-MM-DD');
const date2 = new DateTime('2023-02-01', 'YYYY-MM-DD');

const isBefore = date1.isBefore(date2, 'month');
date1.add(1, 'month');
const formatted = date1.format('MMMM YYYY');
```

--------------------------------

### Easepick Initialization

Source: https://github.com/easepick/easepick/blob/master/packages/core/README.md

Demonstrates how to create and initialize an Easepick instance with basic configuration.

```APIDOC
## POST /api/users

### Description
Creates a new user in the system.

### Method
POST

### Endpoint
/api/users

### Parameters
#### Request Body
- **username** (string) - Required - The desired username for the new user.
- **email** (string) - Required - The email address of the new user.
- **password** (string) - Required - The password for the new user.

### Request Example
```json
{
  "username": "john_doe",
  "email": "john.doe@example.com",
  "password": "securepassword123"
}
```

### Response
#### Success Response (201)
- **id** (string) - The unique identifier for the newly created user.
- **username** (string) - The username of the created user.
- **email** (string) - The email address of the created user.

#### Response Example
```json
{
  "id": "user-12345",
  "username": "john_doe",
  "email": "john.doe@example.com"
}
```
```

--------------------------------

### Instantiate Easepick and Add Plugin (JavaScript)

Source: https://github.com/easepick/easepick/blob/master/packages/core/README.md

Demonstrates how to create an Easepick instance and dynamically add a plugin like 'AmpPlugin'. It shows how to access plugin options after adding.

```javascript
const picker = new easepick.create({
  element: document.getElementById('datepicker'),
  css: [
    'https://cdn.jsdelivr.net/npm/@easepick/core@[version.number]/dist/index.css',
  ],
});

// add AmpPlugin to the picker
const ampPlugin = picker.PluginManager.addInstance('AmpPlugin');
// change plugin option
ampPlugin.options.resetButton = true;
```

--------------------------------

### Core API - Creating a Basic Date Picker

Source: https://context7.com/easepick/easepick/llms.txt

Demonstrates how to initialize a basic date picker instance with common configurations and methods.

```APIDOC
## Core API - Creating a Basic Date Picker

The `easepick.create()` constructor initializes a new date picker instance bound to an HTML element with configurable options for date format, language, calendar display, and behavior.

```javascript
// Basic date picker with single date selection
const picker = new easepick.create({
  element: document.getElementById('datepicker'),
  css: [
    'https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.1/dist/index.css',
  ],
  format: 'YYYY-MM-DD',
  lang: 'en-US',
  firstDay: 1, // Monday
  grid: 1,
  calendars: 1,
  autoApply: true,
  readonly: true,
  setup(picker) {
    picker.on('select', (e) => {
      console.log('Selected date:', e.detail.date.format('YYYY-MM-DD'));
    });
  },
});

// Set date programmatically
picker.setDate('2024-06-15');

// Get current date
const selectedDate = picker.getDate();
console.log(selectedDate.format('MMMM D, YYYY')); // "June 15, 2024"

// Navigate to specific month
picker.gotoDate('2024-12-01');

// Clear selection
picker.clear();

// Show/hide picker
picker.show();
picker.hide();

// Check visibility
if (picker.isShown()) {
  console.log('Picker is visible');
}

// Destroy picker
picker.destroy();
```
```

--------------------------------

### Initialize and Control Basic Date Picker

Source: https://context7.com/easepick/easepick/llms.txt

Demonstrates creating a date picker instance, setting dates programmatically, and managing its lifecycle.

```javascript
const picker = new easepick.create({
  element: document.getElementById('datepicker'),
  css: ['https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.1/dist/index.css'],
  format: 'YYYY-MM-DD',
  lang: 'en-US',
  firstDay: 1,
  grid: 1,
  calendars: 1,
  autoApply: true,
  readonly: true,
  setup(picker) {
    picker.on('select', (e) => {
      console.log('Selected date:', e.detail.date.format('YYYY-MM-DD'));
    });
  },
});
picker.setDate('2024-06-15');
picker.show();
picker.destroy();
```

--------------------------------

### Easepick Methods

Source: https://github.com/easepick/easepick/blob/master/packages/core/README.md

Explains the available methods for interacting with an Easepick instance after initialization.

```APIDOC
## PUT /api/users/{id}

### Description
Updates an existing user's information.

### Method
PUT

### Endpoint
/api/users/{id}

### Parameters
#### Path Parameters
- **id** (string) - Required - The unique identifier of the user to update.
#### Request Body
- **email** (string) - Optional - The new email address for the user.
- **password** (string) - Optional - The new password for the user.

### Request Example
```json
{
  "email": "john.doe.updated@example.com"
}
```

### Response
#### Success Response (200)
- **id** (string) - The unique identifier for the updated user.
- **username** (string) - The username of the user.
- **email** (string) - The updated email address of the user.
- **updatedAt** (string) - The timestamp when the user was last updated (ISO 8601 format).

#### Response Example
```json
{
  "id": "user-12345",
  "username": "john_doe",
  "email": "john.doe.updated@example.com",
  "updatedAt": "2023-10-27T11:30:00Z"
}
```
```

--------------------------------

### Initialize DateTime Instance

Source: https://github.com/easepick/easepick/blob/master/packages/datetime/README.md

Demonstrates how to instantiate a new DateTime object using the constructor. It supports optional arguments for date, format, and language.

```javascript
const now = new DateTime();
const specificDate = new DateTime('2023-12-25', 'YYYY-MM-DD', 'en-US');
```

--------------------------------

### Initialize and Set Date in Easepick

Source: https://github.com/easepick/easepick/blob/master/packages/core/README.md

Demonstrates how to instantiate a new easepick instance by binding it to an HTML element and providing a CSS stylesheet. It also shows how to programmatically set the selected date using the setDate method.

```javascript
const picker = new easepick.create({
  element: document.getElementById('datepicker'),
  css: [
    'https://cdn.jsdelivr.net/npm/@easepick/core@[version.number]/dist/index.css',
  ],
});
picker.setDate('2022-01-01');
```

--------------------------------

### Easepick Options

Source: https://github.com/easepick/easepick/blob/master/packages/core/README.md

Details the various configuration options available when initializing Easepick.

```APIDOC
## GET /api/users/{id}

### Description
Retrieves details for a specific user by their ID.

### Method
GET

### Endpoint
/api/users/{id}

### Parameters
#### Path Parameters
- **id** (string) - Required - The unique identifier of the user to retrieve.

### Response
#### Success Response (200)
- **id** (string) - The unique identifier for the user.
- **username** (string) - The username of the user.
- **email** (string) - The email address of the user.
- **createdAt** (string) - The timestamp when the user was created (ISO 8601 format).

#### Response Example
```json
{
  "id": "user-12345",
  "username": "john_doe",
  "email": "john.doe@example.com",
  "createdAt": "2023-10-27T10:00:00Z"
}
```
```

--------------------------------

### Complete Easepick Booking System Integration (JavaScript)

Source: https://context7.com/easepick/easepick/llms.txt

This snippet showcases a full-featured booking system using Easepick, integrating multiple plugins like RangePlugin, LockPlugin, TimePlugin, PresetPlugin, AmpPlugin, and KbdPlugin. It configures date formatting, language, day of the week, calendar display, and event handling for selecting dates and calculating booking summaries. Dependencies include the Easepick CSS and JavaScript bundle.

```javascript
const bookingPicker = new easepick.create({
  element: document.getElementById('check-in'),
  css: [
    'https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.1/dist/index.css',
  ],
  format: 'YYYY-MM-DD HH:mm',
  lang: 'en-US',
  firstDay: 0, // Sunday
  grid: 2,
  calendars: 2,
  autoApply: false,
  zIndex: 1000,
  header: 'Select your stay dates',
  plugins: ['RangePlugin', 'LockPlugin', 'TimePlugin', 'PresetPlugin', 'AmpPlugin', 'KbdPlugin'],
  RangePlugin: {
    elementEnd: document.getElementById('check-out'),
    tooltip: true,
    locale: { one: 'night', other: 'nights' },
  },
  LockPlugin: {
    minDate: new Date(),
    minDays: 1,
    maxDays: 30,
    filter: (date) => {
      // Block maintenance dates
      const blocked = ['2024-07-04', '2024-07-05'];
      return blocked.includes(date.format('YYYY-MM-DD'));
    },
  },
  TimePlugin: {
    stepHours: 1,
    stepMinutes: 30,
  },
  PresetPlugin: {
    position: 'left',
    customPreset: {
      'Weekend Getaway': [
        new Date(new Date().setDate(new Date().getDate() + (6 - new Date().getDay()))),
        new Date(new Date().setDate(new Date().getDate() + (7 - new Date().getDay()))),
      ],
      'Week Stay': [new Date(), new Date(new Date().setDate(new Date().getDate() + 6))],
    },
  },
  AmpPlugin: {
    dropdown: { months: true, years: true, minYear: 2024, maxYear: 2026 },
    resetButton: true,
    darkMode: true,
  },
  setup(picker) {
    picker.on('select', (e) => {
      const { start, end } = e.detail;
      const nights = end.diff(start, 'day');
      const pricePerNight = 150;

      document.getElementById('summary').innerHTML = `
        <p>Check-in: ${start.format('ddd, MMM D, YYYY')} at ${start.format('HH:mm')}</p>
        <p>Check-out: ${end.format('ddd, MMM D, YYYY')} at ${end.format('HH:mm')}</p>
        <p>Duration: ${nights} night(s)</p>
        <p>Total: $${nights * pricePerNight}</p>
      `;
    });
  },
});
```

--------------------------------

### Time Plugin Configuration and Methods

Source: https://github.com/easepick/easepick/blob/master/packages/time-plugin/README.md

Configuration options and methods for the @easepick/time-plugin.

```APIDOC
## Time Plugin Configuration

### Description
Configure the time picker behavior including steps and format.

### Options
- **seconds** (boolean) - Optional - Enable seconds picker (Default: false)
- **stepHours** (number) - Optional - Step for hours (Default: 1)
- **stepMinutes** (number) - Optional - Step for minutes (Default: 5)
- **stepSeconds** (number) - Optional - Step for seconds (Default: 5)
- **format12** (boolean) - Optional - Display 12H time (Default: false)

## Time Plugin Methods

### Description
Programmatically set time values for the picker.

- **setTime(value)** - Set a time for single date picker.
- **setStartTime(value)** - Set start time of date range.
- **setEndTime(value)** - Set end time of date range.
```

--------------------------------

### PluginManager for Dynamic Plugin Management in JavaScript

Source: https://context7.com/easepick/easepick/llms.txt

Illustrates how to manage plugins dynamically after Easepick initialization using the PluginManager. This includes adding, retrieving, removing, and reloading plugin instances.

```javascript
const picker = new easepick.create({
  element: document.getElementById('datepicker'),
  css: [
    'https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.1/dist/index.css',
  ],
});

// Add plugin after initialization
const ampPlugin = picker.PluginManager.addInstance('AmpPlugin');
ampPlugin.options.resetButton = true;
ampPlugin.options.weekNumbers = true;

// Get plugin instance
const rangePlugin = picker.PluginManager.getInstance('RangePlugin');
if (rangePlugin) {
  rangePlugin.options.tooltip = false;
}

// Remove plugin
picker.PluginManager.removeInstance('AmpPlugin'); // Returns boolean

// Reload plugin (remove and add again)
const reloadedPlugin = picker.PluginManager.reloadInstance('RangePlugin');
```

--------------------------------

### Range Plugin Configuration

Source: https://github.com/easepick/easepick/blob/master/packages/range-plugin/README.md

Configuration options for initializing the range-plugin in easepick.

```APIDOC
## Range Plugin Options

### Description
Configure the behavior of the range selection plugin, including preselection and UI customization.

### Parameters
#### Options
- **elementEnd** (HTMLElement/string) - Optional - Bind the datepicker to an element for the end date.
- **startDate** (Date/string/number) - Optional - Preselect start date.
- **endDate** (Date/string/number) - Optional - Preselect end date.
- **repick** (boolean) - Optional - Allow changing only one end of the range if already selected.
- **strict** (boolean) - Optional - If false, allows selecting an incomplete range.
- **delimiter** (string) - Optional - Delimiter between dates (default: ' - ').
- **tooltip** (boolean) - Optional - Show tooltip with number of days selected.
- **locale** (object) - Optional - Text configuration for the tooltip.
```

--------------------------------

### KbdPlugin: Enable Keyboard Navigation in Easepick

Source: https://context7.com/easepick/easepick/llms.txt

The KbdPlugin provides full keyboard accessibility for Easepick, allowing users to navigate and select dates using standard keyboard controls like arrow keys, Tab, and Enter. This plugin is crucial for users who rely on keyboard navigation for accessibility.

```javascript
const kbdPicker = new easepick.create({
  element: document.getElementById('datepicker'),
  css: [
    'https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.1/dist/index.css',
  ],
  plugins: ['KbdPlugin'],
  KbdPlugin: {
    unitIndex: 1, // tabIndex for navigation buttons
    dayIndex: 2, // tabIndex for day elements
  },
});

// Keyboard shortcuts:
// Arrow keys: Navigate between days
// Tab: Move between elements
// Enter/Space: Select day
// Escape: Close picker
```

--------------------------------

### Handle Easepick Events

Source: https://context7.com/easepick/easepick/llms.txt

Illustrates how to attach and remove event listeners for user interactions like selection, view changes, and visibility toggles.

```javascript
const picker = new easepick.create({
  element: document.getElementById('datepicker'),
  css: ['https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.1/dist/index.css'],
  autoApply: false,
  setup(picker) {
    picker.on('select', (e) => console.log('Date selected:', e.detail.date));
    picker.on('show', (e) => console.log('Picker opened'));
    picker.on('hide', () => console.log('Picker closed'));
  }
});
const handler = (e) => console.log(e.detail);
picker.on('select', handler);
picker.off('select', handler);
```

--------------------------------

### KbdPlugin - Keyboard Navigation

Source: https://context7.com/easepick/easepick/llms.txt

The KbdPlugin enables full keyboard navigation support for accessibility, allowing users to navigate and select dates using arrow keys, Tab, and Enter.

```APIDOC
## KbdPlugin - Keyboard Navigation

### Description
The KbdPlugin enables full keyboard navigation support for accessibility, allowing users to navigate and select dates using arrow keys, Tab, and Enter.

### Method
N/A (JavaScript Configuration)

### Endpoint
N/A (JavaScript Configuration)

### Parameters
#### KbdPlugin Options
- **unitIndex** (number) - Optional - tabIndex for navigation buttons.
- **dayIndex** (number) - Optional - tabIndex for day elements.

### Request Example
```javascript
const kbdPicker = new easepick.create({
  element: document.getElementById('datepicker'),
  css: [
    'https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.1/dist/index.css',
  ],
  plugins: ['KbdPlugin'],
  KbdPlugin: {
    unitIndex: 1, // tabIndex for navigation buttons
    dayIndex: 2, // tabIndex for day elements
  },
});

// Keyboard shortcuts:
// Arrow keys: Navigate between days
// Tab: Move between elements
// Enter/Space: Select day
// Escape: Close picker
```

### Response
N/A (JavaScript Configuration)
```

--------------------------------

### Localization and Internationalization in JavaScript

Source: https://context7.com/easepick/easepick/llms.txt

Shows how to configure Easepick for different languages and locales, including setting language codes, date formats, first day of the week, and custom locale strings for UI elements and plugin-specific text.

```javascript
// German locale
const germanPicker = new easepick.create({
  element: document.getElementById('datepicker'),
  css: [
    'https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.1/dist/index.css',
  ],
  lang: 'de-DE',
  format: 'DD.MM.YYYY',
  firstDay: 1, // Monday
  locale: {
    previousMonth: '&larr;',
    nextMonth: '&rarr;',
    cancel: 'Abbrechen',
    apply: 'Anwenden',
  },
  plugins: ['RangePlugin'],
  RangePlugin: {
    locale: {
      one: 'Tag',
      other: 'Tage',
    },
  },
});

// French locale
const frenchPicker = new easepick.create({
  element: document.getElementById('french-picker'),
  css: [
    'https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.1/dist/index.css',
  ],
  lang: 'fr-FR',
  format: 'DD/MM/YYYY',
  locale: {
    cancel: 'Annuler',
    apply: 'Appliquer',
  },
});
```

--------------------------------

### Implement Range Selection with RangePlugin

Source: https://context7.com/easepick/easepick/llms.txt

Configures the easepick RangePlugin to support dual-input or single-input date range selection. It demonstrates how to set initial dates, customize tooltips, and handle selection events.

```javascript
const rangePicker = new easepick.create({
  element: document.getElementById('start-date'),
  css: ['https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.1/dist/index.css'],
  plugins: ['RangePlugin'],
  RangePlugin: {
    elementEnd: document.getElementById('end-date'),
    startDate: '2024-01-15',
    endDate: '2024-01-20',
    repick: true,
    strict: true,
    delimiter: ' - ',
    tooltip: true,
    tooltipNumber: (num) => num,
    locale: { one: 'day', other: 'days' },
  },
  setup(picker) {
    picker.on('select', (e) => {
      const { start, end } = e.detail;
      console.log(`Range: ${start.format('YYYY-MM-DD')} to ${end.format('YYYY-MM-DD')}`);
    });
  },
});
rangePicker.setDateRange('2024-03-01', '2024-03-15');
```

--------------------------------

### Easepick Events

Source: https://github.com/easepick/easepick/blob/master/packages/core/README.md

Describes the custom events that Easepick can emit and how to listen to them.

```APIDOC
## DELETE /api/users/{id}

### Description
Deletes a user from the system.

### Method
DELETE

### Endpoint
/api/users/{id}

### Parameters
#### Path Parameters
- **id** (string) - Required - The unique identifier of the user to delete.

### Response
#### Success Response (204)
No content is returned upon successful deletion.

#### Response Example
(No response body)
```

--------------------------------

### Event Handling

Source: https://context7.com/easepick/easepick/llms.txt

Details on how to handle various events emitted by the Easepick date picker, such as date selection, view changes, and visibility.

```APIDOC
## Event Handling

Easepick provides custom events for responding to user interactions including date selection, view changes, and picker visibility.

```javascript
const picker = new easepick.create({
  element: document.getElementById('datepicker'),
  css: [
    'https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.1/dist/index.css',
  ],
  autoApply: false, // Show Apply/Cancel buttons
  setup(picker) {
    // Fired when date selection is submitted
    picker.on('select', (e) => {
      console.log('Date selected:', e.detail.date);
    });

    // Fired before selection is confirmed (when autoApply is false)
    picker.on('preselect', (e) => {
      console.log('Date preselected:', e.detail.date);
    });

    // Fired when calendar view is rendered
    picker.on('view', (e) => {
      const { view, date, target } = e.detail;
      if (view === 'CalendarDay') {
        // Customize day appearance
        if (date.getDay() === 0 || date.getDay() === 6) {
          target.classList.add('weekend');
        }
      }
    });

    // Fired when picker is shown
    picker.on('show', (e) => {
      console.log('Picker opened');
    });

    // Fired when picker is hidden
    picker.on('hide', () => {
      console.log('Picker closed');
    });

    // Fired when selection is cleared
    picker.on('clear', () => {
      console.log('Selection cleared');
    });

    // Standard DOM events also work
    picker.on('click', (e) => {
      console.log('Clicked:', e.target);
    });
  },
});

// Remove event listener
const handler = (e) => console.log(e.detail);
picker.on('select', handler);
picker.off('select', handler);

// Trigger custom event
picker.trigger('customEvent', { data: 'value' });
```
```

--------------------------------

### PluginManager API Methods

Source: https://github.com/easepick/easepick/blob/master/packages/core/README.md

Methods to manage the lifecycle and configuration of plugins within the easepick picker instance.

```APIDOC
## PluginManager Methods

### Description
These methods allow for the programmatic manipulation of plugins attached to an easepick instance.

### Methods
- **getInstance(pluginName)**: Returns the plugin instance.
- **addInstance(pluginName)**: Adds a plugin to the picker and returns the instance.
- **removeInstance(pluginName)**: Removes the plugin from the picker. Returns a boolean.
- **reloadInstance(pluginName)**: Removes and re-adds a plugin. Returns the new instance.

### Parameters
- **pluginName** (string) - Required - The name of the plugin (e.g., 'RangePlugin', 'AmpPlugin').

### Usage Example
```javascript
const picker = new easepick.create({ element: document.getElementById('datepicker') });

// Add a plugin
const ampPlugin = picker.PluginManager.addInstance('AmpPlugin');

// Modify plugin options
ampPlugin.options.resetButton = true;
```
```

--------------------------------

### Easepick PluginManager

Source: https://github.com/easepick/easepick/blob/master/packages/core/README.md

Information on using the PluginManager to manage Easepick plugins.

```APIDOC
## GET /api/status

### Description
Retrieves the current status of the application or service.

### Method
GET

### Endpoint
/api/status

### Response
#### Success Response (200)
- **status** (string) - The current status (e.g., "operational", "degraded", "maintenance").
- **message** (string) - An optional message providing more details about the status.

#### Response Example
```json
{
  "status": "operational",
  "message": "All systems are running normally."
}
```
```

--------------------------------

### Inline Calendar Display

Source: https://context7.com/easepick/easepick/llms.txt

Shows how to configure the date picker to display as an always-visible inline calendar.

```APIDOC
## Inline Calendar Display

Display the date picker as an always-visible inline calendar by setting the `inline` option, useful for embedding calendars directly in page layouts.

```javascript
const inlinePicker = new easepick.create({
  element: document.getElementById('inline-calendar'),
  css: [
    'https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.1/dist/index.css',
  ],
  inline: true,
  calendars: 2, // Show 2 months side by side
  grid: 2,
  header: 'Select a Date',
  setup(picker) {
    picker.on('select', (e) => {
      document.getElementById('result').textContent =
        `Selected: ${e.detail.date.format('dddd, MMMM D, YYYY')}`;
    });
  },
});
```
```

--------------------------------

### DateTime Methods

Source: https://github.com/easepick/easepick/blob/master/packages/datetime/README.md

A collection of methods for manipulating and querying DateTime objects, including cloning, comparison, addition, subtraction, and formatting.

```APIDOC
## Methods

| name | arguments | description
| --- | --- | ---
| getWeek | - | Returns a week number of date
| clone | - | Returns a copy of date
| toJSDate | - | Returns [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) object.
| inArray | (array, inclusivity) | Find DateTime object in passed DateTime array. 
| isBetween | (date1, date2, inclusivity) | Check if a DateTime is between two other DateTime. 
| isBefore | (date, unit) | Check if a DateTime is before another DateTime. `unit` are `day`, `month`, `year`. 
| isSameOrBefore | (date, unit) | Check if a DateTime is before or the same as another DateTime. `unit` are `day`, `month`. 
| isAfter | (date, unit) | Check if a DateTime is after another DateTime.. `unit` are `day`, `month`, `year`. 
| isSameOrAfter | (date, unit) | Check if a DateTime is after or the same as another DateTime. `unit` are `day`, `month`. 
| isSame | (date, unit) | Check if a DateTime is the same as another DateTime. `unit` are `day`, `month`. 
| add | (duration, unit) | Mutates the original DateTime by adding unit. `unit` are `day`, `month`. 
| subtract | (duration, unit) | Mutates the original DateTime by subtracting unit. `unit` are `day`, `month`. 
| diff | (date, unit) | Returns diff between two DateTime. `unit` are `day`, `month`. 
| format | (format, lang) | Format output. See [tokens format](#tokens-format) for `format` argument. `lang` affects month names (`MMM`, `MMMM` tokens).
```

--------------------------------

### PresetPlugin: Add Quick Date Range Presets to Easepick

Source: https://context7.com/easepick/easepick/llms.txt

The PresetPlugin allows users to quickly select predefined date ranges like 'Today', 'Last 7 Days', or custom ranges via buttons. This enhances user experience by simplifying common date selections. It can be positioned on the left or right side of the picker.

```javascript
const presetPicker = new easepick.create({
  element: document.getElementById('datepicker'),
  css: [
    'https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.1/dist/index.css',
  ],
  plugins: ['RangePlugin', 'PresetPlugin'],
  PresetPlugin: {
    position: 'left', // 'left' or 'right'
    customLabels: ['Today', 'Yesterday', 'Last 7 Days', 'Last 30 Days', 'This Month', 'Last Month'],
  },
});

// Custom preset ranges
const customPresetPicker = new easepick.create({
  element: document.getElementById('custom-preset'),
  css: [
    'https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.1/dist/index.css',
  ],
  plugins: ['RangePlugin', 'PresetPlugin'],
  PresetPlugin: {
    position: 'right',
    customPreset: {
      'This Week': [
        new Date(new Date().setDate(new Date().getDate() - new Date().getDay())),
        new Date(new Date().setDate(new Date().getDate() - new Date().getDay() + 6)),
      ],
      'Next 7 Days': [
        new Date(),
        new Date(new Date().setDate(new Date().getDate() + 6)),
      ],
      'This Quarter': [
        new Date(new Date().getFullYear(), Math.floor(new Date().getMonth() / 3) * 3, 1),
        new Date(new Date().getFullYear(), Math.floor(new Date().getMonth() / 3) * 3 + 3, 0),
      ],
    },
  },
});
```

--------------------------------

### Custom CSS Styling for Easepick in JavaScript

Source: https://context7.com/easepick/easepick/llms.txt

Demonstrates various methods for applying custom CSS styles to the Easepick date picker, including using inline CSS strings, linking external stylesheets, and applying styles dynamically via a JavaScript function.

```javascript
// Inline CSS string
const styledPicker = new easepick.create({
  element: document.getElementById('datepicker'),
  css: '
    .container { font-family: "Arial", sans-serif; }
    .day.selected { background-color: #007bff; color: white; }
    .day:hover { background-color: #e9ecef; }
    .day.in-range { background-color: #cce5ff; }
    .header { background-color: #f8f9fa; }
  ',
});

// Multiple CSS files
const multiCssPicker = new easepick.create({
  element: document.getElementById('datepicker'),
  css: [
    'https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.1/dist/index.css',
    '/custom/datepicker-theme.css',
  ],
});

// Dynamic CSS function
const dynamicCssPicker = new easepick.create({
  element: document.getElementById('datepicker'),
  css: (picker) => {
    const style = document.createElement('style');
    style.textContent = '
      .container { --primary-color: #28a745; }
      .day.selected { background-color: var(--primary-color); }
    ';
    picker.ui.shadowRoot.appendChild(style);
  },
});
```

--------------------------------

### Restrict Date Selection with LockPlugin

Source: https://context7.com/easepick/easepick/llms.txt

Demonstrates how to use the LockPlugin to disable specific dates, set date boundaries, and implement custom filtering logic like locking weekends or holidays.

```javascript
const lockedPicker = new easepick.create({
  element: document.getElementById('datepicker'),
  css: ['https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.1/dist/index.css'],
  plugins: ['RangePlugin', 'LockPlugin'],
  LockPlugin: {
    minDate: new Date(),
    maxDate: '2024-12-31',
    minDays: 2,
    maxDays: 14,
    filter: (date, pickedDates) => {
      if (date.getDay() === 0 || date.getDay() === 6) return true;
      const holidays = ['2024-12-25', '2024-12-26', '2024-01-01'];
      return holidays.includes(date.format('YYYY-MM-DD'));
    },
  },
});
```

--------------------------------

### Range Plugin Methods

Source: https://github.com/easepick/easepick/blob/master/packages/range-plugin/README.md

Methods to programmatically interact with the range selection state.

```APIDOC
## Range Plugin Methods

### Description
Methods available to set or retrieve the current date range programmatically.

### Methods
- **setDateRange(start, end)** - Set the full date range.
- **setStartDate(date)** - Set the start of the date range.
- **setEndDate(date)** - Set the end of the date range.
- **getStartDate()** - Returns the current start date as a DateTime object.
- **getEndDate()** - Returns the current end date as a DateTime object.
```

--------------------------------

### Configure Inline Calendar Display

Source: https://context7.com/easepick/easepick/llms.txt

Shows how to render the date picker as an always-visible inline element within the page layout.

```javascript
const inlinePicker = new easepick.create({
  element: document.getElementById('inline-calendar'),
  css: ['https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.1/dist/index.css'],
  inline: true,
  calendars: 2,
  grid: 2,
  header: 'Select a Date',
  setup(picker) {
    picker.on('select', (e) => {
      document.getElementById('result').textContent = `Selected: ${e.detail.date.format('dddd, MMMM D, YYYY')}`;
    });
  },
});
```

--------------------------------

### AmpPlugin: Enhance Easepick with Dropdowns, Reset, and Dark Mode

Source: https://context7.com/easepick/easepick/llms.txt

The AmpPlugin adds advanced features to Easepick, including month and year selection dropdowns, a reset button for clearing selections, dark mode support, and the display of week numbers. It aims to provide a more feature-rich and user-friendly interface.

```javascript
const ampPicker = new easepick.create({
  element: document.getElementById('datepicker'),
  css: [
    'https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.1/dist/index.css',
  ],
  plugins: ['AmpPlugin'],
  AmpPlugin: {
    dropdown: {
      minYear: 1990,
      maxYear: 2030,
      months: true, // Enable month dropdown
      years: 'asc', // Enable year dropdown, 'asc' or 'desc' for sort order
    },
    resetButton: true, // Show reset/clear button
    darkMode: true, // Enable dark mode based on system preference
    weekNumbers: true, // Display week numbers
  },
});

// Custom reset button handler
const customResetPicker = new easepick.create({
  element: document.getElementById('custom-reset'),
  css: [
    'https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.1/dist/index.css',
  ],
  plugins: ['AmpPlugin'],
  AmpPlugin: {
    resetButton: () => {
      // Return true to allow reset, false to prevent
      return confirm('Are you sure you want to clear the selection?');
    },
  },
});
```

--------------------------------

### DateTime Utility Class in JavaScript

Source: https://context7.com/easepick/easepick/llms.txt

Demonstrates the usage of the DateTime class for creating, manipulating, comparing, and formatting dates. It extends native Date objects with additional utility methods.

```javascript
import { DateTime } from '@easepick/datetime';

// Create DateTime instances
const now = new DateTime(); // Current date
const fromString = new DateTime('2024-06-15', 'YYYY-MM-DD');
const fromDate = new DateTime(new Date(2024, 5, 15));
const fromTimestamp = new DateTime(1718409600000);

// Clone and manipulate
const date = new DateTime('2024-06-15');
const cloned = date.clone();
cloned.add(7, 'days');
cloned.subtract(1, 'month');

// Date comparisons
const date1 = new DateTime('2024-06-15');
const date2 = new DateTime('2024-06-20');

date1.isBefore(date2, 'day'); // true
date1.isAfter(date2, 'day'); // false
date1.isSame(date2, 'month'); // true
date1.isSameOrBefore(date2, 'day'); // true
date1.isBetween(
  new DateTime('2024-06-01'),
  new DateTime('2024-06-30'),
  '[]' // inclusivity: '()', '[)', '(]', '[]'
); // true

// Calculate difference
const diff = date2.diff(date1, 'day'); // 5

// Get week number
const weekNum = date1.getWeek(1); // Week number (1 = Monday start)

// Format output
console.log(date1.format('YYYY-MM-DD')); // "2024-06-15"
console.log(date1.format('D MMMM YYYY')); // "15 June 2024"
console.log(date1.format('MMM D, YY')); // "Jun 15, 24"
console.log(date1.format('HH:mm:ss')); // "00:00:00"

// Format tokens:
// YYYY: 4-digit year, YY: 2-digit year
// MMMM: Full month, MMM: Short month, MM: 2-digit month, M: month
// DD: 2-digit day, D: day
// HH: 24-hour, hh: 12-hour, H/h: no padding
// mm: minutes, ss: seconds
// A/a: AM/PM

// Check if date is in array
const holidays = [
  new DateTime('2024-12-25'),
  [new DateTime('2024-12-31'), new DateTime('2025-01-02')], // Range
];
date1.inArray(holidays, '[]'); // false

// Convert to JavaScript Date
const jsDate = date1.toJSDate();
```

--------------------------------

### PresetPlugin - Quick Date Range Presets

Source: https://context7.com/easepick/easepick/llms.txt

The PresetPlugin adds predefined date range buttons for common selections like 'Today', 'Last 7 Days', or custom ranges.

```APIDOC
## PresetPlugin - Quick Date Range Presets

### Description
The PresetPlugin adds predefined date range buttons for common selections like "Today", "Last 7 Days", or custom ranges.

### Method
N/A (JavaScript Configuration)

### Endpoint
N/A (JavaScript Configuration)

### Parameters
#### PresetPlugin Options
- **position** (string) - Optional - Position of the preset buttons ('left' or 'right').
- **customLabels** (array of strings) - Optional - Labels for default presets.
- **customPreset** (object) - Optional - Define custom preset ranges.
  - Keys are preset names (string).
  - Values are arrays of two Date objects representing the start and end of the range.

### Request Example
```javascript
const presetPicker = new easepick.create({
  element: document.getElementById('datepicker'),
  css: [
    'https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.1/dist/index.css',
  ],
  plugins: ['RangePlugin', 'PresetPlugin'],
  PresetPlugin: {
    position: 'left', // 'left' or 'right'
    customLabels: ['Today', 'Yesterday', 'Last 7 Days', 'Last 30 Days', 'This Month', 'Last Month'],
  },
});

// Custom preset ranges
const customPresetPicker = new easepick.create({
  element: document.getElementById('custom-preset'),
  css: [
    'https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.1/dist/index.css',
  ],
  plugins: ['RangePlugin', 'PresetPlugin'],
  PresetPlugin: {
    position: 'right',
    customPreset: {
      'This Week': [
        new Date(new Date().setDate(new Date().getDate() - new Date().getDay())),
        new Date(new Date().setDate(new Date().getDate() - new Date().getDay() + 6)),
      ],
      'Next 7 Days': [
        new Date(),
        new Date(new Date().setDate(new Date().getDate() + 6)),
      ],
      'This Quarter': [
        new Date(new Date().getFullYear(), Math.floor(new Date().getMonth() / 3) * 3, 1),
        new Date(new Date().getFullYear(), Math.floor(new Date().getMonth() / 3) * 3 + 3, 0),
      ],
    },
  },
});
```

### Response
N/A (JavaScript Configuration)
```