### Install @svelte-plugins/datepicker

Source: https://github.com/svelte-plugins/datepicker/blob/main/README.md

Instructions for installing the @svelte-plugins/datepicker package along with svelte using various package managers.

```bash
# npm
> npm install svelte @svelte-plugins/datepicker

# pnpm
> pnpm install svelte @svelte-plugins/datepicker

# yarn
> yarn add svelte @svelte-plugins/datepicker
```

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

### Install Svelte Datepicker

Source: https://context7.com/svelte-plugins/datepicker/llms.txt

Installs the necessary packages for using the Svelte Datepicker component. This includes the Svelte framework itself and the datepicker library. Supports npm, pnpm, and yarn package managers.

```bash
# npm
npm install svelte @svelte-plugins/datepicker

# pnpm
pnpm install svelte @svelte-plugins/datepicker

# yarn
yarn add svelte @svelte-plugins/datepicker
```

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

### Svelte Date Range Picker with Presets

Source: https://context7.com/svelte-plugins/datepicker/llms.txt

Implements a Svelte date range picker that includes predefined date range options (presets) for user convenience. This example shows how to define `presetRanges` and enable `showPresets` on the DatePicker component.

```svelte
<script>
  import { DatePicker } from '@svelte-plugins/datepicker';

  const MILLISECONDS_IN_DAY = 24 * 60 * 60 * 1000;
  const getDateFromToday = (days) => Date.now() - days * MILLISECONDS_IN_DAY;

  let startDate = getDateFromToday(6);
  let endDate = new Date();
  let isOpen = false;

  let presetRanges = [
    {
      label: 'Today',
      start: getDateFromToday(0),
      end: getDateFromToday(0)
    },
    {
      label: 'Last 7 Days',
      start: getDateFromToday(6),
      end: getDateFromToday(0)
    },
    {
      label: 'Last 30 Days',
      start: getDateFromToday(29),
      end: getDateFromToday(0)
    },
    {
      label: 'Last Quarter',
      start: getDateFromToday(89),
      end: getDateFromToday(0)
    }
  ];

  const onDateChange = (event) => {
    console.log('Selected range:', event.rangeDates);
  };
</script>

<DatePicker
  bind:isOpen
  bind:startDate
  bind:endDate
  isRange
  isMultipane
  showPresets
  {presetRanges}
  {onDateChange}
>
  <input type="text" value="{startDate} - {endDate}" on:click={() => isOpen = true} />
</DatePicker>
```

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

### Svelte Date Range Picker Implementation

Source: https://context7.com/svelte-plugins/datepicker/llms.txt

Shows how to set up a date range picker in Svelte, allowing users to select both a start and end date. It utilizes the `isRange` prop and includes a multipane view for better navigation. The `onDateChange` handler logs the selected range.

```svelte
<script>
  import { DatePicker } from '@svelte-plugins/datepicker';
  import { format } from 'date-fns';

  const MILLISECONDS_IN_DAY = 24 * 60 * 60 * 1000;
  const getDateFromToday = (days) => Date.now() - days * MILLISECONDS_IN_DAY;

  let startDate = getDateFromToday(29);
  let endDate = new Date();
  let dateFormat = 'MMM d, yyyy';
  let isOpen = false;

  const toggleDatePicker = () => (isOpen = !isOpen);

  const formatDate = (dateString) => {
    if (isNaN(new Date(dateString))) {
      return '';
    }
    return dateString && format(new Date(dateString), dateFormat) || '';
  };

  const onDateChange = (event) => {
    console.log('Date range selected:', event);
    // event includes: startDate, endDate, rangeDates array
  };

  $: formattedStartDate = formatDate(startDate);
  $: formattedEndDate = formatDate(endDate);
</script>

<DatePicker
  bind:isOpen
  bind:startDate
  bind:endDate
  isRange
  isMultipane
  onDateChange={onDateChange}
>
  <div class="date-field" on:click={toggleDatePicker}>
    {#if startDate}
      {formattedStartDate} - {formattedEndDate}
    {:else}
      Pick a date range
    {/if}
  </div>
</DatePicker>

<style>
  .date-field {
    border: 1px solid #e8e9ea;
    padding: 16px;
    cursor: pointer;
  }
</style>
```

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

