Localize calendar date pickers to the active UI locale

lang/ar/common.php

@@ -35,7 +35,10 @@
         'empty' => 'لم يتم العثور على منطقة زمنية',
     ],
 
+    'just_now' => 'الآن',
+
     'date_picker' => [
+        'label' => 'منتقي التاريخ',
         'select' => 'اختر التاريخ',
     ],
 

lang/de/common.php

@@ -35,7 +35,10 @@
         'empty' => 'Keine Zeitzone gefunden',
     ],
 
+    'just_now' => 'Gerade eben',
+
     'date_picker' => [
+        'label' => 'Datumsauswahl',
         'select' => 'Datum auswählen',
     ],
 

lang/el/common.php

@@ -35,7 +35,10 @@
         'empty' => 'Δεν βρέθηκε ζώνη ώρας',
     ],
 
+    'just_now' => 'Μόλις τώρα',
+
     'date_picker' => [
+        'label' => 'Επιλογή ημερομηνίας',
         'select' => 'Επιλογή ημερομηνίας',
     ],
 

lang/en/common.php

@@ -35,7 +35,10 @@
         'empty' => 'No timezone found',
     ],
 
+    'just_now' => 'Just now',
+
     'date_picker' => [
+        'label' => 'Date picker',
         'select' => 'Select date',
     ],
 

lang/es/common.php

@@ -35,7 +35,10 @@
         'empty' => 'No se encontró zona horaria',
     ],
 
+    'just_now' => 'Justo ahora',
+
     'date_picker' => [
+        'label' => 'Selector de fecha',
         'select' => 'Seleccionar fecha',
     ],
 

lang/fr/common.php

@@ -35,7 +35,10 @@
         'empty' => 'Aucun fuseau horaire trouvé',
     ],
 
+    'just_now' => 'À l’instant',
+
     'date_picker' => [
+        'label' => 'Sélecteur de date',
         'select' => 'Sélectionner une date',
     ],
 

lang/it/common.php

@@ -35,7 +35,10 @@
         'empty' => 'Nessun fuso orario trovato',
     ],
 
+    'just_now' => 'Proprio ora',
+
     'date_picker' => [
+        'label' => 'Selettore data',
         'select' => 'Seleziona data',
     ],
 

lang/ja/common.php

@@ -35,7 +35,10 @@
         'empty' => 'タイムゾーンが見つかりません',
     ],
 
+    'just_now' => 'たった今',
+
     'date_picker' => [
+        'label' => '日付ピッカー',
         'select' => '日付を選択',
     ],
 

lang/ko/common.php

@@ -35,7 +35,10 @@
         'empty' => '시간대를 찾을 수 없습니다',
     ],
 
+    'just_now' => '방금',
+
     'date_picker' => [
+        'label' => '날짜 선택기',
         'select' => '날짜 선택',
     ],
 

lang/nl/common.php

@@ -35,7 +35,10 @@
         'empty' => 'Geen tijdzone gevonden',
     ],
 
+    'just_now' => 'Zojuist',
+
     'date_picker' => [
+        'label' => 'Datumperkiezer',
         'select' => 'Datum selecteren',
     ],
 

lang/pl/common.php

@@ -35,7 +35,10 @@
         'empty' => 'Nie znaleziono strefy czasowej',
     ],
 
+    'just_now' => 'Właśnie teraz',
+
     'date_picker' => [
+        'label' => 'Wybór daty',
         'select' => 'Wybierz datę',
     ],
 

lang/pt-BR/common.php

@@ -35,7 +35,10 @@
         'empty' => 'Fuso horário não encontrado',
     ],
 
+    'just_now' => 'Agora mesmo',
+
     'date_picker' => [
+        'label' => 'Seletor de data',
         'select' => 'Selecionar data',
     ],
 

lang/ru/common.php

@@ -35,7 +35,10 @@
         'empty' => 'Часовой пояс не найден',
     ],
 
+    'just_now' => 'Только что',
+
     'date_picker' => [
+        'label' => 'Выбор даты',
         'select' => 'Выберите дату',
     ],
 

lang/tr/common.php

@@ -35,7 +35,10 @@
         'empty' => 'Saat dilimi bulunamadı',
     ],
 
+    'just_now' => 'Az önce',
+
     'date_picker' => [
+        'label' => 'Tarih seçici',
         'select' => 'Tarih seç',
     ],
 

lang/uk/common.php

@@ -35,7 +35,10 @@
         'empty' => 'Часовий пояс не знайдено',
     ],
 
