Localization (Internationalization)

TimeredCounter provides localization features for necessary components.

The timered-counter-number and timered-counter-datetime-duration components support localization, and you can set the localization configuration through the locale attribute.

In most cases, you only need to set the locale attribute to a language code (such as en, en-US, zh, zh-CN). TimeredCounter will internally call the Intl API to handle localization.

Datetime Duration Localization

Datetime Duration Localization

---

---

~

zh-CNzh-HKzh-TWen-USen-GBja-JPko-KRde-DEfr-FR

---

Click to view code

HTML

<div class="text-center">
  <timered-counter-datetime-duration id="locale-datetime-duration-counter"/>
</div>
<hr />
<div class="flex gap-4">
  <div>
    <input
      class="border border-solid p-1"
      v-model="from"
      type="datetime-local"
    />
    ~
    <input
      class="border border-solid p-1"
      v-model="to"
      type="datetime-local"
    />
  </div>
  <span class="flex-auto" />
  <locale-select
    class="border border-solid p-1 appearance-auto"
    v-model="locale"
  />
</div>

JS

import {onMounted, ref, watch} from "vue";
import LocaleSelect from "./LocaleSelect.vue";
import { inBrowser } from "vitepress";

const from = ref("2024-12-01T00:00:00");
const to = ref("2024-12-31T00:00:00");

const locale = ref('en-US');
if (inBrowser) {
  locale.value = navigator.language;
}

onMounted(() => watch([from, to, locale], update, { immediate: true }));
function update() {
  const _from = from.value;
  const _to = to.value;
  const _locale = locale.value;

  const counter = document.getElementById('locale-datetime-duration-counter');
  counter.value = [_from, _to];
  counter.locale = _locale;
}

All

<script setup>
// #region js
import {onMounted, ref, watch} from "vue";
import LocaleSelect from "./LocaleSelect.vue";
import { inBrowser } from "vitepress";

const from = ref("2024-12-01T00:00:00");
const to = ref("2024-12-31T00:00:00");

const locale = ref('en-US');
if (inBrowser) {
  locale.value = navigator.language;
}

onMounted(() => watch([from, to, locale], update, { immediate: true }));
function update() {
  const _from = from.value;
  const _to = to.value;
  const _locale = locale.value;

  const counter = document.getElementById('locale-datetime-duration-counter');
  counter.value = [_from, _to];
  counter.locale = _locale;
}
// #endregion js
</script>

<template>
  <!-- #region html -->
  <div class="text-center">
    <timered-counter-datetime-duration id="locale-datetime-duration-counter"/>
  </div>
  <hr />
  <div class="flex gap-4">
    <div>
      <input
        class="border border-solid p-1"
        v-model="from"
        type="datetime-local"
      />
      ~
      <input
        class="border border-solid p-1"
        v-model="to"
        type="datetime-local"
      />
    </div>
    <span class="flex-auto" />
    <locale-select
      class="border border-solid p-1 appearance-auto"
      v-model="locale"
    />
  </div>
  <!-- #endregion html -->
</template>

<style scoped></style>

LocaleSelect.vue

<script setup>
const value = defineModel("modelValue");
</script>

<template>
  <select class="border border-solid p-1 appearance-auto" v-model="value">
    <optgroup label="中文">
      <option value="zh-CN">zh-CN</option>
      <option value="zh-HK">zh-HK</option>
      <option value="zh-TW">zh-TW</option>
    </optgroup>
    <optgroup label="English">
      <option value="en-US">en-US</option>
      <option value="en-GB">en-GB</option>
    </optgroup>
    <option value="ja-JP">ja-JP</option>
    <option value="ko-KR">ko-KR</option>
    <option value="de-DE">de-DE</option>
    <option value="fr-FR">fr-FR</option>
  </select>
</template>

<style scoped></style>

Number Localization

Specifically, the timered-counter-number component also needs to set the locale-number attribute.

• You can set it to true, which will enable number localization with the default configuration.
• You can also set it to options supported by Intl.NumberFormat.

Number Localization

---

---

zh-CNzh-HKzh-TWen-USen-GBja-JPko-KRde-DEfr-FR

---

Click to view code

HTML

<div class="text-center">
  <timered-counter-number id="locale-number-counter" locale-number />
</div>
<hr />
<div class="flex gap-4">
  <input class="border border-solid p-1" v-model="number" type="number" />
  <span class="flex-auto" />
  <locale-select
    class="border border-solid p-1 appearance-auto"
    v-model="locale"
  />
</div>

JS

import {onMounted, ref, watch} from "vue";
import LocaleSelect from "./LocaleSelect.vue";
import {inBrowser} from "vitepress";

const number = ref(114514);

const locale = ref('en-US');
if (inBrowser) {
  locale.value = navigator.language;
}

onMounted(() => watch([number, locale], update, { immediate: true }));
function update() {
  const _number = number.value;
  const _locale = locale.value;

  const counter = document.getElementById('locale-number-counter');
  counter.value = _number;
  counter.locale = _locale;
}

All

<script setup>
// #region js
import {onMounted, ref, watch} from "vue";
import LocaleSelect from "./LocaleSelect.vue";
import {inBrowser} from "vitepress";

const number = ref(114514);

const locale = ref('en-US');
if (inBrowser) {
  locale.value = navigator.language;
}

onMounted(() => watch([number, locale], update, { immediate: true }));
function update() {
  const _number = number.value;
  const _locale = locale.value;

  const counter = document.getElementById('locale-number-counter');
  counter.value = _number;
  counter.locale = _locale;
}
// #endregion js
</script>

<template>
  <!-- #region html -->
  <div class="text-center">
    <timered-counter-number id="locale-number-counter" locale-number />
  </div>
  <hr />
  <div class="flex gap-4">
    <input class="border border-solid p-1" v-model="number" type="number" />
    <span class="flex-auto" />
    <locale-select
      class="border border-solid p-1 appearance-auto"
      v-model="locale"
    />
  </div>
  <!-- #endregion html -->
</template>

<style scoped></style>

LocaleSelect.vue

<script setup>
const value = defineModel("modelValue");
</script>

<template>
  <select class="border border-solid p-1 appearance-auto" v-model="value">
    <optgroup label="中文">
      <option value="zh-CN">zh-CN</option>
      <option value="zh-HK">zh-HK</option>
      <option value="zh-TW">zh-TW</option>
    </optgroup>
    <optgroup label="English">
      <option value="en-US">en-US</option>
      <option value="en-GB">en-GB</option>
    </optgroup>
    <option value="ja-JP">ja-JP</option>
    <option value="ko-KR">ko-KR</option>
    <option value="de-DE">de-DE</option>
    <option value="fr-FR">fr-FR</option>
  </select>
</template>

<style scoped></style>