### Svelte Datepicker Custom Theme Application

Source: https://github.com/svelte-plugins/datepicker/blob/main/README.md

Demonstrates how to apply a custom theme to the Svelte Datepicker component using the 'theme' property and corresponding CSS overrides. This example shows how to customize the background, borders, text colors, and navigation elements for a specific theme.

```svelte
<DatePicker ... theme="custom-datepicker">...</DatePicker>

<style>
  :global(.datepicker[data-picker-theme="custom-datepicker"]) {
    --datepicker-container-background: #ff66ae;
    --datepicker-container-border: 1px solid #ff1683;

    --datepicker-calendar-header-text-color: #fff;
    --datepicker-calendar-dow-color: #fff;
    --datepicker-calendar-day-color: #fff;
    --datepicker-calendar-day-color-disabled: pink;
    --datepicker-calendar-range-selected-background: #ff1683;

    --datepicker-calendar-header-month-nav-background-hover: #ff1683;
    --datepicker-calendar-header-month-nav-icon-next-filter: invert(100);
    --datepicker-calendar-header-month-nav-icon-prev-filter: invert(100);
    --datepicker-calendar-header-year-nav-icon-next-filter: invert(100);
    --datepicker-calendar-header-year-nav-icon-prev-filter: invert(100);

    --datepicker-calendar-split-border: 1px solid pink;

    --datepicker-presets-border: 1px solid pink;
    --datepicker-presets-button-background-active: #ff1683;
    --datepicker-presets-button-color: #fff;
    --datepicker-presets-button-color-active: #fff;
    --datepicker-presets-button-color-hover: #333;
    --datepicker-presets-button-color-focus: #333;
  }
</style>
```

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

### Datepicker Calendar Range Start/End Styles (CSS)

Source: https://github.com/svelte-plugins/datepicker/blob/main/README.md

Applies specific styling to the start and end dates of a selected range. Uses a box-shadow to create a visual indication for the range boundaries.

```css
/**
 * Calendar Range Start & End
 */
--datepicker-calendar-range-start-box-shadow: inset -20px 0 0 var(--datepicker-state-hover);
```

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

### Configure Svelte DatePicker with Custom Labels and Week Start

Source: https://context7.com/svelte-plugins/datepicker/llms.txt

This snippet demonstrates how to configure the Svelte DatePicker component with custom day of the week labels, month labels, preset date range labels, and setting the first day of the week to Monday. It also shows how to bind date and open state and handle date change events.

```svelte
<script>
  import { DatePicker } from '@svelte-plugins/datepicker';

  let startDate = new Date();
  let isOpen = false;

  // Start week on Monday instead of Sunday
  let startOfWeek = 1;

  // Custom day of week labels
  let dowLabels = ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb'];

  // Custom month labels (Spanish)
  let monthLabels = [
    'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
    'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'
  ];

  // Custom preset labels
  let presetLabels = ['Hoy', 'Últimos 7 Días', 'Últimos 30 Días'];

  const onDateChange = (event) => {
    console.log('Fecha seleccionada:', event.startDate);
  };
</script>

<DatePicker
  bind:isOpen
  bind:startDate
  {startOfWeek}
  {dowLabels}
  {monthLabels}
  {presetLabels}
  defaultYear={2025}
  defaultMonth={0}
  showYearControls={true}
  includeFont={true}
  {onDateChange}
>
  <input type="text" on:click={() => isOpen = true} />
</DatePicker>
```

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

### Implement clickOutside Action for Svelte Components

Source: https://context7.com/svelte-plugins/datepicker/llms.txt

This JavaScript snippet shows how to use the standalone `clickOutside` action from `@svelte-plugins/datepicker/actions` in a Svelte component. It demonstrates basic usage to close a menu when clicking outside and provides an example of using the `include` option to ignore clicks on specific elements.

