vuedt

VueDT

Super lightweight Vuejs Date and Time picker component with i18n support. Only 3.3kb minified and gzipped!

Screenshots

There are also nice animations 'n stuff.

Usage

Simple standard example for a date and time picker that is initialized with a data value:

<template>
  <VueDT v-model="date" />
</template>

<script>
// don't forget to import the styles
import 'vuedt/dist/vuedt.css'
import VueDT from 'vuedt'

export default {
  components: { VueDT },
  data () {
    return {
      date: new Date()
    }
  }
}
</script>

More possibilities:

<template>
  <!-- only calendar, no clock -->
  <VueDT v-model="date" :time="false" />

  <!-- show a placeholder until a date is selected -->
  <VueDT v-model="date" placeholder="select date" />

  <!-- Use a specific locale. You can also pass locale-options,
       both are passed to date.toLocaleString(locale, localeOptions)

       If :time="false" all options regarding the time are deleted. -->
  <VueDT v-model="date" locale="de-DE" :locale-options="..." />

  <!-- Set a specific timezone (can also be set via locale-options) -->
  <VueDT v-model="date" time-zone="Europe/Berlin" />
</template>

<script>
import 'vuedt/dist/vuedt.css'
import VueDT from 'vuedt'

export default {
  components: { VueDT },
  data () {
    return {
      date: new Date()
    }
  }
}
</script>

See the Date toLocaleString MDN page for all possible possible locale options.

Planned features

• better way to store translations
• black listing or white listing of dates and date ranges
• highlighting of particular dates, date ranges and columns
• (limited?) theming support

Contributing

This project is still in beta! Please help making it stable by testing and submitting issues and pull requests.