ns-vue-flatpickr

A Vue component wrapper for the NS Flatpickr date picker library. NS Flatpickr is a modified version of Flatpickr that allows for the usage of localized year values, such as the Buddhist year.

Installation

npm install ns-vue-flatpickr

Usage

<template>
  <div>
    <Flatpickr v-model="selectedDate" :options="flatpickrOptions"></Flatpickr>
  </div>
</template>

<script>
   import { defineComponent } from 'vue';
   import { Flatpickr } from 'ns-vue-flatpickr';

   export default defineComponent({
   components: {
      Flatpickr,
   },
   data() {
      return {
         selectedDate: null,
         flatpickrOptions: {
         // Configure Flatpickr options here
         },
      };
   },
   });
</script>

Wrap custom input

<Flatpickr v-model="selectedDate" wrap :options="{ clickOpens: false }">
   <input type="text" data-input />
   <button class="input-button" title="toggle" data-toggle>
      Open
   </button>
   <button class="input-button" title="clear" data-clear>
      Clear
   </button>
</Flatpickr>

Props

Prop	Type	Description
options	Object	Configuration options for Flatpickr.
modelValue	Any	The selected date(s) value.
disabled	Boolean	Determines if the date picker is disabled.
wrap	Boolean	Specifies whether to wrap the date picker.
events	Array	List of Flatpickr event hooks to bind to.

Events

Event	Description
input	Triggered when the selected date(s) change.
change	Triggered when the selected date(s) change.
blur	Triggered when the date picker loses focus.
close	Triggered when the date picker closes.

For more details on the available options and events, please refer to the Flatpickr documentation.

License

This library is licensed under the MIT License. See the LICENSE file for more details.