```javascript
import { clickOutside } from '@svelte-plugins/datepicker/actions';

// In a Svelte component
let isOpen = false;
let menuElement;

const handleClickOutside = () => {
  console.log('Clicked outside the element');
  isOpen = false;
};

// Usage in template:
// <div
//   bind:this={menuElement}
//   use:clickOutside={{ onClickOutside: handleClickOutside }}
// >
//   Menu content
// </div>

// With include option (elements to ignore)
const config = {
  include: [buttonElement],  // Clicks on these elements won't trigger callback
  onClickOutside: handleClickOutside
};
```

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

### Custom Theming for Svelte DatePicker

Source: https://context7.com/svelte-plugins/datepicker/llms.txt

Shows how to customize the Svelte DatePicker's appearance using CSS variables. By applying a custom theme name via the 'theme' prop, developers can override default styles. The example demonstrates overriding colors for containers, headers, dates, and interactive elements.

```svelte
<script>
  import { DatePicker } from '@svelte-plugins/datepicker';

  let startDate = new Date();
  let isOpen = false;
</script>

<DatePicker bind:isOpen bind:startDate theme="custom-theme">
  <input type="text" on:click={() => isOpen = true} />
</DatePicker>

<style>
  :global(.datepicker[data-picker-theme="custom-theme"]) {
    --datepicker-container-background: #2c3e50;
    --datepicker-container-border: 1px solid #34495e;

    --datepicker-calendar-header-text-color: #ecf0f1;
    --datepicker-calendar-dow-color: #bdc3c7;
    --datepicker-calendar-day-color: #ecf0f1;
    --datepicker-calendar-day-color-disabled: #7f8c8d;

    --datepicker-state-active: #3498db;
    --datepicker-state-hover: #34495e;

    --datepicker-calendar-range-selected-background: #3498db;
    --datepicker-calendar-day-background-hover: #34495e;

    --datepicker-calendar-header-month-nav-background-hover: #34495e;
    --datepicker-calendar-header-month-nav-icon-next-filter: invert(100);
    --datepicker-calendar-header-month-nav-icon-prev-filter: invert(100);

    --datepicker-presets-button-background-active: #3498db;
    --datepicker-presets-button-color: #ecf0f1;
    --datepicker-presets-button-color-active: #fff;
  }
</style>
```

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

### Basic Single Date Picker in Svelte

Source: https://context7.com/svelte-plugins/datepicker/llms.txt

Demonstrates how to implement a basic single date picker in a Svelte application. It shows how to bind the selected date, format the input display using date-fns, and toggle the picker's visibility.

```svelte
<script>
  import { DatePicker } from "@svelte-plugins/datepicker";
  import { format } from 'date-fns';

  let startDate = new Date();
  let dateFormat = 'MM/dd/yy';
  let isOpen = false;

  const toggleDatePicker = () => (isOpen = !isOpen);

  const formatDate = (dateString) => {
    if (isNaN(new Date(dateString))) {
      return '';
    }
    return dateString && format(new Date(dateString), dateFormat) || '';
  };

  let formattedStartDate = formatDate(startDate);

  const onChange = () => {
    startDate = new Date(formattedStartDate);
  };

  $: formattedStartDate = formatDate(startDate);
</script>

<DatePicker bind:isOpen bind:startDate>
  <input
    type="text"
    placeholder="Select date"
    bind:value={formattedStartDate}
    on:click={toggleDatePicker}
  />
</DatePicker>

<style>
  input[type="text"] {
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 8px;
  }
</style>
```

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

### Use DatePicker Component in Svelte

Source: https://github.com/svelte-plugins/datepicker/blob/main/README.md

Demonstrates how to integrate and use the DatePicker component within a Svelte application. It includes importing the component, managing date state, handling date formatting with date-fns, and displaying the date picker with a bound input field.

