FlexiDatepicker

https://flexidatepicker.vercel.app/
Admin
FlexiDatepicker is a free, open-source, and developer-friendly JavaScript date picker that offers...
Tokens:7,320
Snippets:65
Trust Score:7.8
Update:3 months ago
Show doc for...
Tokens:
Raw
### Install FlexiDatepicker

Source: https://flexidatepicker.vercel.app/framework/svelte

Install the package using your preferred package manager.

```bash
npm install flexidatepicker
```

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

### Install FlexiDatepicker via Package Manager

Source: https://flexidatepicker.vercel.app/

Use npm or yarn to add the library to projects using bundlers like Vite or Next.js.

```bash
npm install flexidatepicker
```

```bash
yarn add flexidatepicker
```

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

### Integrate with Composition API

Source: https://flexidatepicker.vercel.app/framework/vue

Modern implementation for Vue 3 using script setup, utilizing ref for DOM access and lifecycle hooks for initialization.

```vue
<template>
  <input ref="dateInput" type="text" readonly placeholder="Select date" />
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import FlexiDatepicker from 'flexidatepicker';
import 'flexidatepicker/dist/flexidatepicker.min.css';

const dateInput = ref(null);
let picker = null;

const emit = defineEmits(['change']);

onMounted(() => {
  if (dateInput.value) {
    picker = new FlexiDatepicker(dateInput.value, {
      mode: 'range',
      dateFormat: 'MMM d, yyyy',
      dualCalendar: true,
      onSelectionChange: (data) => {
        emit('change', data);
      }
    });
  }
});

onBeforeUnmount(() => {
  picker = null;
});
</script>
```

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

### SvelteKit SSR Initialization Note

Source: https://flexidatepicker.vercel.app/framework/svelte

Ensure the library only executes on the client side.

```javascript
// SvelteKit SSR
// Ensure FlexiDatepicker only runs on the client
// by using onMount or dynamically importing it inside onMount.
```

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

### Import Global CSS

Source: https://flexidatepicker.vercel.app/framework/nextjs

Include the required CSS file in your global styles file.

```css
/* app/globals.css */
@import 'flexidatepicker/dist/flexidatepicker.min.css';

/* Your other global styles */
```

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

### Integrate with Options API

Source: https://flexidatepicker.vercel.app/framework/vue

Standard implementation for Vue 2 or 3 using the Options API, ensuring proper cleanup in the beforeUnmount hook.

```vue
<template>
  <input ref="dateInput" type="text" readonly placeholder="Select date" />
</template>

<script>
import FlexiDatepicker from 'flexidatepicker';
import 'flexidatepicker/dist/flexidatepicker.min.css';

export default {
  mounted() {
    this.picker = new FlexiDatepicker(this.$refs.dateInput, {
      mode: 'range',
      dateFormat: 'MMM d, yyyy',
      onSelectionChange: (data) => {
        this.$emit('change', data);
      }
    });
  },
  beforeUnmount() {
    this.picker = null;
  }
}
</script>
```

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

### new FlexiDatepicker(selector, options)

Source: https://flexidatepicker.vercel.app/

Initializes a new FlexiDatepicker instance on a given DOM element with the specified configuration options.

