# vue-mdl-datepicker

> Material Design Datepicker for Vue.js

Latest version **0.2.1** (published 2016-12-03) · 0 weekly downloads

## Install

```sh
npm install vue-mdl-datepicker
pnpm add vue-mdl-datepicker
yarn add vue-mdl-datepicker
bun add vue-mdl-datepicker
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.1 |
| Published | 2016-12-03 |
| First published | 2016-11-27 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 4.0.0 |
| Dependencies | 1 |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 7 |
| Author | CYBAI |
| Maintainers | cybai |

## Links

- npm: https://www.npmjs.com/package/vue-mdl-datepicker
- Repository: https://github.com/CYBAI/vue-mdl-datepicker
- Homepage: https://github.com/CYBAI/vue-mdl-datepicker#readme
- Issues: https://github.com/CYBAI/vue-mdl-datepicker/issues
- npm.io page: https://npm.io/package/vue-mdl-datepicker

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^2.1.3

## Recent versions

- 0.2.1 (latest) — 2016-12-03
- 0.2.0 — 2016-12-03
- 0.1.5 — 2016-11-28
- 0.1.4 — 2016-11-27
- 0.1.3 — 2016-11-27
- 0.1.2 — 2016-11-27
- 0.1.1 — 2016-11-27

## README

# vue-mdl-datepicker

[![Build Status](http://img.shields.io/travis/CYBAI/vue-mdl-datepicker.svg?style=flat-square)](https://travis-ci.org/CYBAI/vue-mdl-datepicker)

> Material Design Datepicker for Vue.js

## Install

```sh
# via yarn
yarn add vue-mdl-datepicker

# or via npm
npm install --save vue-mdl-datepicker
```

## Usage
```vue
<template>
  <div>{{date}}</div>
  <mdl-datepicker
    v-model="date"
    :default="date"
  ></mdl-datepicker>
</template>

<script>
import 'vue-mdl-datepicker/dist/vue-mdl-datepicker.css';
import MdlDatepicker from 'vue-mdl-datepicker';

export default {
  name: 'MyComponent',
  components: { MdlDatepicker },
  data() {
    return {
      date: new Date(),
    };
  },
};
</script>
```

## Props

|         Name         |    Type    |      Default     |                       Description                     |
|----------------------|------------|------------------|-------------------------------------------------------|
|    firstDayOfWeek    |  `Number`  |         0        |  The fist day of the week, where 0 represents Sunday. |
|        default       |   `Date`   |                  |  Default selected date                                |
|         autoOk       |  `Boolean` |       false      |  If true, automatically ok and close datepicker       |
| disableYearSelection |  `Boolean` |       false      |  If true, year selection will be disabled             |
|        maxDate       |   `Date`   |  date + 100 year |  Maximum selected date                                |
|        minDate       |   `Date`   |  date - 100 year |  Minimum selected date                                |
|   shouldDisableDate  | `Function` |                  |  Function return those days should be disabled        |
|      formatDate      | `Function` |     YYYY-MM-dd   |  Function return format of displayed date             |
|      orientation     |  `String`  |    `portrait`    |  Orientation of datepicker, `portrait` or `landscape` |

### TODO
- [ ] Transitions

# LICENSE

[MIT](http://opensource.org/licenses/MIT)

Copyright (c) 2016 CYBAI

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