```svelte
<script>
  import { DatePicker } from "@svelte-plugins/datepicker";
  import { format } from 'date-fns';

  let startDate = new Date();
  let dateFormat = 'MM/dd/yy';
  let isOpen = false;

  const toggleDatePicker = () => (isOpen = !isOpen);

  const formatDate = (dateString) => {
    if (isNaN(new Date(dateString))) {
      return '';
    }

    return dateString && format(new Date(dateString), dateFormat) || '';
  };


  let formattedStartDate = formatDate(startDate);

  const onChange = () => {
    startDate = new Date(formattedStartDate);
  };

  $: formattedStartDate = formatDate(startDate);
</script>

<DatePicker bind:isOpen bind:startDate>
  <input type="text" placeholder="Select date" bind:value={formattedStartDate} on:click={toggleDatePicker} />
</DatePicker>

<style>
  input[type="text"] {
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 8px;
  }
</style>
```

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

### Datepicker Calendar Day Container Styles (CSS)

Source: https://github.com/svelte-plugins/datepicker/blob/main/README.md

Sets base styles for the container of each individual day cell in the calendar. Includes appearance, background, border, margin, padding, and positioning.

```css
/**
 * Calendar Day Container
 */
--datepicker-calendar-day-container-appearance: none;
--datepicker-calendar-day-container-background: inherit;
--datepicker-calendar-day-container-border: 0;
--datepicker-calendar-day-container-margin: 0;
--datepicker-calendar-day-container-padding: 0;
--datepicker-calendar-day-container-position: relative;
--datepicker-calendar-day-container-text-align: center;
```

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

### Datepicker Calendar Day Styles (CSS)

Source: https://github.com/svelte-plugins/datepicker/blob/main/README.md

Defines the visual appearance and interactive states for individual calendar day cells. Covers alignment, background, border, color, cursor, dimensions, font, margin, padding, and z-index.

```css
/**
 * Calendar Day
 */
--datepicker-calendar-day-align-items: center;
--datepicker-calendar-day-background-hover: #f5f5f5;
--datepicker-calendar-day-border: 1px solid transparent;
--datepicker-calendar-day-border: 1px solid transparent;
--datepicker-calendar-day-border-radius: 100%;
--datepicker-calendar-day-color: #232a32;
--datepicker-calendar-day-color-disabled: #b9bdc1;
--datepicker-calendar-day-color-hover: #232a32;
--datepicker-calendar-day-cursor: pointer;
--datepicker-calendar-day-cursor-disabled: default;
--datepicker-calendar-day-display: flex;
--datepicker-calendar-day-height: 40px;
--datepicker-calendar-day-justify-content: center;
--datepicker-calendar-day-font-family: var(--datepicker-font-family);
--datepicker-calendar-day-font-size: var(--datepicker-font-size-base);
--datepicker-calendar-day-margin-bottom: 1px;
--datepicker-calendar-day-padding: var(--datepicker-padding-base);
--datepicker-calendar-day-text-align: center;
--datepicker-calendar-day-width: 40px;
--datepicker-calendar-day-zindex-focus: 12;
```

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

### Datepicker Calendar Day of Week Styles (CSS)

Source: https://github.com/svelte-plugins/datepicker/blob/main/README.md

Styles for the display of the days of the week (Sunday, Monday, etc.) in the calendar header. Includes color, font properties, margin, and text alignment.

```css
/**
 * Calendar DOW (Days of Week)
 */
--datepicker-calendar-dow-color: #8b9198;
--datepicker-calendar-dow-font-size: var(--datepicker-font-size-base);
--datepicker-calendar-dow-font-weight: var(--datepicker-font-weight-medium);
--datepicker-calendar-dow-margin-bottom: var(--datepicker-margin-large);
--datepicker-calendar-dow-text-align: center;
```

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

### Datepicker Calendar Month Grid Styles (CSS)

Source: https://github.com/svelte-plugins/datepicker/blob/main/README.md

Defines the grid layout for the calendar month, specifying display type, column template, gap between cells, and overall width.

```css
/**
 * Calendar Month
 */
--datepicker-calendar-container-display: grid;
--datepicker-calendar-container-grid-template-columns: repeat(7, 1fr);
--datepicker-calendar-container-grid-gap: 0;
--datepicker-calendar-container-width: fit-content;
```

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

