### Svelte Date Picker with Custom Theme and Date Range

Source: https://svelte-plugins.github.io/datepicker/index

This Svelte component demonstrates the use of the '@svelte-plugins/datepicker' library for selecting date ranges. It includes logic for managing start and end dates, formatting them, and applying a custom theme. Dependencies include 'date-fns' for date formatting.

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

  const today = new Date();

  const MILLISECONDS_IN_DAY = 24 * 60 * 60 * 1000;

  const getDateFromToday = (days) => {
    return Date.now() - days * MILLISECONDS_IN_DAY;
  };

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

  let formattedStartDate = '';

  const onClearDates = () => {
    startDate = '';
    endDate = '';
  };

  const toggleDatePicker = () => (isOpen = !isOpen);
  const formatDate = (dateString) => dateString && format(new Date(dateString), dateFormat) || '';

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

<div class="date-filter">
  <DatePicker theme="custom-datepicker" bind:isOpen bind:startDate isRange isMultipane showPresets>
    <div class="date-field" on:click={toggleDatePicker} class:open={isOpen}>
      <i class="icon-calendar" />
      <div class="date">
        {#if startDate}
          {formattedStartDate} - {formattedEndDate}
        {:else}
          Pick a date
        {/if}
      </div>
      {#if startDate}
        <span on:click={onClearDates}>
          <i class="os-icon-x" />
        </span>
      {/if}
    </div>
  </DatePicker>
</div>

<style>
  .date-field {
    align-items: center;
    background-color: #fff;
    border-bottom: 1px solid #e8e9ea;
    display: inline-flex;
    gap: 8px;
    min-width: 100px;
    padding: 16px;
  }

  .date-field.open {
    border-bottom: 1px solid #0087ff;
  }

  .date-field .icon-calendar {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEmSURBVHgB7ZcPzcIwEMUfXz4BSCgKwAGgACRMAg6YBBxsOMABOAAHFAXgAK5Z2Y6lHbfQ8SfpL3lZaY/1rb01N+BHUKSMNBfEJjZWISA56Uo6C2KvVpkgFn9oRx9vICFtUT1JKO3tvRtZdjBxXQs+YY+1FenIfuesPUGVVLzfRWKvmrSzbbN19wS+kAb2+sCEuUxrYzkbe4YvCVM2Vr5NPAkVa+van7Wn38U95uTpN5TJ/A8ZKemAakmbmJJGpI0gVmwA0huieFItjG19DgTHtwIZhCfZq3ztCuzQYh+FKBSvusjAGs8PnLYkLgMf34JoIBqIBqKBaIAb0Kw9RlhMCTbzzPWAqYq7LsuPaGDUsYmznaOk5zChUJTNQ4TFVMkrOL4HPsoNn26PxROHCggAAAAASUVORK5CYII=) no-repeat center center;
    background-size: 14px 14px;
    height: 14px;
    width: 14px;
  }

  :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>
```

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

### Svelte DatePicker with Presets Only

Source: https://svelte-plugins.github.io/datepicker/index

This example demonstrates how to use the Svelte DatePicker component with only the preset date ranges enabled. It allows users to select a date range and displays the formatted selected dates. Dependencies include '@svelte-plugins/datepicker' and 'date-fns' for date formatting. The component takes 'startDate', 'endDate', and 'isOpen' as bound properties and 'showPresetsOnly' as a configuration prop.

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

const today = new Date();

const MILLISECONDS_IN_DAY = 24 * 60 * 60 * 1000;

const getDateFromToday = (days) => {
  return Date.now() - days * MILLISECONDS_IN_DAY;
};

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

let formattedStartDate = '';

const onClearDates = () => {
  startDate = '';
  endDate = '';
};

const onDateChange = (args) => {
  console.log(args, 'onDateChange');
};

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

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

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

$: formattedStartDate = formatDate(startDate);
$: formattedEndDate = formatDate(endDate);
```

```html
<div class="date-filter">
  <DatePicker bind:isOpen bind:startDate bind:endDate isRange showPresets showPresetsOnly {onDateChange}>
    <div class="date-field" on:click={toggleDatePicker} class:open={isOpen}>
      <i class="icon-calendar" />
      <div class="date">
        {#if startDate}
          {formattedStartDate} - {formattedEndDate}
        {:else}
          Pick a date
        {/if}
      </div>
      {#if startDate}
        <span on:click={onClearDates}>
          <i class="os-icon-x" />
        </span>
      {/if}
    </div>
  </DatePicker>
</div>

<style>
  .date-field {
    align-items: center;
    background-color: #fff;
    border-bottom: 1px solid #e8e9ea;
    display: inline-flex;
    gap: 8px;
    min-width: 100px;
    padding: 16px;
  }

  .date-field.open {
    border-bottom: 1px solid #0087ff;
  }

  .date-field .icon-calendar {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEmSURBVHgB7ZcPzcIwEMUfXz4BSCgKwAGgACRMAg6YBBxsOMABOAAHFAXgAK5Z2Y6lHbfQ8SfpL3lZaY/1rb01N+BHUKSMNBfEJjZWISA56Uo6C2KvVpkgFn9oRx9vICFtUT1JKO3tvRtZdjBxXQs+YY+1FenIfuesPUGVVLzfRWKvmrSzbbN19wS+kAb2+sCEuUxrYzkbe4YvCVM2Vr5NPAkVa+van7Wn38U95uTpN5TJ/A8ZKemAakmbmJJGpI0gVmwA0huieFItjG19DgTHtwIZhCfZq3ztCuzQYh+FKBSvusjAGs8PnLYkLgMf34JoIBqIBqKBaIAb0Kw9RlhMCTbzzPWAqYq7LsuPaGDUsYmznaOk5zChUJTNQ4TFVMkrOL4HPsoNn26PxROHCggAAAAASUVORK5CYII=) no-repeat center center;
    background-size: 14px 14px;
    height: 14px;
    width: 14px;
  }
</style>
```

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

### Date Range Picker with Svelte

Source: https://svelte-plugins.github.io/datepicker/index

Implements a date range picker using the Svelte DatePicker component. It allows users to select a start and end date, displayed as a formatted string. It depends on '@svelte-plugins/datepicker' and 'date-fns'. The component takes two Date objects (startDate, endDate) and outputs formatted date strings.

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

  const today = new Date();

  const MILLISECONDS_IN_DAY = 24 * 60 * 60 * 1000;

  const getDateFromToday = (days) => {
    return Date.now() - days * MILLISECONDS_IN_DAY;
  };

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

  let formattedStartDate = '';

  const onClearDates = () => {
    startDate = '';
    endDate = '';
  };

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

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

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

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

<div class="date-filter">
  <DatePicker bind:isOpen bind:startDate bind:endDate isRange>
    <div class="date-field" on:click={toggleDatePicker} class:open={isOpen}>
      <i class="icon-calendar" />
      <div class="date">
        {#if startDate}
          {formattedStartDate} - {formattedEndDate}
        {:else}
          Pick a date
        {/if}
      </div>
      {#if startDate}
        <span on:click={onClearDates}>
          <i class="os-icon-x" />
        </span>
      {/if}
    </div>
  </DatePicker>
</div>

<style>
  .date-field {
    align-items: center;
    background-color: #fff;
    border-bottom: 1px solid #e8e9ea;
    display: inline-flex;
    gap: 8px;
    min-width: 100px;
    padding: 16px;
  }

  .date-field.open {
    border-bottom: 1px solid #0087ff;
  }

  .date-field .icon-calendar {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEmSURBVHgB7ZcPzcIwEMUfXz4BSCgKwAGgACRMAg6YBBxsOMABOAAHFAXgAK5Z2Y6lHbfQ8SfpL3lZaY/1rb01N+BHUKSMNBfEJjZWISA56Uo6C2KvVpkgFn9oRx9vICFtUT1JKO3tvRtZdjBxXQs+YY+1FenIfuesPUGVVLzfRWKvmrSzbbN19wS+kAb2+sCEuUxrYzkbe4YvCVM2Vr5NPAkVa+van7Wn38U95uTpN5TJ/A8ZKemAakmbmJJGpI0gVmwA0huieFItjG19DgTHtwIZhCfZq3ztCuzQYh+FKBSvusjAGs8PnLYkLgMf34JoIBqIBqKBaIAb0Kw9RlhMCTbzzPWAqYq7LsuPaGDUsYmznaOk5zChUJTNQ4TFVMkrOL4HPsoNn26PxROHCggAAAAASUVORK5CYII=) no-repeat center center;
    background-size: 14px 14px;
    height: 14px;
    width: 14px;
  }
</style>
```

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

### Svelte DatePicker Component with Multipane Range Selection

Source: https://svelte-plugins.github.io/datepicker/index

This Svelte component utilizes the `@svelte-plugins/datepicker` library to create a date range picker. It displays dates in a multipane view, allowing users to select a start and end date. The component includes logic for date formatting, clearing the selection, and managing the picker's open state. It depends on the `date-fns` library for formatting.

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

  const today = new Date();

  const MILLISECONDS_IN_DAY = 24 * 60 * 60 * 1000;

  const getDateFromToday = (days) => {
    return Date.now() - days * MILLISECONDS_IN_DAY;
  };

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

  let formattedStartDate = '';

  const onClearDates = () => {
    startDate = '';
    endDate = '';
  };

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

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

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

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

<div class="date-filter">
  <DatePicker bind:isOpen bind:startDate bind:endDate isRange isMultipane>
    <div class="date-field" on:click={toggleDatePicker} class:open={isOpen}>
      <i class="icon-calendar" />
      <div class="date">
        {#if startDate}
          {formattedStartDate} - {formattedEndDate}
        {:else}
          Pick a date
        {/if}
      </div>
      {#if startDate}
        <span on:click={onClearDates}>
          <i class="os-icon-x" />
        </span>
      {/if}
    </div>
  </DatePicker>
</div>

<style>
  .date-field {
    align-items: center;
    background-color: #fff;
    border-bottom: 1px solid #e8e9ea;
    display: inline-flex;
    gap: 8px;
    min-width: 100px;
    padding: 16px;
  }

  .date-field.open {
    border-bottom: 1px solid #0087ff;
  }

  .date-field .icon-calendar {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEmSURBVHgB7ZcPzcIwEMUfXz4BSCgKwAGgACRMAg6YBBxsOMABOAAHFAXgAK5Z2Y6lHbfQ8SfpL3lZaY/1rb01N+BHUKSMNBfEJjZWISA56Uo6C2KvVpkgFn9oRx9vICFtUT1JKO3tvRtZdjBxXQs+YY+1FenIfuesPUGVVLzfRWKvmrSzbbN19wS+kAb2+sCEuUxrYzkbe4YvCVM2Vr5NPAkVa+van7Wn38U95uTpN5TJ/A8ZKemAakmbmJJGpI0gVmwA0huieFItjG19DgTHtwIZhCfZq3ztCuzQYh+FKBSvusjAGs8PnLYkLgMf34JoIBqIBqKBaIAb0Kw9RlhMCTbzzPWAqYq7LsuPaGDUsYmznaOk5zChUJTNQ4TFVMkrOL4HPsoNn26PxROHCggAAAAASUVORK5CYII=) no-repeat center center;
    background-size: 14px 14px;
    height: 14px;
    width: 14px;
  }
</style>
```

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

### Svelte DatePicker with Time Picker Enabled

Source: https://svelte-plugins.github.io/datepicker/index

This example shows how to configure the Svelte DatePicker component to include a time picker. It allows users to select both date and time, displaying the formatted result in an input field. The 'showTimePicker' prop is enabled, and the component binds to 'isOpen' and 'startDate'. 'date-fns' is used for formatting.

```javascript
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);
```

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

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

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

### Svelte DatePicker with Past Dates Disabled

Source: https://svelte-plugins.github.io/datepicker/index

This example demonstrates disabling the selection of past dates in the Svelte DatePicker component. The 'enablePastDates' prop is set to false, ensuring users can only select dates from today onwards. It utilizes 'date-fns' for date formatting and binds to 'isOpen' and 'startDate'.

```javascript
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);
```

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

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

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

### Svelte DatePicker: Enable Specific Dates

Source: https://svelte-plugins.github.io/datepicker/index

This example shows how to restrict date selection in the Svelte DatePicker to only a predefined set of dates or ranges. The 'enabledDates' prop takes an array of valid date strings or ranges. This configuration is useful for applications with specific operational dates, like booking systems.

```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 enabledDates={["1/14/23:3/16/24"]} enableFutureDates>
  <input type="text" placeholder="Select date" bind:value={formattedStartDate} on:click={toggleDatePicker} />
</DatePicker>

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

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

### Svelte DatePicker with Default Presets

Source: https://svelte-plugins.github.io/datepicker/index

Demonstrates the basic implementation of the Svelte DatePicker component with the 'showPresets' option enabled. It includes event handlers for date selection and clearing, as well as formatting logic. Dependencies include '@svelte-plugins/datepicker' and 'date-fns'.

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

  const today = new Date();

  const MILLISECONDS_IN_DAY = 24 * 60 * 60 * 1000;

  const getDateFromToday = (days) => {
    return Date.now() - days * MILLISECONDS_IN_DAY;
  };

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

  let formattedStartDate = '';

  const onClearDates = () => {
    startDate = '';
    endDate = '';
  };

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

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

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

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

<div class="date-filter">
  <DatePicker bind:isOpen bind:startDate bind:endDate isRange showPresets>
    <div class="date-field" on:click={toggleDatePicker} class:open={isOpen}>
      <i class="icon-calendar" />
      <div class="date">
        {#if startDate}
          {formattedStartDate} - {formattedEndDate}
        {:else}
          Pick a date
        {/if}
      </div>
      {#if startDate}
        <span on:click={onClearDates}>
          <i class="os-icon-x" />
        </span>
      {/if}
    </div>
  </DatePicker>
</div>

<style>
  .date-field {
    align-items: center;
    background-color: #fff;
    border-bottom: 1px solid #e8e9ea;
    display: inline-flex;
    gap: 8px;
    min-width: 100px;
    padding: 16px;
  }

  .date-field.open {
    border-bottom: 1px solid #0087ff;
  }

  .date-field .icon-calendar {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEmSURBVHgB7ZcPzcIwEMUfXz4BSCgKwAGgACRMAg6YBBxsOMABOAAHFAXgAK5Z2Y6lHbfQ8SfpL3lZaY/1rb01N+BHUKSMNBfEJjZWISA56Uo6C2KvVpkgFn9oRx9vICFtUT1JKO3tvRtZdjBxXQs+YY+1FenIfuesPUGVVLzfRWKvmrSzbbN19wS+kAb2+sCEuUxrYzkbe4YvCVM2Vr5NPAkVa+van7Wn38U95uTpN5TJ/A8ZKemAakmbmJJGpI0gVmwA0huieFItjG19DgTHtwIZhCfZq3ztCuzQYh+FKBSvusjAGs8PnLYkLgMf34JoIBqIBqKBaIAb0Kw9RlhMCTbzzPWAqYq7LsuPaGDUsYmznaOk5zChUJTNQ4TFVMkrOL4HPsoNn26PxROHCggAAAAASUVORK5CYII=) no-repeat center center;
    background-size: 14px 14px;
    height: 14px;
    width: 14px;
  }
</style>
```

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

### Single Date Picker with Svelte

Source: https://svelte-plugins.github.io/datepicker/index

Implements a single date picker using the Svelte DatePicker component. It allows users to select a date, which is then displayed in a formatted string. Dependencies include '@svelte-plugins/datepicker' and 'date-fns'. It takes a Date object as input and outputs a formatted date string.

```html
<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 #e8e9ea;
    border-radius: 4px;
    padding: 8px;
  }
</style>
```

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

### DatePicker Component API

Source: https://svelte-plugins.github.io/datepicker/index

The DatePicker component from @svelte-plugins/datepicker allows users to select dates or date ranges. It offers a wide range of props to customize its appearance, behavior, and functionality, including date validation, preset ranges, and navigation controls.

```APIDOC
## DatePicker Component API

### Description
The `DatePicker` component provides a user-friendly interface for selecting single dates or date ranges. It is highly customizable through its props, allowing for various configurations such as date restrictions, time selection, and alignment.

### Method
N/A (Component API)

### Endpoint
N/A (Component API)

### Props
#### Date and Time Selection
- **startDate** (`object`) - The start date as a `string` or `Date` object. Default: `null`
- **endDate** (`object`) - The end date as a `string` or `Date` object. Default: `null`
- **startDateTime** (`string`) - The start date time in 24-hour format. Default: `00:00`
- **endDateTime** (`string`) - The end date time in 24-hour format. Default: `00:00`
- **defaultYear** (`number`) - The default year to display. Default: `2025`
- **defaultMonth** (`number`) - The default month to display (0-11). Default: `10` (November)
- **enableFutureDates** (`boolean`) - Allows selection of future dates. Default: `false`
- **enablePastDates** (`boolean`) - Prevents selection of dates prior to today. Default: `true`

#### Range and Appearance
- **isRange** (`boolean`) - Enables date range selection mode. Default: `false`
- **isMultipane** (`boolean`) - Displays two months side-by-side. Default: `false`
- **isOpen** (`boolean`) - Controls the visibility of the picker. Default: `false`
- **showPresets** (`boolean`) - Displays preset date range options. Default: `false`
- **showPresetsOnly** (`boolean`) - Displays only preset date range options (requires `isRange` and `showPresets`). Default: `false`
- **showYearControls** (`boolean`) - Hides the year navigation controls. Default: `false`
- **showTimePicker** (`boolean`) - Displays the time selection interface. Default: `false`
- **align** (`string`) - Horizontal alignment of the picker ('left' or 'right'). Default: `left`
- **theme** (`string`) - Assigns a theme via a data attribute `datepicker.[data-picker-theme="theme_value_here"]`. Default: `''`

#### Localization and Customization
- **dowLabels** (`array`) - Array of strings for day of the week labels (e.g., `['Su', 'Mo', ...]`). Default: `['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']`
- **monthLabels** (`array`) - Array of strings for month labels (e.g., `['January', 'February', ...]`). Default: `['January', ..., 'December']`
- **presetLabels** (`array`) - Array of strings for default preset range labels. Default: `['Today', 'Last 7 Days', ...]`
- **presetRanges** (`array`) - Array of objects for custom preset configurations with `label`, `start`, and `end` properties.
- **includeFont** (`boolean`) - Includes the default 'Rubik' font. Default: `true`

#### Date Restrictions
- **disabledDates** (`array`) - Array of dates or date ranges to disable (format: 'MM/DD/YYYY' or 'MM/DD/YYYY:MM/DD/YYYY'). Example: `['1/1/2023', '1/5/2023:1/10/2023']`
- **enabledDates** (`array`) - Array of dates or date ranges to enable (format: 'MM/DD/YYYY' or 'MM/DD/YYYY:MM/DD/YYYY'). Example: `['1/15/2023', '2/1/2023:2/15/2023']`

### Events
#### Callback Functions
- **onDateChange** (`function`) - Triggered when the selected date(s) change.
- **onDayClick** (`function`) - Triggered when a specific day is clicked.
- **onNavigationChange** (`function`) - Triggered when the user navigates between months or years.

### Request Example
```html
<script>
  import DatePicker from '@svelte-plugins/datepicker';

  let selectedDate = null;
</script>

<DatePicker bind:value={selectedDate} />
```

### Response
N/A (Component API)

### Response Example
N/A (Component API)

```

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

### Svelte DatePicker: Enable Future Dates

Source: https://svelte-plugins.github.io/datepicker/index

This Svelte component utilizes the '@svelte-plugins/datepicker' library to display a date picker. It allows users to select future dates by setting the 'enableFutureDates' prop. The component integrates with 'date-fns' for date formatting, and the selected date is displayed in an 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 enableFutureDates>
  <input type="text" placeholder="Select date" bind:value={formattedStartDate} on:click={toggleDatePicker} />
</DatePicker>

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

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

### Svelte DatePicker Custom Preset Ranges

Source: https://svelte-plugins.github.io/datepicker/index

Shows how to define and pass a custom array of preset date ranges to the Svelte DatePicker component. This allows for flexible predefined selection options beyond the defaults. It requires the 'getDateFromToday' helper function.

```svelte
let presetRanges = [
  {
    label: 'Last Week',
    start: getDateFromToday(6),
    end: getDateFromToday(0)
  },
  {
    label: '12 days ago',
    start: getDateFromToday(11),
    end: getDateFromToday(0)
  },
  {
    label: '43 days ago',
    start: getDateFromToday(42),
    end: getDateFromToday(0)
  }
];

... 

<DatePicker ... {presetRanges}></DatePicker>
```

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

### Svelte DatePicker: Disable Specific Dates

Source: https://svelte-plugins.github.io/datepicker/index

This Svelte code snippet demonstrates how to disable specific dates and date ranges within the '@svelte-plugins/datepicker' component. The 'disabledDates' prop accepts an array of date strings or ranges to prevent user selection. It also includes the 'enableFutureDates' prop for general future date availability.

```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 disabledDates={["11/25/23:11/29/23","12/10/23","12/14/23:12/31/23","1/7/24:1/14/24"]} enableFutureDates>
  <input type="text" placeholder="Select date" bind:value={formattedStartDate} on:click={toggleDatePicker} />
</DatePicker>

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

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