Швидкий початок

У цьому розділі описано, як підключити та налаштувати Vue3DateTimePicker

Використання

ПОПЕРЕДЖЕННЯ

Цей пакет не постачається разом з шрифтами, їх потрібно підключати окремо. (За замовчуванням пакунок очікує шрифт Roboto)

Ви можете підключити компоненти глобально

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');

А також ви можете підключити компоненти локально

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>

Локалізація

Локалізація в цьому пакеті використовує два підходи, з vue-i18n і без нього

ІНФОРМАЦІЯ

Місяці, дні тижня тощо перекладаються за допомогою Intl.DateTimeFormat, а мова отримується з i18n.locale або props.locale

Якщо ви використовуєте vue-i18n, вам потрібно лише додати певний список перекладів, який наведено нижче

{
  "dp__apply": "Apply", // Кнопка підтвердження внизу поповера
  "dp__cancel": "Cancel" // Кнопка скасування внизу поповера
}

Приклад додавання до опцій vue-i18n:

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');

Якщо ви НЕ використовуєте vue-i18n, вам потрібно лише передати компоненту відповідні пропси (їх можна знайти за посиланням)