### Datepicker Timepicker Input Styles (CSS)

Source: https://github.com/svelte-plugins/datepicker/blob/main/README.md

Defines the styling for the time input field in the datepicker, including border, radius, display, font, margin, and padding.

```css
/**
 * Timepicker Input
 */
--datepicker-timepicker-input-border: 1px solid var(--datepicker-border-color);
--datepicker-timepicker-input-border-radius: var(--datepicker-border-radius-base);
--datepicker-timepicker-input-display: block;
--datepicker-timepicker-input-font-family: var(--datepicker-font-family);
--datepicker-timepicker-input-margin: 0 auto;
--datepicker-timepicker-input-padding: var(--datepicker-padding-small) var(--datepicker-padding-base);
```

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

### Datepicker Timepicker Container Styles (CSS)

Source: https://github.com/svelte-plugins/datepicker/blob/main/README.md

Configures the layout and spacing for the timepicker container within the datepicker. It uses flexbox properties to align items and distribute space.

```css
/**
 * Timepicker Container
 */
--datepicker-timepicker-container-align-items: center;
--datepicker-timepicker-container-display: flex;
--datepicker-timepicker-container-justify-content: space-around;
--datepicker-timepicker-container-margin-bottom: var(--datepicker-margin-xlarge);
```

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

### Event Callbacks for Svelte DatePicker

Source: https://context7.com/svelte-plugins/datepicker/llms.txt

Handles user interactions with the Svelte DatePicker through event callbacks. The onDateChange event provides details about selected dates and ranges. onDayClick is triggered for every day clicked, and onNavigationChange captures month/year navigation events, useful for loading associated data.

```svelte
<script>
  import { DatePicker } from '@svelte-plugins/datepicker';

  let startDate = null;
  let endDate = null;
  let isOpen = false;

  const onDateChange = (event) => {
    console.log('Date changed:', {
      startDate: event.startDate,
      endDate: event.endDate,
      rangeDates: event.rangeDates  // Array of all dates in range
    });

    // Perform action like API call
    fetchDataForDateRange(event.startDate, event.endDate);
  };

  const onDayClick = (event) => {
    console.log('Day clicked:', event);
    // Triggered on each day click, even before range is complete
  };

  const onNavigationChange = (event) => {
    console.log('Month/year navigation:', {
      direction: event.direction,      // 'next' or 'previous'
      type: event.type,                // 'month' or 'year'
      currentPeriod: event.currentPeriod,
      isPastPeriod: event.isPastPeriod
    });

    // Load data for visible month
    if (event.type === 'month') {
      loadMonthData(event.currentPeriod);
    }
  };

  function fetchDataForDateRange(start, end) {
    // Implementation
  }

  function loadMonthData(period) {
    // Implementation
  }
</script>

<DatePicker
  bind:isOpen
  bind:startDate
  bind:endDate
  isRange
  {onDateChange}
  {onDayClick}
  {onNavigationChange}
>
  <button on:click={() => isOpen = !isOpen}>
    Select Dates
  </button>
</DatePicker>
```

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

### Datepicker Presets Button Styles (CSS)

Source: https://github.com/svelte-plugins/datepicker/blob/main/README.md

Defines CSS variables for styling the active, hover, and focus states of the datepicker presets button. It also controls cursor styles, font properties, outline, margins, padding, text alignment, and z-index for focus.

```css
--datepicker-presets-button-color-active: #fff;
--datepicker-presets-button-color-hover: var(--datepicker-color);
--datepicker-presets-button-color-focus: var(--datepicker-color);

--datepicker-presets-button-cursor: pointer;
--datepicker-presets-button-cursor-active: default;

--datepicker-presets-button-font-family: var(--datepicker-font-family);
--datepicker-presets-button-font-size: var(--datepicker-font-size-base);
--datepicker-presets-button-font-weight-active: var(--datepicker-font-weight-medium);
--datepicker-presets-button-outline-focus: 5px auto -webkit-focus-ring-color;

--datepicker-presets-button-margin: var(--datepicker-margin-small) 0;
--datepicker-presets-button-padding: calc(var(--datepicker-padding-base) + 2px) var(--datepicker-padding-large);
--datepicker-presets-button-text-align: left;
--datepicker-presets-button-zindex-focus: 10;
```

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

