# @antixrist/vue-flatpickr

> Flatpickr for VueJS

Latest version **2.2.14** (published 2017-06-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install @antixrist/vue-flatpickr
pnpm add @antixrist/vue-flatpickr
yarn add @antixrist/vue-flatpickr
bun add @antixrist/vue-flatpickr
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.2.14 |
| Published | 2017-06-07 |
| First published | 2017-06-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 4.0.0 |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Jrain Lau |
| Maintainers | antixrist |
| Keywords | vue, vue-component, Flatpickr, vue-flatpickr |

## Links

- npm: https://www.npmjs.com/package/@antixrist/vue-flatpickr
- Repository: https://github.com/antixrist/vue-flatpickr
- Homepage: https://github.com/antixrist/vue-flatpickr#readme
- Issues: https://github.com/antixrist/vue-flatpickr/issues
- npm.io page: https://npm.io/package/@antixrist/vue-flatpickr

## Dependencies (1)

- [flatpickr](https://npm.io/package/flatpickr.md) ^2.6.3

## Recent versions

- 2.2.14 (latest) — 2017-06-07

## README

# Vue-Flatpickr (^2.2.0)
`Flatpickr` for `VueJS` bases on the lastest version of [Flatpickr](https://github.com/chmln/flatpickr) (^2.2.5).

Demo: [https://jrainlau.github.io/vue-flatpickr/](https://jrainlau.github.io/vue-flatpickr/)

> Version 2.x supports `VueJS 2.x` only. Check out the `master` branch  for supporting `VueJS 1.0`

## Install
```
npm install vue-flatpickr --save
```

## Usage
Enter your `main.js` file which inits the `VueJS`:
```
import Vue from 'vue'
import App from './App.vue'
import VueFlatpickr from 'vue-flatpickr'
import 'vue-flatpickr/theme/airbnb.css'

Vue.use(VueFlatpickr)

new Vue({
  el: '#app',
  ...App
})
```
then you can use `Vue-Flatpickr` directly in your `*.vue` file:
```
<Flatpickr />
```

## Options
Use `props` to pass an option object to `Vue-Flatpickr`:
```
<!-- template -->
<Flatpickr :options="fpOptions" />
```

```
<!-- script -->
data () {
  return {
    fpOptions: {}
  }
}
```
> `Vue-Flatpickr` supports all options as the [Official Document](https://chmln.github.io/flatpickr/), except the *"Custom elements and input groups"*

## Data binding
`Vue-Flatpickr` supports `v-model` for data binding:
```
<!-- template -->
<Flatpickr v-model="dateStr" />
```

```
<!-- script -->
data () {
  return {
    dateStr: ''
  }
}
```

## Themes
`Vue-Flatpickr` supports all the offical themes. You should import the theme you like from `vue-flatpickr/theme` after you've imported the `VueFlatpickr`.
```
import VueFlatpickr from 'vue-flatpickr'
import 'vue-flatpickr/theme/airbnb.css'
```

Themes you could use:
- `airbnb.css`
- `base16_flat.css`
- `confetti.css`
- `dark.css`
- `flatpickr.min.css`
- `material_blue.css`
- `material_green.css`
- `material_orange.css`
- `material_red.css`

## Development

- Run dev

```
git clone https://github.com/jrainlau/vue-flatpickr.git

cd vue-flatpickr && npm install

npm run dev
```

- Run build-demo

```
npm run build-demo
```
then checkout the `/dist` folder for demo.

- Run build

```
npm run build
```
then checkout the `/dist` folder for bundle.

> `Vue-Flatpickr` is using `eslint-standar`, all pull request must follow the standar nor not allow to be merged.

## Lisense
MIT

---
_Source: https://npm.io/package/@antixrist/vue-flatpickr · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._