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 :locale="locale" :value="[from, to]" />
</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;
}

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;
}
// #endregion js
</script>

<template>
  <!-- #region html -->
  <div class="text-center">
    <timered-counter-datetime-duration :locale="locale" :value="[from, to]" />
  </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 locale-number :locale="locale" :value="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;
}

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;
}
// #endregion js
</script>

<template>
  <!-- #region html -->
  <div class="text-center">
    <timered-counter-number locale-number :locale="locale" :value="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>