Локализация календаря

Библиотека Naive UI предоставляет мощный и гибкий компонент DatePicker, который полностью поддерживает локализацию. Управление локалью особенно важно для корректного отображения дат, дней недели, месяцев и форматов времени в соответствии с региональными стандартами.

Импорт необходимых модулей

Для работы с локализацией используется объект locale, который можно импортировать из naive-ui/es/locales. Каждый компонент, поддерживающий локаль, принимает соответствующий объект через свойство locale или через глобальный провайдер NConfigProvider.

import { createApp } from 'vue'
import { NConfigProvider, NDatePicker } from 'naive-ui'
import { dateZhCN } from 'naive-ui/es/locales'

Здесь dateZhCN содержит локаль для китайского языка. Аналогично доступны другие локали, например:

  • dateEnUS — английский (США)
  • dateJaJP — японский
  • dateRuRU — русский

Применение локали к компоненту DatePicker

Для отдельного компонента локаль можно задать напрямую через атрибут locale:

<template>
  <n-date-picker v-model="selectedDate" :locale="locale" />
</template>

<script>
import { ref } from 'vue'
import { dateRuRU } from 'naive-ui/es/locales'

export default {
  setup() {
    const selectedDate = ref(null)
    const locale = dateRuRU

    return { selectedDate, locale }
  }
}
</script>

Особенности:

  • Формат даты и названия месяцев автоматически подстраиваются под выбранную локаль.
  • Если локаль не задана, используется английский (по умолчанию).

Глобальная локализация через NConfigProvider

Для применения локали ко всей библиотеке используется компонент NConfigProvider. Это удобно, если в приложении множество компонентов, зависящих от даты или времени.

<template>
  <n-config-provider :locale="locale">
    <n-date-picker v-model="selectedDate" />
    <n-date-picker v-model="anotherDate" type="daterange" />
  </n-config-provider>
</template>

<script>
import { ref } from 'vue'
import { NConfigProvider } from 'naive-ui'
import { dateRuRU } from 'naive-ui/es/locales'

export default {
  setup() {
    const selectedDate = ref(null)
    const anotherDate = ref([null, null])
    const locale = dateRuRU

    return { selectedDate, anotherDate, locale }
  }
}
</script>

Преимущества глобального подхода:

  • Все дочерние компоненты автоматически используют заданную локаль.
  • Локаль можно легко менять динамически, что удобно для приложений с поддержкой мультиязычности.

Динамическая смена локали

Можно реализовать динамическую смену языка календаря, просто изменяя значение locale в NConfigProvider или напрямую в компоненте:

<template>
  <sel ect v-model="currentLocale" @change="changeLocale">
    <option value="ru">Русский</option>
    <option value="en">English</option>
    <option value="ja">日本語</option>
  </select>
  
  <n-config-provider :locale="locale">
    <n-date-picker v-model="date" />
  </n-config-provider>
</template>

<script>
import { ref, computed } fr om 'vue'
import { dateRuRU, dateEnUS, dateJaJP } from 'naive-ui/es/locales'

export default {
  setup() {
    const currentLocale = ref('ru')
    const date = ref(null)

    const locale = computed(() => {
      switch (currentLocale.value) {
        case 'ru': return dateRuRU
        case 'en': return dateEnUS
        case 'ja': return dateJaJP
      }
    })

    const changeLocale = () => {
      // Пересчёт автоматически происходит через computed
    }

    return { currentLocale, locale, date, changeLocale }
  }
}
</script>

Особенности русской локализации

Русская локаль (dateRuRU) учитывает следующие моменты:

  • Начало недели по стандарту ISO — с понедельника.
  • Названия месяцев и дней недели в родительном падеже для корректного отображения диапазонов.
  • Формат даты DD.MM.YYYY вместо MM/DD/YYYY.
  • Временные компоненты (time-picker) используют 24-часовой формат.

Поддержка кастомных форматов даты

Даже при использовании стандартной локали можно задавать собственный формат через format:

<n-date-picker v-model="date" :locale="dateRuRU" format="DD/MM/YYYY" />

Важно: Формат даты работает совместно с локалью и влияет только на отображение, не изменяя внутренний объект даты.

Локализация элементов диапазона и панели выбора времени

Для компонентов типа daterange и datetime-picker локаль распространяется на:

  • Кнопки подтверждения/отмены (confirm, clear)
  • Плейсхолдеры (start date, end date)
  • Подписи времени (час, минуты, секунды)

Пример:

<n-date-picker
  v-model="range"
  type="daterange"
  :locale="dateRuRU"
  :placeholder="['Начало', 'Конец']"
/>

Вывод

Naive UI обеспечивает полную интеграцию локализации для календарных компонентов. Использование глобального NConfigProvider совместно с объектами локалей позволяет легко управлять языком, форматом даты и отображением времени. Дополнительно возможно динамически менять локаль и настраивать кастомные форматы, что делает библиотеку удобной для многоязычных приложений.

Оглавление