```APIDOC
## new FlexiDatepicker(selector, options)

### Description
Initializes the datepicker on the target element. The options object allows customization of selection behavior, localization, and date constraints.

### Parameters
- **selector** (string) - Required - CSS selector for the target input element.
- **options** (object) - Optional - Configuration object.

#### Options
- **mode** (string) - Optional - Selection mode: 'single', 'multiple', 'range', or 'multi-range'. Default: 'multi-range'.
- **locale** (string) - Optional - BCP 47 locale string. Default: 'en-US'.
- **dateFormat** (string) - Optional - Date display format tokens (e.g., 'yyyy-MM-dd'). Default: 'MMM d, yyyy'.
- **disabledDates** (Array) - Optional - List of specific dates or range objects to disable. Default: [].
- **minDate** (string) - Optional - Minimum selectable date (YYYY-MM-DD). Default: null.
- **maxDate** (string) - Optional - Maximum selectable date (YYYY-MM-DD). Default: null.
- **disablePast** (boolean) - Optional - If true, disables all past dates. Default: false.
- **disableFuture** (boolean) - Optional - If true, disables all future dates. Default: false.
- **showClearAll** (boolean) - Optional - Show clear all button. Default: false.
- **showSelectWeekdays** (boolean) - Optional - Show select weekdays button. Default: false.
- **showSelectWeekends** (boolean) - Optional - Show select weekends button. Default: false.
- **showSelectAllDays** (boolean) - Optional - Show select all days button. Default: false.

### Example
```javascript
new FlexiDatepicker('#datepicker', {
  mode: 'range',
  locale: 'en-US',
  dateFormat: 'yyyy-MM-dd',
  minDate: '2024-01-01'
});
```
```

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

### Implement Basic DatePicker Component

Source: https://flexidatepicker.vercel.app/framework/angular

A minimal implementation using AfterViewInit and OnDestroy to manage the picker lifecycle.

```typescript
import { Component, ElementRef, ViewChild, AfterViewInit, OnDestroy } from '@angular/core';
import FlexiDatepicker from 'flexidatepicker';
import 'flexidatepicker/dist/flexidatepicker.min.css';

@Component({
  selector: 'app-date-picker',
  template: '<input #dateInput type="text" readonly placeholder="Select date" />'
})
export class DatePickerComponent implements AfterViewInit, OnDestroy {
  @ViewChild('dateInput') dateInput!: ElementRef<HTMLInputElement>;
  private picker: FlexiDatepicker | null = null;

  ngAfterViewInit() {
    this.picker = new FlexiDatepicker(this.dateInput.nativeElement, {
      mode: 'range',
      dateFormat: 'MMM d, yyyy',
      onSelectionChange: (data) => {
        console.log('Selected:', data);
      }
    });
  }

  ngOnDestroy() {
    this.picker = null;
  }
}
```

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

### new FlexiDatepicker(selector, options)

Source: https://flexidatepicker.vercel.app/

Initializes a new instance of the FlexiDatepicker on a specified DOM element with custom configuration options.

```APIDOC
## new FlexiDatepicker(selector, options)

### Description
Initializes the datepicker component on the target element defined by the selector.

### Parameters
- **selector** (string) - Required - The CSS selector for the target element.
- **options** (object) - Required - Configuration object for the datepicker.

### Options
- **mode** (string) - Optional - Selection mode: 'single', 'multiple', 'range', or 'multi-range'.
- **locale** (string) - Optional - Locale string for internationalization.
- **dateFormat** (string) - Optional - Format string for date display.
- **disablePast** (boolean) - Optional - If true, disables past dates.
- **minDate** (string) - Optional - Minimum selectable date.
- **maxDate** (string) - Optional - Maximum selectable date.
- **disabledDates** (array) - Optional - List of specific dates or ranges to disable.
- **showClearAll** (boolean) - Optional - Toggles the clear all button.
- **showSelectWeekdays** (boolean) - Optional - Toggles quick weekday selection.
- **showSelectWeekends** (boolean) - Optional - Toggles quick weekend selection.
- **dualCalendar** (boolean) - Optional - Enables dual calendar view.
- **onSelectionChange** (function) - Optional - Callback function triggered when selection changes.
```

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

### Import Global CSS in SvelteKit

Source: https://flexidatepicker.vercel.app/framework/svelte

Import the required CSS file in your root layout to ensure styles are applied globally.

```svelte
<!-- src/routes/+layout.svelte -->
<script>
  import 'flexidatepicker/dist/flexidatepicker.min.css';
</script>

<slot />
```

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

### Include FlexiDatepicker via CDN