### Datepicker Calendar Today Styles (CSS)

Source: https://github.com/svelte-plugins/datepicker/blob/main/README.md

Customizes the appearance of the current day within the calendar. It applies a distinct border and font weight to highlight today's date.

```css
/**
 * Calendar Today
 */
--datepicker-calendar-today-background: transparent;
--datepicker-calendar-today-border: 1px solid #232a32;
--datepicker-calendar-today-cursor: default;
--datepicker-calendar-today-font-weight: var(--datepicker-font-weight-bold);
```

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

### DatePicker CSS Variables for Theming

Source: https://github.com/svelte-plugins/datepicker/blob/main/README.md

This snippet lists the default CSS variables used by the Svelte DatePicker component. These variables control various aspects of the component's appearance, including colors, spacing, typography, and borders. Developers can override these variables to customize the theme.

```css
  /**
   * Common Variables
   */
  --datepicker-border-color: #e8e9ea;

  --datepicker-border-radius-small: .125rem;
  --datepicker-border-radius-base: .25rem;
  --datepicker-border-radius-large: .5rem;
  --datepicker-border-radius-xlarge: .75rem;
  --datepicker-border-radius-xxlarge: 1rem;
  --datepicker-border-radius-xxxlarge: 1.125rem;

  --datepicker-state-active: #0087ff;
  --datepicker-state-hover: #e7f7fc;

  --datepicker-color: #21333d;

  --datepicker-font-family: 'Rubik', sans-serif;

  --datepicker-font-size-jumbo: 1.75rem;
  --datepicker-font-size-xxxlarge: 1.5rem;
  --datepicker-font-size-xxlarge: 1.375rem;
  --datepicker-font-size-xlarge: 1.25rem;
  --datepicker-font-size-large: 1.125rem;
  --datepicker-font-size-base: 14px;
  --datepicker-font-size-medium: 0.89rem;
  --datepicker-font-size-small: 0.75rem;
  --datepicker-font-size-xsmall: 0.625rem;
  --datepicker-font-size-xxsmall: 0.5rem;
  --datepicker-font-size-xxxsmall: 0.375rem;
  --datepicker-font-weight-thin: 100;
  --datepicker-font-weight-light: 300;
  --datepicker-font-weight-base: 400;
  --datepicker-font-weight-medium: 500;
  --datepicker-font-weight-bold: 700;
  --datepicker-font-weight-black: 900;

  --datepicker-spacing: 8px;

  --datepicker-margin-xsmall: calc(var(--datepicker-spacing) / 4);
  --datepicker-margin-small: calc(var(--datepicker-spacing) / 2);
  --datepicker-margin-base: var(--datepicker-spacing);
  --datepicker-margin-large: calc(var(--datepicker-spacing) * 2);
  --datepicker-margin-xlarge: calc(var(--datepicker-spacing) * 3);
  --datepicker-margin-xxlarge: calc(var(--datepicker-spacing) * 4);
  --datepicker-margin-xxxlarge: calc(var(--datepicker-spacing) * 5);
  --datepicker-margin-jumbo: calc(var(--datepicker-spacing) * 6);

  --datepicker-padding-xsmall: calc(var(--datepicker-spacing) / 4);
  --datepicker-padding-small: calc(var(--datepicker-spacing) / 2);
  --datepicker-padding-base: var(--datepicker-spacing);
  --datepicker-padding-large: calc(var(--datepicker-spacing) * 2);
  --datepicker-padding-xlarge: calc(var(--datepicker-spacing) * 3);
  --datepicker-padding-xxlarge: calc(var(--datepicker-spacing) * 4);
  --datepicker-padding-xxxlarge: calc(var(--datepicker-spacing) * 5);
  --datepicker-padding-jumbo: calc(var(--datepicker-spacing) * 6);

  /**
   * Container
   */
  --datepicker-container-background: #fff;
  --datepicker-container-border: 1px solid var(--datepicker-border-color);
  --datepicker-container-border-radius: 12px;
  --datepicker-container-box-shadow: 0 1px 20px rgba(0, 0, 0, 0.1);
  --datepicker-container-font-family: var(--datepicker-font-family);
  --datepicker-container-left: 0;
  --datepicker-container-position: absolute;
  --datepicker-container-top: 105%;
  --datepicker-container-width: fit-content;
  --datepicker-container-zindex: 99;

  /**
   * Calendar
   */
  --datepicker-calendar-border: 0;
  --datepicker-calendar-padding: var(--datepicker-padding-base) var(--datepicker-padding-large) var(--datepicker-padding-xlarge);
  --datepicker-calendar-position: relative;
  --datepicker-calendar-width: 310px;

  --datepicker-calendar-split-border: 1px solid var(--datepicker-border-color);

  /**
   * Calendar Header
   */
  --datepicker-calendar-header-align-items: center;
  --datepicker-calendar-header-color: var(--datepicker-color);
  --datepicker-calendar-header-display: flex;
  --datepicker-calendar-header-font-size: var(--datepicker-font-size-large);
  --datepicker-calendar-header-justify-content: space-between;
  --datepicker-calendar-header-margin: 0 0 var(--datepicker-margin-xlarge) 0;
  --datepicker-calendar-header-padding: var(--datepicker-padding-large) var(--datepicker-padding-base);
  --datepicker-calendar-header-user-select: none;

  /**
   * Calendar Header Month Navigation
   */
  --datepicker-calendar-header-month-nav-background: transparent;
  --datepicker-calendar-header-month-nav-background-hover: #f5f5f5;
  --datepicker-calendar-header-month-nav-border: 0;
  --datepicker-calendar-header-month-nav-cursor: pointer;
  --datepicker-calendar-header-month-nav-border-radius: 20px;
  --datepicker-calendar-header-month-nav-color: var(--datepicker-color);
  --datepicker-calendar-header-month-nav-cursor: pointer;
  --datepicker-calendar-header-month-nav-font-size: var(--datepicker-font-size-large);
  --datepicker-calendar-header-month-nav-height: 32px;
  --datepicker-calendar-header-month-nav-margin-left: -8px;
  --datepicker-calendar-header-month-nav-padding: var(--datepicker-padding-small);
  --datepicker-calendar-header-month-nav-text-align: center;
  --datepicker-calendar-header-month-nav-width: 32px;

```

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