+    'just_now' => 'Щойно',
+
     'date_picker' => [
+        'label' => 'Вибір дати',
         'select' => 'Виберіть дату',
     ],
 

lang/zh/common.php

@@ -35,7 +35,10 @@
         'empty' => '未找到时区',
     ],
 
+    'just_now' => '刚刚',
+
     'date_picker' => [
+        'label' => '日期选择器',
         'select' => '选择日期',
     ],
 

resources/js/components/DatePicker.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { parseDate } from '@internationalized/date';
 import { IconCalendar } from '@tabler/icons-vue';
+import { trans } from 'laravel-vue-i18n';
 import { ref, watch, computed } from 'vue';
 
 import { Button } from '@/components/ui/button';
@@ -17,6 +18,7 @@ import {
     SelectTrigger,
     SelectValue,
 } from '@/components/ui/select';
+import { useCalendarLocale } from '@/composables/useCalendarLocale';
 import dayjs from '@/dayjs';
 
 const props = defineProps({
@@ -51,6 +53,8 @@ const emit = defineEmits<{
     'update:modelValue': [value: string | null];
 }>();
 
+const calendarLocale = useCalendarLocale();
+
 // Parse input value into date
 const parseInput = (value: string) => {
     if (!value) return undefined;
@@ -156,7 +160,7 @@ watch(internalDate, (newDate) => {
     }
 });
 
-// Display string for the button
+// Display string for the button — LL/LLL follow the active dayjs locale.
 const displayText = computed(() => {
     if (!props.modelValue || !dayjs(props.modelValue).isValid()) {
         return null;
@@ -165,10 +169,10 @@ const displayText = computed(() => {
     const parsed = dayjs(props.modelValue);
 
     if (props.showTime) {
-        return parsed.format('MMM D, YYYY [at] HH:mm');
+        return parsed.format('LLL');
     }
 
-    return parsed.format('MMM D, YYYY');
+    return parsed.format('LL');
 });
 </script>
 
@@ -182,8 +186,14 @@ const displayText = computed(() => {
             </Button>
         </PopoverTrigger>
         <PopoverContent class="w-auto p-0" :align="align">
-            <Calendar v-model="internalDate as any" :placeholder="(internalDate as any)" layout="month-and-year" locale="en"
-                calendar-label="Date picker" initial-focus />
+            <Calendar
+                v-model="internalDate as any"
+                :placeholder="(internalDate as any)"
+                layout="month-and-year"
+                :locale="calendarLocale"
+                :calendar-label="trans('common.date_picker.label')"
+                initial-focus
+            />
             <!-- Time Picker -->
             <div v-if="showTime" class="border-t-2 border-foreground/10 p-3">
                 <div class="flex items-center gap-2">
@@ -212,4 +222,4 @@ const displayText = computed(() => {
             </div>
         </PopoverContent>
     </Popover>
-</template>
+</template>

resources/js/components/automations/AutomationRunsChart.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import { CurveType } from '@unovis/ts';
 import { VisArea, VisAxis, VisCrosshair, VisLine, VisTooltip, VisXYContainer } from '@unovis/vue';
-import { getActiveLanguage } from 'laravel-vue-i18n';
 
-import dayjs from '@/dayjs';
+import date from '@/date';
 
 type Point = { date: string; started: number; completed: number; failed: number };
 
@@ -15,22 +14,19 @@ const seriesColors = {
     failed: '#ef4444',
 };
 
-// English puts the month first (MM/DD); pt-BR and es read day first (DD/MM).
-const dayMonthFormat = getActiveLanguage().toLowerCase().startsWith('en') ? 'MM/DD' : 'DD/MM';
-
 const x = (_d: Point, i: number) => i;
 const yStarted = (d: Point) => d.started;
 const yCompleted = (d: Point) => d.completed;
 const yFailed = (d: Point) => d.failed;
 
 const xTickFormat = (value: number): string => {
     const point = props.data[Math.round(value)];
-    return point ? dayjs(point.date).format(dayMonthFormat) : '';
+    return point ? date.formatMonthDay(point.date) : '';
 };
 
 const tooltipTemplate = (d: Point): string =>
     `<div style="font-size:12px;line-height:1.5">
-        <div style="font-weight:600;margin-bottom:2px">${dayjs(d.date).format(`${dayMonthFormat}/YYYY`)}</div>
+        <div style="font-weight:600;margin-bottom:2px">${date.formatMonthDayYear(d.date)}</div>
         <div style="color:${seriesColors.started}">● started: ${d.started}</div>
         <div style="color:${seriesColors.completed}">● completed: ${d.completed}</div>
         <div style="color:${seriesColors.failed}">● failed: ${d.failed}</div>

resources/js/components/posts/PickTimePopover.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import { parseDate } from '@internationalized/date';
+import { trans } from 'laravel-vue-i18n';
 import { computed, ref, watch } from 'vue';
 
 import { Button } from '@/components/ui/button';
 import { Calendar } from '@/components/ui/calendar';
 import { Dialog, DialogContent, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { useCalendarLocale } from '@/composables/useCalendarLocale';
 import date from '@/date';
 import dayjs from '@/dayjs';
 
@@ -15,6 +17,7 @@ const props = defineProps<{
     showRemove?: boolean;
 }>();
 
+const calendarLocale = useCalendarLocale();
 const timezoneAbbr = date.getTimezoneAbbr();
 
 const emit = defineEmits<{
@@ -95,7 +98,13 @@ const remove = () => {
             <DialogTitle class="sr-only">{{ $t('posts.edit.pick_time') }}</DialogTitle>
 
             <div class="flex justify-center px-3 pt-3">
-                <Calendar v-model="internalDate as any" layout="month-and-year" locale="en" calendar-label="Pick a date" initial-focus />
+                <Calendar
+                    v-model="internalDate as any"
+                    layout="month-and-year"
+                    :locale="calendarLocale"
+                    :calendar-label="trans('common.date_picker.label')"
+                    initial-focus
+                />
             </div>
 
             <div class="border-t p-3">

resources/js/components/posts/editor/CommentsTab.vue

@@ -107,7 +107,7 @@ const commentsByDay = computed((): DayGroup[] => {
             ? trans('comments.today')
             : day === yesterday
               ? trans('comments.yesterday')
-              : dayjs(day).format('D MMM YYYY'),
+              : date.formatLocalDate(day),
         comments: items,
     }));
 });

resources/js/components/posts/editor/PostEditorTabs.vue

@@ -66,6 +66,7 @@ const props = defineProps<{
     isReadOnly: boolean;
     authUserId: string;
     initialHighlightCommentId: string | null;
+    postedAt?: string | null;
 }>();
 
 const activeTab = defineModel<string>('activeTab', { required: true });
@@ -104,6 +105,7 @@ defineExpose({
                 :media="media"
                 :platform-content-types="platformContentTypes"
                 :platform-meta="platformMeta"
+                :posted-at="postedAt"
             />
         </TabsContent>
 

resources/js/components/posts/editor/PreviewTab.vue

@@ -32,6 +32,7 @@ const props = defineProps<{
     media: MediaItem[];
     platformContentTypes: Record<string, string>;
     platformMeta?: Record<string, Record<string, any>>;
+    postedAt?: string | null;
 }>();
 
 const getPlatformAvatar = (pp: PostPlatform): string | null => pp.social_account?.avatar_url ?? pp.platform_avatar ?? null;
@@ -103,6 +104,7 @@ const activeContentType = computed((): string | undefined => {
                     :social-account="activePlatform.social_account"
                     :content-type="activeContentType"
                     :meta="platformMeta?.[activePlatform.id] ?? {}"
+                    :posted-at="postedAt"
                 />
             </PhoneMockup>
             <div v-else class="flex flex-col items-center gap-3 text-center">

resources/js/components/posts/previews/BlueskyPreview.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { toRef } from 'vue';
+import { computed, toRef } from 'vue';
 
 import LinkCard from "@/components/posts/previews/LinkCard.vue";
 import VideoPreview from "@/components/posts/previews/VideoPreview.vue";
 import { useLinkCard } from '@/composables/useLinkCard';
 import { isVideoMedia } from '@/composables/useMedia';
+import date from '@/date';
 import type { MediaItem } from '@/types/media';
 
 interface SocialAccount {
@@ -19,10 +20,13 @@ interface Props {
     socialAccount: SocialAccount;
     content: string;
     media: MediaItem[];
+    postedAt?: string | null;
 }
 
 const props = defineProps<Props>();
 
+const postedAtLabel = computed(() => date.formatBlueskyPreview(props.postedAt));
+
 const { card: linkCard, loading: linkCardLoading } = useLinkCard(
     toRef(props, 'content'),
     toRef(props, 'media'),
@@ -117,7 +121,7 @@ const { card: linkCard, loading: linkCardLoading } = useLinkCard(
 
                 <!-- Timestamp -->
                 <div class="mt-3 text-[13px] text-neutral-500 dark:text-[#7b8d9e]">
-                    4:18 PM · Jan 21, 2026
+                    {{ postedAtLabel }}
                 </div>
             </div>