Source: https://flexidatepicker.vercel.app/

Add the library CSS and JS files to your HTML document to use the date picker without a build process.

```html
<!-- Include CSS from CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/leoanangmh/flexidatepicker@1.1.5/dist/flexidatepicker.min.css">
```

```html
<!-- Include JS from CDN -->
<script src="https://cdn.jsdelivr.net/gh/leoanangmh/flexidatepicker@1.1.5/dist/flexidatepicker.umd.min.js"></script>
```

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

### Initialize FlexiDatepicker in Svelte Component

Source: https://flexidatepicker.vercel.app/framework/svelte

Use onMount to initialize the datepicker instance and bind:this to attach the input element.

```svelte
<script>
  import { onMount } from 'svelte';
  import 'flexidatepicker/dist/flexidatepicker.min.css';
  import FlexiDatepicker from 'flexidatepicker';

  let inputEl;
  let picker;

  onMount(() => {
    picker = new FlexiDatepicker(inputEl, {
      mode: 'range',
      dualCalendar: true,
      dateFormat: 'MMM d, yyyy'
    });
  });
</script>

<input bind:this={inputEl} type="text" readonly placeholder="Select dates" />
```

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

### Configure Control Buttons

Source: https://flexidatepicker.vercel.app/

Toggle visibility of quick selection buttons for modes that support multiple date selections.

```javascript
// Show all control buttons
new FlexiDatepicker('#all-buttons', {
  mode: 'multi-range',
  showClearAll: true,
  showSelectWeekdays: true,
  showSelectWeekends: true,
  showSelectAllDays: true
});

// Minimal configuration - no buttons
new FlexiDatepicker('#no-buttons', {
  mode: 'range',
  showClearAll: false,
  showSelectWeekdays: false,
  showSelectWeekends: false,
  showSelectAllDays: false
});

// Custom button combination
new FlexiDatepicker('#custom-buttons', {
  mode: 'multiple',
  showClearAll: true,
  showSelectWeekdays: true,
  showSelectWeekends: false,
  showSelectAllDays: false
});
```

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

### Initialize FlexiDatepicker with Advanced Options

Source: https://flexidatepicker.vercel.app/

Configures the datepicker with range mode, specific date restrictions, and a selection change callback.

```javascript
new FlexiDatepicker('#datepicker', {
  mode: 'range',
  locale: 'en-US',
  dateFormat: 'yyyy-MM-dd',
  disablePast: true,
  minDate: '2024-01-01',
  maxDate: '2024-12-31',
  disabledDates: ['2024-03-15', '2024-03-20'],
  showClearAll: true,
  showSelectWeekdays: true,
  showSelectWeekends: true,
  dualCalendar: true,
  onSelectionChange: (data) => {
    console.log(data.ranges, data.dates);
  }
});
```

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

### Implement Server and Client Component Pattern

Source: https://flexidatepicker.vercel.app/framework/nextjs

Separate the page structure in a Server Component while encapsulating the datepicker logic in a Client Component.

```typescript
// Server Component (page.tsx)
import DatePickerClient from '@/components/DatePickerClient';

export default function Page() {
  return (
    <div>
      <h1>My Page</h1>
      <DatePickerClient />
    </div>
  );
}

// Client Component (DatePickerClient.tsx)
'use client';

import { useEffect, useRef } from 'react';
import FlexiDatepicker from 'flexidatepicker';
import 'flexidatepicker/dist/flexidatepicker.min.css';

export default function DatePickerClient() {
  const inputRef = useRef<HTMLInputElement>(null);
  const pickerRef = useRef<FlexiDatepicker | null>(null);

  useEffect(() => {
    if (inputRef.current && !pickerRef.current) {
      pickerRef.current = new FlexiDatepicker(inputRef.current, {
        mode: 'single',
        dateFormat: 'MMM d, yyyy'
      });
    }

    return () => {
      pickerRef.current = null;
    };
  }, []);

  return <input ref={inputRef} type="text" readOnly />;
}
```

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

