To help you get started, we've collected the most common ways that vue-flatpickr-component is being used within popular public projects.

NJUCSE17 / JB-Online / resources / js / app.js View on Github

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

import flatPickr from 'vue-flatpickr-component';
import 'flatpickr/dist/flatpickr.css';
import 'flatpickr/dist/themes/light.css';
import 'flatpickr/dist/l10n/zh.js';
console.log(flatPickr.props.config);
flatPickr.props.config.default = () => {
    return {
        enableTime: true,
        enableSeconds: true,
        time_24hr: true,
        minuteIncrement: 5,
        prevArrow: '<i class="fas fa-angle-left"></i>',
        nextArrow: '<i class="fas fa-angle-right"></i>',
        locale: 'zh',
    };
};
window.Vue.component('flat-pickr', flatPickr);

import vueKanban from 'vue-kanban';
window.Vue.use(vueKanban);

/**

View more ways to use vue-flatpickr-component

Vue FlatPickr Component

Vue.js component for Flatpickr date-time picker.

Demo or JSFiddle

Version matrix

Features

• Reactive v-model value
  • You can change flatpickr value programmatically
• Reactive config options
  • You can change config options dynamically
  • Component will watch for any changes and redraw itself
• Can emit all possible events
• Compatible with Bootstrap or any other CSS framework
• Supports wrapped mode
• Works with validation libraries

Installation

npm install vue-flatpickr-component@^11

Usage

Minimal example

<template>
    
</template>

Detailed example

Using Bootstrap input group and Font Awesome icons

<template>
    <section>
        <div class="form-group">
            <label>Select a date</label>
            <div class="input-group">
                
                <div class="input-group-append">
                    <button data-toggle="" title="Toggle" type="button" class="btn btn-default">
                        <i class="fa fa-calendar">
                        <span class="sr-only" aria-hidden="true">Toggle</span>
                    </i></button><i class="fa fa-calendar">
                    <button data-clear="" title="Clear" type="button" class="btn btn-default">
                        <i class="fa fa-times">
                        <span class="sr-only" aria-hidden="true">Clear</span>
                    </i></button><i class="fa fa-times">
                </i></i></div><i class="fa fa-calendar"><i class="fa fa-times">
            </i></i></div><i class="fa fa-calendar"><i class="fa fa-times">
        </i></i></div><i class="fa fa-calendar"><i class="fa fa-times">
        <pre>Selected date is - {{date}}</pre>
    </i></i></section><i class="fa fa-calendar"><i class="fa fa-times">
</i></i></template>

Events

• The component can emit all possible events, you can listen to them in your component

• Event names has been converted to kebab-case.
• You can still pass your callback methods in :config like original flatpickr do.

Available props

The component accepts these props:

Use in browser with CDN

Run examples on your localhost

• Clone this repo
• Make sure you have node-js >=20.11 and pnpm >=8.x pre-installed
• Install dependencies pnpm install
• Run webpack dev server npm start
• This should open the demo page in your default web browser

Testing

• This package is using Jest and vue-test-utils for testing.
• Tests can be found in __test__ folder.
• Execute tests with this command npm test

Changelog

Please see CHANGELOG for more information what has changed recently.

License

MIT License