# @darenegade/vuetify-datetime-input

> Finally a simple Vuetify Date/Time Input using nativ browser features.

Latest version **1.0.0** (published 2020-05-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install @darenegade/vuetify-datetime-input
pnpm add @darenegade/vuetify-datetime-input
yarn add @darenegade/vuetify-datetime-input
bun add @darenegade/vuetify-datetime-input
```

## 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 | 1.0.0 |
| Published | 2020-05-01 |
| First published | 2020-04-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 1.7 MB |
| Known vulnerabilities | 0 (+3 in 2 direct dependencies) |
| Install scripts | no |
| Author | Darenegade |
| Maintainers | darenegade |
| Keywords | vue, vuetify, date, time, vuetify-datetime-input, date input, time input, datetime input, input |

## Links

- npm: https://www.npmjs.com/package/@darenegade/vuetify-datetime-input
- Repository: https://github.com/darenegade/vuetify-datetime-input
- Homepage: https://github.com/darenegade/vuetify-datetime-input#readme
- Issues: https://github.com/darenegade/vuetify-datetime-input/issues
- npm.io page: https://npm.io/package/@darenegade/vuetify-datetime-input

## Dependencies (5)

- [vue](https://npm.io/package/vue.md) ^2.6.11
- [dayjs](https://npm.io/package/dayjs.md) ^1.8.26
- [v-mask](https://npm.io/package/v-mask.md) ^2.1.0
- [vuetify](https://npm.io/package/vuetify.md) ^2.2.26
- [@mdi/font](https://npm.io/package/@mdi/font.md) ^5.1.45

## 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

- 1.0.0 (latest) — 2020-05-01
- 0.1.13 — 2020-05-01
- 0.1.12 — 2020-05-01
- 0.1.11 — 2020-04-29
- 0.1.10 — 2020-04-29
- 0.1.9 — 2020-04-29
- 0.1.8 — 2020-04-29
- 0.1.7 — 2020-04-28
- 0.1.6 — 2020-04-28
- 0.1.5 — 2020-04-28
- 0.1.4 — 2020-04-28
- 0.1.3 — 2020-04-28
- 0.1.2 — 2020-04-28
- 0.1.1 — 2020-04-28
- 0.1.0 — 2020-04-28

## README

# vuetify-datetime-input

Finally, a simple Vuetify Date/Time Input using native browser features.

## Demo

[Try it out!](https://darenegade.github.io/vuetify-datetime-input/)

## Installation

```shell
npm install --save @darenegade/vuetify-datetime-input

or

yarn add  @darenegade/vuetify-datetime-input
```

Import in `main.js`.
```js
import Vue from 'vue'
import "@darenegade/vuetify-datetime-input"

...
```

## Usage

Once installed, it can be used in a template as simply as:

```html
<v-datetime-input 
    label="Input your Datetime here" 
    v-model="datetime"></v-datetime-input>
```

## Properties

| Name                  | Type              | Default Value                     | Description                                                   |
| ----------------      | -----------       | -------------                     | ----------------------------------                            |
| value (model)         | String (ISO-Date) |                                   | Date-Time input model.                                        |
| readonly              | Boolean           | false                             | Input is readonly.                                            |
| disabled              | Boolean           | false                             | Input is disabled.                                            |
| hideDetails           | Boolean           | false                             | Hides details under input.                                    |
| dense                 | Boolean           | false                             | Input is dense.                                               |
| filled                | Boolean           | false                             | Input is filled.                                              |
| outlined              | Boolean           | false                             | Input is outlined.                                            |
| clearable             | Boolean           | true                              | Input is clearable.                                           |
| persistentHint        | Boolean           | false                             | Activates persistent hint.                                    |
| hint                  | String            | false                             | Text of persistent hint.                                      |
| label                 | String            | ""                                | Label of Input.                                               |
| date-label            | String            | "Date"                            | Label of Date-Input.                                          |
| time-label            | String            | "Time"                            | Label of Time-Input.                                          |
| rules                 | Array             | []                                | Validation rules.                                             |
| incompleteErrorMessage| String            | "Date and Time needs to be filled"| Error message if one field is missing.                        |
| dateformatErrorMessage| String            | "Wrong Dateformat"                | Error message if dateformat is wrong (*Text-Mode)             |
| locale                | String            | "en"                              | Locale-Format of Date. One of "en", "de" or "es" (*Text-Mode) |

*Text-Mode: If the Browser doesn't support Date/Time Inputs the Input falls back into Text-Mode with a masked input format.

## Events

| Name  | Arguments           | Description             |
| ----- | ------------------- | ----------------------- |
| input | value (String) | The updated model       |

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