ns-vue-flatpickr
TypeScript icon, indicating that this package has built-in type declarations

0.2.7 • Public • Published

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.

Package Sidebar

Install

npm i ns-vue-flatpickr

Weekly Downloads

12

Version

0.2.7

License

MIT

Unpacked Size

149 kB

Total Files

16

Last publish

Collaborators

  • nutthawutkongsopa