Need help with vue-flatpickr-component?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

ankurk91
777 Stars 91 Forks MIT License 261 Commits 3 Opened issues

Description

Vue.js component for Flatpickr datetime picker :calendar:

Services available

!
?

Need anything else?

Contributors list

# 26,860
Laravel
PHP
stripe
vue3
256 commits
# 292,201
C++
C
Shell
Vue.js
1 commit
# 44,716
libui
vue-tes...
elm
Nuxt.js
1 commit
# 416,259
linq
c-sharp
dotnet-...
.NET
1 commit
# 469,598
React
HTML
Shell
archite...
1 commit
# 429,802
TypeScr...
angular...
Vue.js
timepic...
1 commit

Vue FlatPickr Component

downloads jsdelivr npm-version github-tag build codecov license

Vue.js component for Flatpickr date-time picker.

Demo or JSFiddle

Version matrix

| Vue.js version | Package version | Branch | | :--- | :---: | ---: | | 2.x | 8.x | 8.x | | 3.x | 9.x | master |

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
    • Just set
      wrap:true
      in config and component will take care of all
  • Works with validation libraries

Installation

# yarn
yarn add vue-flatpickr-component

npm

npm install vue-flatpickr-component

Usage

Minimal example

Detailed example

Using Bootstrap input group and Font Awesome icons ```html

#### As plugin
```js
  import {createApp} from 'vue';
  import VueFlatPickr from 'vue-flatpickr-component';
  import 'flatpickr/dist/flatpickr.css';
  // Your app initialization logic goes here
  const app = createApp().mount('#app')
  app.use(VueFlatPickr);

This will register a global component



Events

  • The component can emit all possible events, you can listen to them in your component
    html
    
    
  • 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:

| Attribute | Type | Default | Description | | :--- | :---: | :---: | :--- | | v-model | 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)






Run examples on your localhost

  • Clone this repo
  • You should have node-js
    12.14.0>=
    and yarn
    >=1.x
    pre-installed
  • Install dependencies
    yarn install
  • Run webpack dev server
    yarn start
  • This should open the demo page at
    http://localhost:9000
    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
    yarn test

Changelog

Please see CHANGELOG for more information what has changed recently.

License

MIT License

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.