Vue.js Integration Guide

Complete guide for integrating FlexiDatepicker into your Vue.js applications

Installation
Install the package via npm, yarn, or pnpm
npm install flexidatepicker
Options API
Classic Vue 2/3 Options API syntax
<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>
Composition API
Modern Vue 3 Composition API with script setup
<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>
Reusable Component
Create a reusable DatePicker component
<!-- 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' }"
/>
Best Practices
  • Lifecycle hooks: Initialize in mounted/onMounted, cleanup in beforeUnmount/onBeforeUnmount
  • Refs: Use $refs (Options API) or ref() (Composition API) to access DOM elements
  • Events: Emit custom events to parent components for data handling

Ready to get started?

FlexiDatepicker is free, open-source, and ready to use in your projects.