vuetify-datetime-input

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

Demo

Try it out!

Installation

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

or

yarn add  @darenegade/vuetify-datetime-input

Import in main.js.

import Vue from 'vue'
import "@darenegade/vuetify-datetime-input"

...

Usage

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

<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