fix: fix locale in DatePicker (#6958)

Author: asbiin

app/Models/User.php

@@ -13,6 +13,7 @@
 use Illuminate\Database\Eloquent\Relations\HasMany;
 use Illuminate\Foundation\Auth\User as Authenticatable;
 use Illuminate\Notifications\Notifiable;
+use Illuminate\Support\Str;
 use Laravel\Fortify\TwoFactorAuthenticatable;
 use Laravel\Sanctum\HasApiTokens;
 use LaravelWebauthn\WebauthnAuthenticatable;
@@ -125,6 +126,7 @@ class User extends Authenticatable implements HasLocalePreference, MustVerifyEma
         'email',
         'help_shown',
         'locale',
+        'locale_ietf',
         'is_account_administrator',
         'timezone',
     ];
@@ -136,6 +138,7 @@ class User extends Authenticatable implements HasLocalePreference, MustVerifyEma
      */
     protected $appends = [
         'name',
+        'locale_ietf',
     ];
 
     /**
@@ -230,6 +233,20 @@ protected function name(): Attribute
         );
     }
 
+    /**
+     * Get the locale of the user in the IETF format.
+     *
+     * @return Attribute<string,never>
+     */
+    protected function localeIetf(): Attribute
+    {
+        return Attribute::make(
+            get: function ($value, $attributes) {
+                return isset($attributes['locale']) ? Str::replace('_', '-', $attributes['locale']) : null;
+            }
+        );
+    }
+
     /**
      * Get the contact of the user in the given vault.
      * All users have a contact in the vaults.

resources/js/Pages/Vault/Contact/ImportantDates/Partials/CreateOrEditImportantDate.vue

@@ -156,7 +156,7 @@ defineExpose({
             v-model.string="form.date"
             class="inline-block h-full"
             :masks="masks"
-            :locale="$page.props.auth.user?.locale"
+            :locale="$page.props.auth.user?.locale_ietf"
             :is-dark="isDark()"
             :update-on-input="false">
             <template #default="{ inputValue, inputEvents }">

resources/js/Pages/Vault/Dashboard/Partials/MoodTrackingEvents.vue

@@ -163,7 +163,7 @@ const submit = () => {
             :timezone="'UTC'"
             class="inline-block h-full"
             :masks="masks"
-            :locale="$page.props.auth.user?.locale"
+            :locale="$page.props.auth.user?.locale_ietf"
             :is-dark="isDark()">
             <template #default="{ inputValue, inputEvents }">
               <input

resources/js/Pages/Vault/Journal/Post/Edit.vue

@@ -378,7 +378,7 @@ const destroy = () => {
             <DatePicker
               v-model.string="form.date"
               :masks="masks"
-              :locale="$page.props.auth.user?.locale"
+              :locale="$page.props.auth.user?.locale_ietf"
               class="mb-6 inline-block">
               <template #default="{ inputValue, inputEvents }">
                 <input

resources/js/Shared/Modules/Calls.vue

@@ -194,7 +194,7 @@ const destroy = (call) => {
               v-model.string="form.called_at"
               class="inline-block h-full"
               :masks="masks"
-              :locale="$page.props.auth.user?.locale"
+              :locale="$page.props.auth.user?.locale_ietf"
               :is-dark="isDark()">
               <template #default="{ inputValue, inputEvents }">
                 <input

resources/js/Shared/Modules/CreateLifeEvent.vue

@@ -268,7 +268,7 @@ const store = () => {
             :timezone="'UTC'"
             class="inline-block h-full"
             :masks="masks"
-            :locale="$page.props.auth.user?.locale"
+            :locale="$page.props.auth.user?.locale_ietf"
             :is-dark="isDark()">
             <template #default="{ inputValue, inputEvents }">
               <input

resources/js/Shared/Modules/Loans.vue

@@ -268,7 +268,7 @@ const toggle = (loan) => {
               v-model.string="form.loaned_at"
               class="inline-block h-full"
               :masks="masks"
-              :locale="$page.props.auth.user?.locale"
+              :locale="$page.props.auth.user?.locale_ietf"
               :is-dark="isDark()">
               <template #default="{ inputValue, inputEvents }">
                 <input
@@ -492,7 +492,7 @@ const toggle = (loan) => {
                 v-model.string="form.loaned_at"
                 class="inline-block h-full"
                 :masks="masks"
-                :locale="$page.props.auth.user?.locale"
+                :locale="$page.props.auth.user?.locale_ietf"
                 :is-dark="isDark()">
                 <template #default="{ inputValue, inputEvents }">
                   <input

resources/js/Shared/Modules/Reminders.vue

@@ -195,7 +195,7 @@ const destroy = (reminder) => {
               v-model.string="form.date"
               class="inline-block h-full"
               :masks="masks"
-              :locale="$page.props.auth.user?.locale"
+              :locale="$page.props.auth.user?.locale_ietf"
               :is-dark="isDark()">
               <template #default="{ inputValue, inputEvents }">
                 <input
@@ -402,7 +402,7 @@ const destroy = (reminder) => {
                     v-model.string="form.date"
                     class="inline-block h-full"
                     :masks="masks"
-                    :locale="$page.props.auth.user?.locale"
+                    :locale="$page.props.auth.user?.locale_ietf"
                     :is-dark="isDark()">
                     <template #default="{ inputValue, inputEvents }">
                       <input

resources/js/Shared/Modules/TaskItems/CreateOrEditTask.vue

@@ -114,7 +114,7 @@ defineExpose({
           v-model.string="form.due_at"
           class="inline-block h-full"
           :masks="masks"
-          :locale="$page.props.auth.user?.locale"
+          :locale="$page.props.auth.user?.locale_ietf"
           :is-dark="isDark()">
           <template #default="{ inputValue, inputEvents }">
             <input class="rounded border bg-white px-2 py-1 dark:bg-gray-900" :value="inputValue" v-on="inputEvents" />