### Time Picker Integration with Svelte DatePicker

Source: https://context7.com/svelte-plugins/datepicker/llms.txt

Integrates a time picker into the Svelte DatePicker component, allowing users to select both date and time. It binds to startDate, startDateTime, endDate, and endDateTime variables and uses the showTimePicker prop. The onDateChange callback provides the selected date and time.

```svelte
<script>
  import { DatePicker } from '@svelte-plugins/datepicker';

  let startDate = new Date();
  let startDateTime = '09:00';
  let endDate = null;
  let endDateTime = '17:00';
  let isOpen = false;

  const onDateChange = (event) => {
    console.log('Selected date with time:', {
      date: event.startDate,
      time: event.startDateTime
    });

    if (event.endDate) {
      console.log('End date with time:', {
        date: event.endDate,
        time: event.endDateTime
      });
    }
  };
</script>

<DatePicker
  bind:isOpen
  bind:startDate
  bind:startDateTime
  bind:endDate
  bind:endDateTime
  isRange
  showTimePicker
  {onDateChange}
>
  <button on:click={() => isOpen = !isOpen}>
    Select Date & Time
  </button>
</DatePicker>
```

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

### Datepicker Calendar Range Styles (CSS)

Source: https://github.com/svelte-plugins/datepicker/blob/main/README.md