### Implement basic FlexiDatepicker in React

Source: https://flexidatepicker.vercel.app/framework/react

A simple implementation using useRef and useEffect to manage the datepicker instance.

```typescript
import { useEffect, useRef } from 'react';
import FlexiDatepicker from 'flexidatepicker';
import 'flexidatepicker/dist/flexidatepicker.min.css';

function DatePicker() {
  const inputRef = useRef<HTMLInputElement>(null);
  const pickerRef = useRef<FlexiDatepicker | null>(null);

  useEffect(() => {
    if (inputRef.current && !pickerRef.current) {
      pickerRef.current = new FlexiDatepicker(inputRef.current, {
        mode: 'range',
        dateFormat: 'MMM d, yyyy',
        onSelectionChange: (data) => {
          console.log('Selected:', data);
        }
      });
    }

    return () => {
      if (pickerRef.current) {
        pickerRef.current = null;
      }
    };
  }, []);

  return <input ref={inputRef} type="text" readOnly />;
}
```

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

### Initialize FlexiDatepicker in a Client Component

Source: https://flexidatepicker.vercel.app/framework/nextjs

Use the 'use client' directive and useRef to manage the datepicker instance within a React component.

```typescript
'use client';

import { useEffect, useRef } from 'react';
import FlexiDatepicker from 'flexidatepicker';
import 'flexidatepicker/dist/flexidatepicker.min.css';

export default function DatePickerComponent() {
  const inputRef = useRef<HTMLInputElement>(null);
  const pickerRef = useRef<FlexiDatepicker | null>(null);

  useEffect(() => {
    // Only initialize on client-side
    if (typeof window !== 'undefined' && inputRef.current && !pickerRef.current) {
      pickerRef.current = new FlexiDatepicker(inputRef.current, {
        mode: 'range',
        dualCalendar: true,
        dateFormat: 'MMM d, yyyy'
      });
    }

    return () => {
      pickerRef.current = null;
    };
  }, []);

  return <input ref={inputRef} type="text" readOnly placeholder="Select dates" />;
}
```

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

### Configure Locale for FlexiDatepicker

Source: https://flexidatepicker.vercel.app/

Set the locale to customize language and regional date formats using BCP 47 strings.

```javascript
// English (US)
new FlexiDatepicker('#date1', {
  locale: 'en-US',
  mode: 'single'
});

// Spanish
new FlexiDatepicker('#date2', {
  locale: 'es-ES',
  mode: 'single'
});

// Japanese
new FlexiDatepicker('#date3', {
  locale: 'ja-JP',
  mode: 'single'
});
```

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

### Create Reusable DatePicker Component

Source: https://flexidatepicker.vercel.app/framework/angular

A full-featured component using Inputs and Outputs for parent communication and dynamic configuration.

```typescript
// date-picker.component.ts
import { 
  Component, 
  ElementRef, 
  ViewChild, 
  AfterViewInit, 
  OnDestroy,
  Input,
  Output,
  EventEmitter
} from '@angular/core';
import FlexiDatepicker, { FlexiDatepickerOptions } from 'flexidatepicker';

@Component({
  selector: 'app-date-picker',
  template: `
    <input 
      #dateInput 
      type="text" 
      readonly 
      [placeholder]="placeholder"
      [class]="inputClass"
    />
  `,
  styleUrls: ['./date-picker.component.css']
})
export class DatePickerComponent implements AfterViewInit, OnDestroy {
  @ViewChild('dateInput') dateInput!: ElementRef<HTMLInputElement>;
  @Input() mode: 'single' | 'multiple' | 'range' | 'multi-range' = 'single';
  @Input() placeholder: string = 'Select date';
  @Input() inputClass: string = '';
  @Input() options: Partial<FlexiDatepickerOptions> = {};
  @Output() dateChange = new EventEmitter();

  private picker: FlexiDatepicker | null = null;

  ngAfterViewInit() {
    this.picker = new FlexiDatepicker(this.dateInput.nativeElement, {
      mode: this.mode,
      ...this.options,
      onSelectionChange: (data) => {
        this.dateChange.emit(data);
      }
    });
  }

  ngOnDestroy() {
    this.picker = null;
  }
}

// Usage in template
<app-date-picker 
  mode="range" 
  placeholder="Select date range"
  (dateChange)="handleDateChange($event)"
  [options]="{ dualCalendar: true, dateFormat: 'MMM d, yyyy' }"
>
</app-date-picker>
```

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

