RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/ankurk91/vue-flatpickr-component/tree/8.x below:

GitHub - ankurk91/vue-flatpickr-component at 8.x

Vue.js component for Flatpickr date-time picker

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
- You are suggested to modify config via Vue.set
Can emit all possible events
Compatible with Bootstrap, Bulma or any other CSS framework
Supports wrapped mode
- Just set wrap:true in config and component will take care of all
Works with validation libraries

npm install vue-flatpickr-component@^8

<template>
    <div>
        <flat-pickr v-model="date"></flat-pickr>
    </div>
</template>

<script>
    import flatPickr from 'vue-flatpickr-component';
    import 'flatpickr/dist/flatpickr.css';

    export default {
        data() {
            return {
                date: null,
            }
        },
        components: {
            flatPickr
        }
    }
</script>

This example is based on Bootstrap 4 input group

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

<script>
    // bootstrap is just for this example
    import 'bootstrap/dist/css/bootstrap.css';
    // import this component
    import flatPickr from 'vue-flatpickr-component';
    import 'flatpickr/dist/flatpickr.css';
    // theme is optional
    // try more themes at - https://flatpickr.js.org/themes/
    import 'flatpickr/dist/themes/material_blue.css';
    // localization is optional
    import {Hindi} from 'flatpickr/dist/l10n/hi.js';

    export default {
        name: 'yourComponent',
        data() {
            return {
                // Initial value
                date: new Date(),
                // Get more form https://flatpickr.js.org/options/
                config: {
                    wrap: true, // set wrap to true only when using 'input-group'
                    altFormat: 'M j, Y',
                    altInput: true,
                    dateFormat: 'Y-m-d',
                    locale: Hindi, // locale for this instance only          
                },
            }
        },
        components: {
            flatPickr
        },
    }
</script>

import Vue from 'vue';
import VueFlatPickr from 'vue-flatpickr-component';
import 'flatpickr/dist/flatpickr.css';

Vue.use(VueFlatPickr);

This will register a global component <flat-pickr>

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

<flat-pickr v-model="date" @on-change="doSomethingOnChange" @on-close="doSomethingOnClose"></flat-pickr>

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

The component accepts these props:

Attribute Type Default Description v-model / value String / Date Object / Array / Timestamp / null null Set or Get date-picker value (required) config Object { wrap:false } Flatpickr configuration options events Array Array of sensible events Customise the events to be emitted Install in non-module environments (without webpack)

<!-- Flatpickr related files -->
<link href="https://cdn.jsdelivr.net/npm/flatpickr@4/dist/flatpickr.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/flatpickr@4/dist/flatpickr.min.js"></script>
<!-- Vue js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<!-- Lastly add this package -->
<script src="https://cdn.jsdelivr.net/npm/vue-flatpickr-component@8"></script>
<script>
    // Initialize as global component
    Vue.component('flat-pickr', VueFlatpickr);
</script>

Run examples on your localhost

Clone this repo
Make sure you have node-js >=18.16 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

Please see CHANGELOG for more information what has changed recently.

⚠️ Don't pass config option as inline literal object to :config prop.

<!-- This will cause date picker to freeze -->
<flat-picker v-model="card" :config="{ dateFormat: 'd-m-Y H:i' }"></flat-picker>

Vue.js v2.x cannot detect changes when literal object/arrays passed within template, see

This package is using Jest and vue-test-utils for testing.
Execute tests with this command npm test

MIT License

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4