49 lines
1.9 KiB
PHP
49 lines
1.9 KiB
PHP
<div style="padding-inline-start: 1rem; margin-inline-start: 1rem; border-inline-start: 1px solid rgb(229 231 235);">
|
|
<div
|
|
class="flex items-center gap-2 text-sm font-medium text-gray-600 dark:text-gray-400"
|
|
style="padding-block: 0.375rem;"
|
|
x-data="appClock('{{ app()->getLocale() }}')"
|
|
x-init="start()"
|
|
:dir="locale === 'fa' ? 'rtl' : 'ltr'"
|
|
>
|
|
<span x-text="weekday"></span>
|
|
<span x-text="date"></span>
|
|
<span x-text="time" class="tabular-nums"></span>
|
|
</div>
|
|
</div>
|
|
|
|
@once
|
|
<script>
|
|
function appClock(locale) {
|
|
const isPersian = locale === 'fa';
|
|
|
|
const fmt = isPersian ? {
|
|
weekday: new Intl.DateTimeFormat('fa-IR-u-ca-persian', { timeZone: 'Asia/Tehran', weekday: 'long' }),
|
|
date: new Intl.DateTimeFormat('fa-IR-u-ca-persian', { timeZone: 'Asia/Tehran', year: 'numeric', month: 'long', day: 'numeric' }),
|
|
time: new Intl.DateTimeFormat('fa-IR', { timeZone: 'Asia/Tehran', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false }),
|
|
} : {
|
|
weekday: new Intl.DateTimeFormat('en-US', { timeZone: 'Asia/Tehran', weekday: 'long' }),
|
|
date: new Intl.DateTimeFormat('en-US', { timeZone: 'Asia/Tehran', year: 'numeric', month: 'long', day: 'numeric' }),
|
|
time: new Intl.DateTimeFormat('en-US', { timeZone: 'Asia/Tehran', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false }),
|
|
};
|
|
|
|
return {
|
|
locale,
|
|
weekday: '',
|
|
date: '',
|
|
time: '',
|
|
start() {
|
|
this.tick();
|
|
setInterval(() => this.tick(), 1000);
|
|
},
|
|
tick() {
|
|
const now = new Date();
|
|
this.weekday = fmt.weekday.format(now);
|
|
this.date = fmt.date.format(now);
|
|
this.time = fmt.time.format(now);
|
|
}
|
|
};
|
|
}
|
|
</script>
|
|
@endonce
|