### Create a reusable DatePicker component

Source: https://flexidatepicker.vercel.app/framework/react

Encapsulate the datepicker logic into a reusable component using forwardRef.

```typescript
// DatePickerComponent.tsx
import { useEffect, useRef, forwardRef } from 'react';
import FlexiDatepicker, { FlexiDatepickerOptions } from 'flexidatepicker';
import 'flexidatepicker/dist/flexidatepicker.min.css';

interface DatePickerProps {
  options?: FlexiDatepickerOptions;
  placeholder?: string;
  className?: string;
}

export const DatePickerComponent = forwardRef<HTMLInputElement, DatePickerProps>(
  ({ options, placeholder = "Select date", className = "" }, ref) => {
    const inputRef = useRef<HTMLInputElement>(null);
    const pickerRef = useRef<FlexiDatepicker | null>(null);

    useEffect(() => {
      if (inputRef.current && !pickerRef.current) {
        pickerRef.current = new FlexiDatepicker(inputRef.current, options);
      }

      return () => {
        if (pickerRef.current) {
          pickerRef.current = null;
        }
      };
    }, [options]);

    return (
      <input
        ref={inputRef}
        type="text"
        readOnly
        placeholder={placeholder}
        className={className}
      />
    );
  }
);

DatePickerComponent.displayName = 'DatePickerComponent';

// Usage
function App() {
  return (
    <DatePickerComponent
      options={{
        mode: 'range',
        dualCalendar: true,
        dateFormat: 'MMM d, yyyy'
      }}
      placeholder="Select date range"
      className="w-full px-4 py-2 border rounded"
    />
  );
}
```

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

### Initialize Single Date Selection

Source: https://flexidatepicker.vercel.app/

Configure the date picker for single date selection by targeting an element and setting the mode to 'single'.

```javascript
new FlexiDatepicker('#datepicker', {
  mode: 'single',
  dateFormat: 'MMM d, yyyy'
});
```

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

### Create a Reusable DatePicker Component

Source: https://flexidatepicker.vercel.app/framework/vue

Encapsulate FlexiDatepicker logic into a reusable component that accepts props for configuration and emits change events.

```vue
<!-- DatePicker.vue -->
<template>
  <div>
    <input 
      ref="dateInput" 
      type="text" 
      readonly 
      :placeholder="placeholder"
      :class="inputClass"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import FlexiDatepicker from 'flexidatepicker';
import 'flexidatepicker/dist/flexidatepicker.min.css';

const props = defineProps({
  mode: {
    type: String,
    default: 'single'
  },
  placeholder: {
    type: String,
    default: 'Select date'
  },
  inputClass: {
    type: String,
    default: ''
  },
  options: {
    type: Object,
    default: () => ({})
  }
});

const emit = defineEmits(['change']);

const dateInput = ref(null);
let picker = null;

onMounted(() => {
  if (dateInput.value) {
    picker = new FlexiDatepicker(dateInput.value, {
      mode: props.mode,
      ...props.options,
      onSelectionChange: (data) => {
        emit('change', data);
      }
    });
  }
});

onBeforeUnmount(() => {
  picker = null;
});
</script>

<!-- Usage -->
<DatePicker 
  mode="range" 
  placeholder="Select date range"
  @change="handleDateChange"
  :options="{ dualCalendar: true, dateFormat: 'MMM d, yyyy' }"
/>
```

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

