Quick Start

This section describes how to connect and configure the Vue3DateTimePicker

Usage

WARNING

This package does not come with fonts, they need to be connected separately. (By default, the package is expected to include the Roboto font)

You can connect components globally

import { createApp } from 'vue';
import App from './App.vue';
import {
  AppDateTimePicker,
  AppTimePicker,
} from '@boichikpro/vue3-date-time-picker';
import '@boichikpro/vue3-date-time-picker/assets/style.css';
import '@boichikpro/vue3-date-time-picker/assets/variables.css';

const app = createApp(App);

app.component('AppDateTimePicker', AppDateTimePicker);
app.component('AppTimePicker', AppTimePicker);
app.mount('#app');

You can also connect the components locally

Composition API

<template>
  <AppDateTimePicker v-model="dateModel" />

  <AppTimePicker v-model="timeModel" />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import {
  AppDateTimePicker,
  AppTimePicker,
} from '@boichikpro/vue3-date-time-picker';
import '@boichikpro/vue3-date-time-picker/assets/style.css';
import '@boichikpro/vue3-date-time-picker/assets/variables.css';

const dateModel = ref(null);
const timeModel = ref(null);
</script>

Options API

<template>
  <AppDateTimePicker v-model="dateModel" />

  <AppTimePicker v-model="timeModel" />
</template>

<script>
import {
  AppDateTimePicker,
  AppTimePicker,
} from '@boichikpro/vue3-date-time-picker';
import '@boichikpro/vue3-date-time-picker/assets/style.css';
import '@boichikpro/vue3-date-time-picker/assets/variables.css';

export default {
  components: { AppDateTimePicker, AppTimePicker },
  data() {
    return {
      dateModel: null,
      timeModel: null,
    };
  },
};
</script>

Localization

Localization in this package uses two approaches, with and without vue-i18n

INFO

Months, days of the week, etc. are translated using Intl.DateTimeFormat, and the language is obtained from i18n.locale or props.locale

If you are using vue-i18n, you only need to add a specific list of translations, which is listed below

{
  "dp__apply": "Apply", // Confirmation button at the bottom of the popover
  "dp__cancel": "Cancel" // Undo button at the bottom of the popover
}

Example of adding to vue-i18n options:

import { createApp } from 'vue';
import { createI18n } from 'vue-i18n';

const i18n = createI18n({
  locale: 'en',
  fallbackLocale: 'en',
  messages: {
    en: {
      dp__apply: 'Apply',
      dp__cancel: 'Cancel',
    },
    uk: {
      dp__apply: 'Застосувати',
      dp__cancel: 'Скасувати',
    },
  },
});

const app = createApp({
  // something vue options here ...
});

app.use(i18n);
app.mount('#app');

If you are NOT using vue-i18n, you only need to pass the appropriate props to the component (you can find them at the link)