Defines the styling for date ranges selected within the calendar. It controls the background color, border, text color, cursor, and font weight for the range.

```css
/**
 * Calendar Range
 */
--datepicker-calendar-range-background: var(--datepicker-state-hover);
--datepicker-calendar-range-background-disabled: var(--datepicker-state-hover);
--datepicker-calendar-range-border: 0;
--datepicker-calendar-range-border-radius: 0;
--datepicker-calendar-range-color: var(--datepicker-color);
--datepicker-calendar-range-color-disabled: #ffc0b7;
--datepicker-calendar-range-cursor: default;
--datepicker-calendar-range-font-weight: var(--datepicker-font-weight-base);
```

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

### Svelte Datepicker CSS Variables for Range Styling

Source: https://github.com/svelte-plugins/datepicker/blob/main/README.md

Defines CSS variables for styling various aspects of the datepicker's range selection, including selected backgrounds, borders, and text colors. These variables can be overridden to achieve custom range appearances.

```css
--datepicker-calendar-range-end-box-shadow: inset 20px 0 0 var(--datepicker-state-hover);
--datepicker-calendar-range-start-box-shadow-selected: inset -20px 0 0 #eceff1;
--datepicker-calendar-range-end-box-shadow-selected: inset 20px 0 0 #eceff1;

--datepicker-calendar-range-start-end-background: #f5f5f5;
--datepicker-calendar-range-start-end-color: #232a32;

/**
 * Calendar Range Selected
 */
--datepicker-calendar-range-selected-background: var(--datepicker-state-active);
--datepicker-calendar-range-selected-border-radius: 20px;
--datepicker-calendar-range-selected-color: #fff;
--datepicker-calendar-range-selected-font-weight: var(--datepicker-font-weight-medium);

--datepicker-calendar-range-selected-start-border-radius: 20px;

/**
 * Calendar Range Hover
 */
--datepicker-calendar-range-included-background: #eceff1;
--datepicker-calendar-range-included-box-shadow: inset 20px 0 0 #eceff1;
--datepicker-calendar-range-included-color: #232a32;
--datepicker-calendar-range-included-font-weight: var(--datepicker-font-weight-base);
--datepicker-calendar-range-included-height: var(--datepicker-calendar-day-height);
```

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

### Datepicker Calendar Day Other Month Styles (CSS)

Source: https://github.com/svelte-plugins/datepicker/blob/main/README.md

Styles for calendar days that fall outside the currently displayed month. These are typically visually distinct to indicate they are not part of the primary month view.

```css
/**
 * Calendar Days Outside of Month
 */
--datepicker-calendar-day-other-border: 0;
--datepicker-calendar-day-other-box-shadow: none;
--datepicker-calendar-day-other-color: #d1d3d6;
```

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

### Date Restrictions in Svelte DatePicker

Source: https://context7.com/svelte-plugins/datepicker/llms.txt

Demonstrates how to restrict date selection in the Svelte DatePicker. This can be achieved by providing arrays of disabledDates, enabledDates, or disabledRanges. The component also allows controlling future and past date availability with enableFutureDates and enablePastDates props.

```svelte
<script>
  import { DatePicker } from '@svelte-plugins/datepicker';

  let startDate = null;
  let isOpen = false;

  // Disable specific dates
  let disabledDates = [
    '12/25/2024',
    '01/01/2025',
    '07/04/2025'
  ];

  // Or enable only specific dates
  let enabledDates = [
    '01/15/2025',
    '02/20/2025',
    '03/10/2025'
  ];

  // Use date range format with colon
  let disabledRanges = [
    '12/20/2024:12/31/2024'  // Disable entire range
  ];

  const onDateChange = (event) => {
    console.log('Valid date selected:', event.startDate);
  };
</script>

<DatePicker
  bind:isOpen
  bind:startDate
  {disabledDates}
  enableFutureDates={true}
  enablePastDates={false}
  {onDateChange}
>
  <input type="text" on:click={() => isOpen = true} />
</DatePicker>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.