### Configure Global CSS in angular.json

Source: https://flexidatepicker.vercel.app/framework/angular

Add the library's stylesheet to the styles array in your angular.json file to ensure global availability.

```json
/* angular.json */
{
  "projects": {
    "your-app": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "src/styles.css",
              "node_modules/flexidatepicker/dist/flexidatepicker.min.css"
            ]
          }
        }
      }
    }
  }
}
```

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

### Configure Selected Dates Display

Source: https://flexidatepicker.vercel.app/

Use selectedDatesDisplaySelector to automatically sync the selected dates to a specific DOM element.

```html
<!-- HTML -->
<input id="datepicker" type="text" readonly>
<div id="selected-display"></div>

<!-- JavaScript -->
<script>
new FlexiDatepicker('#datepicker', {
  mode: 'multi-range',
  selectedDatesDisplaySelector: '#selected-display'
});
</script>
```

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

### Implement typed FlexiDatepicker

Source: https://flexidatepicker.vercel.app/framework/react

Utilize built-in TypeScript interfaces for options and selection data.

```typescript
import { useEffect, useRef } from 'react';
import FlexiDatepicker, { 
  FlexiDatepickerOptions,
  FlexiDatepickerSelection 
} from 'flexidatepicker';
import 'flexidatepicker/dist/flexidatepicker.min.css';

function DatePicker() {
  const inputRef = useRef<HTMLInputElement>(null);
  const pickerRef = useRef<FlexiDatepicker | null>(null);

  useEffect(() => {
    if (inputRef.current && !pickerRef.current) {
      const options: FlexiDatepickerOptions = {
        mode: 'range',
        dateFormat: 'MMM d, yyyy',
        dualCalendar: true,
        onSelectionChange: (data: FlexiDatepickerSelection) => {
          console.log('Ranges:', data.ranges);
          console.log('Dates:', data.dates);
        }
      };

      pickerRef.current = new FlexiDatepicker(inputRef.current, options);
    }

    return () => {
      if (pickerRef.current) {
        pickerRef.current = null;
      }
    };
  }, []);

  return <input ref={inputRef} type="text" readOnly placeholder="Select dates" />;
}
```

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

### Handle Date Selection Changes

Source: https://flexidatepicker.vercel.app/

Use onSelectionChange to trigger logic when dates are selected or deselected. The callback provides access to ranges and dates data for real-time UI updates or validation.

```javascript
// Get selection data in real-time
new FlexiDatepicker('#datepicker', {
  mode: 'multi-range',
  onSelectionChange: (data) => {
    console.log('Ranges:', data.ranges);
    console.log('Dates:', data.dates);
    
    // Update UI based on selection
    if (data.ranges.length > 0) {
      document.getElementById('output').textContent = 
        `Selected ${data.ranges.length} range(s)`;
    }
  }
});

// Example with validation
new FlexiDatepicker('#booking', {
  mode: 'range',
  onSelectionChange: (data) => {
    if (data.ranges.length > 0) {
      const range = data.ranges[0];
      const start = new Date(range.start);
      const end = new Date(range.end);
      const days = (end - start) / (1000 * 60 * 60 * 24);
      
      if (days > 14) {
        alert('Maximum booking period is 14 days');
      }
    }
  }
});
```

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

### onSelectionChange

Source: https://flexidatepicker.vercel.app/

A callback function triggered whenever the user selects or deselects dates. It provides real-time access to the current selection data.

```APIDOC
## onSelectionChange

### Description
Callback function triggered when selection changes. Receive updates whenever the user selects or deselects dates.

### Parameters
- **data** (object) - Contains `ranges` (array) and `dates` (array).

### Usage Example
```javascript
new FlexiDatepicker('#datepicker', {
  mode: 'multi-range',
  onSelectionChange: (data) => {
    console.log('Ranges:', data.ranges);
    console.log('Dates:', data.dates);
  }
});
```
```

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

