vuetify-datetime

DateTime component to vuetify 2.x
774
Install
npm install vuetify-datetime
Latest Version:2.0.4
Vue:2
Last Updated:Mar 24, 2020
Links: npm
Maintainer: juareznasato

vuetify-datetime

This component works with vuetify. input:

  • 14/05/2019 12:13 (Locale allows you to define others date formats).
  • 14/05/2019 12:13:14 (with seconds)

v-model: (milliseconds) 1557802800000

if you need a component to input mask dates, working in milliseconds. Maybe it can help you:

vuetify-simple-date

See DEMO here

GitHub

npm

Install:

$ npm install vuetify-datetime --save

Register component:
1- Create a src/plugins/vuetify-datetime.js file with the following content:
import Vue from "vue";
import VuetifyDateTime from "vuetify-datetime";
Vue.use(VuetifyDateTime);
export default VuetifyDateTime;

2- Add to src/mains.js file:
import "./plugins/vuetify-datetime.js";

Parent component:
<template>
  <div>
    <vuetify-datetime v-model="value" v-bind:label="label" v-bind:options="options"/>
    v-model parent: {{ value }}
  </div>
</template>
<script>
export default {
  data: () => ({
    value: "1557802800000",
    label: "Date",
    options: {
      tabDateTitle: "Data",
      tabTimeTitle: "Hora",
      locale: "pt-BR",
      format: "DD/MM/YYYY",     - Date format only. Do not include the time format here.
      icon: "event",            - "" to disable.
      iconTime: "av_timer",     - "" to disable. Clicking on this icon, will open the time window.
      titleBarColor: "blue",
      backgroundColor: "white",
      closeOnDateClick: false,  - You can define what happens after clicking the date picker: Close the window or go to the timer picker.
      useSeconds: false,        - Set true to working with seconds as well.
      clearable: true,
      outlined: false,
    }
  })
};
</script>

Version History

Version Released Vue License
2.0.4 ^2.6.10
2.0.3 ^2.6.10
2.0.2 ^2.6.10
2.0.1 ^2.6.10
2.0.0 ^2.6.10