# vue-datetime-2

> Mobile friendly datetime picker for Vue. Supports date, datetime and time modes, i18n and disabling dates.

Latest version **0.6.1** (published 2017-12-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-datetime-2
pnpm add vue-datetime-2
yarn add vue-datetime-2
bun add vue-datetime-2
```

## 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.6.1 |
| Published | 2017-12-01 |
| First published | 2017-11-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Paritosh Mishra |
| Maintainers | paritosh149 |
| Keywords | datetime, datetime-picker, picker, date, vue |

## Links

- npm: https://www.npmjs.com/package/vue-datetime-2
- Repository: https://github.com/paritosh149/vue-datetime
- Homepage: https://github.com/paritosh149/vue-datetime#readme
- Issues: https://github.com/paritosh149/vue-datetime/issues
- npm.io page: https://npm.io/package/vue-datetime-2

## Dependencies (1)

- [moment](https://npm.io/package/moment.md) ^2.11.1

## Alternatives

- [@js-joda/timezone](https://npm.io/package/@js-joda/timezone.md) — 383.4K weekly downloads
- [chartjs-adapter-moment](https://npm.io/package/chartjs-adapter-moment.md) — 210.8K weekly downloads
- [strftime](https://npm.io/package/strftime.md) — 171.2K weekly downloads
- [vue-flatpickr-component](https://npm.io/package/vue-flatpickr-component.md) — 115.8K weekly downloads
- [timepicker](https://npm.io/package/timepicker.md) — 51.0K weekly downloads

## Recent versions

- 0.6.1 (latest) — 2017-12-01
- 0.6.0 — 2017-11-30

## README

# vue-datetime
> Mobile friendly datetime picker for Vue. Supports date, datetime and time modes, i18n and disabling dates.

[![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](LICENSE.md)
[![Latest Version on NPM](https://img.shields.io/npm/v/vue-datetime.svg?style=flat-square)](https://npmjs.com/package/vue-datetime)
[![npm](https://img.shields.io/npm/dt/vue-datetime.svg?style=flat-square)](https://www.npmjs.com/package/vue-datetime)

## Demo

[![demo](https://raw.githubusercontent.com/paritosh149/vue-datetime/c8d03c39eddd3c08c217b49b15fd86d90b3693eb/docs/vue-datetime-demo.gif)](http://mariomka.github.io/vue-datetime)

**[Go to demo](https://paritosh149.github.io/vue-datetime/)**.

# Install

yarn

```bash
yarn add vue-datetime
```

npm

```bash
npm install vue-datetime --save
```

## Register the component

```js
import Datetime from 'vue-datetime';

Vue.use(Datetime);
```

### Register manually

#### Global

```js
import { Datetime } from 'vue-datetime';

Vue.component('datetime', Datetime);
```

#### Local

```js
import { Datetime } from 'vue-datetime';

Vue.extend({
  template: '...',
  components: {
    datetime: Datetime
  }
});
```

## Usage

### Minimal

```html
<datetime v-model="date"></datetime>
```

### Complete

```html
<datetime v-model="date"
          type="datetime"
          input-format="DD-MM-YYYY HH:mm"
          wrapper-class="my-wrapper-class"
          input-class="my-input-class"
          placeholder="Select date"
          moment-locale="es"
          :i18n="{ok:'De acuerdo', cancel:'Cancelar'}"
          :disabled-dates="['2017-09-07', ['2017-09-25', '2017-10-05']]"
          max-date="2017-12-10"
          min-date="2017-07-10"
          monday-first
          auto-continue
          auto-close
          required></datetime>
```

### Third-party libraries

The component has a dependency, moment.js, and it behaves like an input text. It should work well with third-party libraries.

How to use with other libraries:

- [Use with Vue-Formly](https://gist.github.com/AndresCL/2e45360643a1858883616d349e0a9171) @AndresCL

## Params

Parameter | Type | Default
--------- | ---- | ------
v-model (*required*) | Date `String` | -
type | `String`: *date*, *datetime* or *time* | `date`
input-format | `String` | `YYYY-MM-DD`, `YYYY-MM-DD HH:mm` or `HH:mm`
wrapper-class | `String` | `null`
input-class | `String` | `null`
placeholder | `String` | `null`
moment-locale | `String` | `null`
i18n | `Object` | `{ok: 'Ok', cancel: 'Cancel'}`
disabled-dates | `Array` of date `Strings` | `[]`
min-date | Date `String` | `null`
max-date | Date `String` | `null`
monday-first | `Boolean` | `false`
auto-continue | `Boolean` | `false`
auto-close | `Boolean` | `false`
required | `Boolean` | `false`

The component is based on [Moment.js](https://momentjs.com), check out documentation to set dates (ISO 8601 recommended), `input-format` and `moment-locale`.

## Events

Component emits the `input` event.

# License

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

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