### Restrict Selectable Date Range

Source: https://flexidatepicker.vercel.app/

Use minDate and maxDate to define the bounds of selectable dates.

```javascript
// Restrict to a specific date range
new FlexiDatepicker('#datepicker', {
  mode: 'range',
  minDate: '2024-01-01',
  maxDate: '2024-12-31'
});

// Only allow future dates after today
const today = new Date().toISOString().split('T')[0];
new FlexiDatepicker('#future-only', {
  mode: 'single',
  minDate: today
});

// Only allow dates in the next 30 days
const thirtyDaysLater = new Date();
thirtyDaysLater.setDate(thirtyDaysLater.getDate() + 30);
new FlexiDatepicker('#next-30-days', {
  mode: 'range',
  minDate: today,
  maxDate: thirtyDaysLater.toISOString().split('T')[0]
});
```

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

### Customize Date Format

Source: https://flexidatepicker.vercel.app/

Use tokens like yyyy, MMMM, and dd to define the display format of dates in the input field.

```javascript
// Format options:
// yyyy - Full year (2024)
// yy - Two digit year (24)
// MMMM - Full month name (January)
// MMM - Short month name (Jan)
// MM - Two digit month (01)
// M - Single digit month (1)
// dd - Two digit day (05)
// d - Single digit day (5)

// Examples:
new FlexiDatepicker('#date1', {
  dateFormat: 'MMM d, yyyy' // Jan 15, 2024
});

new FlexiDatepicker('#date2', {
  dateFormat: 'yyyy-MM-dd' // 2024-01-15
});

new FlexiDatepicker('#date3', {
  dateFormat: 'dd/MM/yyyy' // 15/01/2024
});

new FlexiDatepicker('#date4', {
  dateFormat: 'MMMM d, yyyy' // January 15, 2024
});
```

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

### Toggle Past and Future Date Restrictions

Source: https://flexidatepicker.vercel.app/

Enable disablePast or disableFuture to automatically restrict selection relative to the current date.

```javascript
// Disable all past dates
new FlexiDatepicker('#no-past', {
  mode: 'single',
  disablePast: true
});

// Disable all future dates
new FlexiDatepicker('#no-future', {
  mode: 'single',
  disableFuture: true
});

// Only allow today and future dates
new FlexiDatepicker('#today-onwards', {
  mode: 'range',
  disablePast: true
});
```

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

### selectedDatesDisplaySelector

Source: https://flexidatepicker.vercel.app/

A configuration option to specify a CSS selector for an element that will automatically display the selected dates or ranges.

```APIDOC
## selectedDatesDisplaySelector

### Description
Specify a CSS selector for an element where selected dates/ranges will be displayed. The element's content will automatically update as selections change.

### Type
string (CSS selector)

### Default
null

### Usage Example
```javascript
new FlexiDatepicker('#datepicker', {
  mode: 'multi-range',
  selectedDatesDisplaySelector: '#selected-display'
});
```
```

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

### Disable Specific Dates and Ranges

Source: https://flexidatepicker.vercel.app/

Pass an array of strings or range objects to the disabledDates property to block specific dates from selection.

```javascript
// Disable specific dates
new FlexiDatepicker('#date1', {
  mode: 'single',
  disabledDates: ['2024-12-25', '2024-01-01']
});

// Disable date ranges
new FlexiDatepicker('#date2', {
  mode: 'range',
  disabledDates: [
    { from: '2024-07-01', to: '2024-07-15' },
    { from: '2024-12-20', to: '2024-12-31' }
  ]
});

// Mix specific dates and ranges
new FlexiDatepicker('#date3', {
  mode: 'multiple',
  disabledDates: [
    '2024-03-15',
    { from: '2024-06-01', to: '2024-06-10' },
    '2024-09-20'
  ]
});
```
Tokens:
Raw