35 lines
1.2 KiB
Svelte
35 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
import 'dayjs/locale/th.js';
|
|
import 'dayjs/locale/zh-cn.js';
|
|
import 'dayjs/locale/es.js';
|
|
import 'dayjs/locale/ar-dz.js';
|
|
// มันรองรับ พ.ศ. ใน dayjs แต่ใน velte-calendar ไม่ได้เอาไปใช้ ยังหาวิธีแก้หัวปฎิทินไม่ได้ยังเป็น พ.ศ.
|
|
import buddhistEra from 'dayjs/plugin/buddhistEra'
|
|
import dayjs from 'dayjs';
|
|
dayjs.extend(buddhistEra)
|
|
import { InlineCalendar, Swappable, themes } from 'svelte-calendar';
|
|
import { onDestroy } from 'svelte';
|
|
|
|
const locales = ['th','en', 'es', 'zh-cn', 'ar-dz'];
|
|
let format = 'DD/MM/BBBB'
|
|
let locale = 'th';
|
|
|
|
$: dayjs.locale(locale);
|
|
|
|
onDestroy(() => dayjs.locale('en'));
|
|
</script>
|
|
|
|
|
|
<h1 class="text-4xl">การสอบแข่งขัน</h1>
|
|
<!-- note: Locale is not reactive -->
|
|
<Swappable value={{ locale }} vertical={false} >
|
|
<InlineCalendar theme={themes.light} {format} />
|
|
</Swappable>
|
|
|
|
<div class="button-group">
|
|
{#each locales as loc}
|
|
<button on:click={() => (locale = loc)} class:selected={locale === loc}>
|
|
{loc}
|
|
</button> |
|
|
{/each}
|
|
</div>
|