feat(useDateFormat): locales is now reactive (#3907)

OrbisK · antfu · web-flow · commit 4a7a8ed9cd28 · 2024-07-17T13:27:24.000Z
Co-authored-by: Anthony Fu &lt;anthonyfu117@hotmail.com&gt;
diff --git a/packages/shared/useDateFormat/demo.vue b/packages/shared/useDateFormat/demo.vue
@@ -2,18 +2,36 @@
 import { ref } from 'vue'
 import { useDateFormat, useNow } from '@vueuse/core'
 
-const formatter = ref('YYYY-MM-DD HH:mm:ss')
-const formatted = useDateFormat(useNow(), formatter)
+const formatter = ref('dddd YYYY-MM-DD HH:mm:ss')
+const lang = ref('en-US')
+const formatted = useDateFormat(useNow(), formatter, { locales: lang })
 </script>
 
 <template>
   <p class="text-20px font-bold text-emerald-500">
     {{ formatted }}
   </p>
-  <div class="flex items-center">
+  <p class="text-20px font-bold text-emerald-500">
+    {{ locale }}
+  </p>
+  <div class="flex flex-col">
     <span class="mr-5px text-18px">
       Formatter Editor :
     </span>
     <input v-model="formatter" type="text">
+    <div space-x-4>
+      <label class="radio">
+        <input v-model="lang" value="en-US" type="radio">
+        <span>English (US)</span>
+      </label>
+      <label class="radio">
+        <input v-model="lang" value="fr" type="radio">
+        <span>French</span>
+      </label>
+      <label class="radio">
+        <input v-model="lang" value="de" type="radio">
+        <span>German</span>
+      </label>
+    </div>
   </div>
 </template>
diff --git a/packages/shared/useDateFormat/index.ts b/packages/shared/useDateFormat/index.ts
@@ -10,7 +10,7 @@ export interface UseDateFormatOptions {
    *
    * [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument).
    */
-  locales?: Intl.LocalesArgument
+  locales?: MaybeRefOrGetter<Intl.LocalesArgument>
 
   /**
    * A custom function to re-modify the way to display meridiem
@@ -53,8 +53,8 @@ export function formatDate(date: Date, formatStr: string, options: UseDateFormat
     M: () => month + 1,
     Mo: () => formatOrdinal(month + 1),
     MM: () => `${month + 1}`.padStart(2, '0'),
-    MMM: () => date.toLocaleDateString(options.locales, { month: 'short' }),
-    MMMM: () => date.toLocaleDateString(options.locales, { month: 'long' }),
+    MMM: () => date.toLocaleDateString(toValue(options.locales), { month: 'short' }),
+    MMMM: () => date.toLocaleDateString(toValue(options.locales), { month: 'long' }),
     D: () => String(days),
     Do: () => formatOrdinal(days),
     DD: () => `${days}`.padStart(2, '0'),
@@ -72,9 +72,9 @@ export function formatDate(date: Date, formatStr: string, options: UseDateFormat
     ss: () => `${seconds}`.padStart(2, '0'),
     SSS: () => `${milliseconds}`.padStart(3, '0'),
     d: () => day,
-    dd: () => date.toLocaleDateString(options.locales, { weekday: 'narrow' }),
-    ddd: () => date.toLocaleDateString(options.locales, { weekday: 'short' }),
-    dddd: () => date.toLocaleDateString(options.locales, { weekday: 'long' }),
+    dd: () => date.toLocaleDateString(toValue(options.locales), { weekday: 'narrow' }),
+    ddd: () => date.toLocaleDateString(toValue(options.locales), { weekday: 'short' }),
+    dddd: () => date.toLocaleDateString(toValue(options.locales), { weekday: 'long' }),
     A: () => meridiem(hours, minutes),
     AA: () => meridiem(hours, minutes, false, true),
     a: () => meridiem(hours, minutes, true),
