From f68dacbf0ec81e6cca3ac0923d157a381ddc7f74 Mon Sep 17 00:00:00 2001
From: Abdelrahman Awad <me@awad.dev>
Date: Thu, 20 Feb 2025 00:39:17 +0200
Subject: [PATCH] fix: switch to EG locale in example cause its my country

---
 packages/playground/src/App.vue                | 18 +++---------------
 .../playground/src/components/DateField.vue    |  2 ++
 2 files changed, 5 insertions(+), 15 deletions(-)

diff --git a/packages/playground/src/App.vue b/packages/playground/src/App.vue
index 8befe958..cf768d80 100644
--- a/packages/playground/src/App.vue
+++ b/packages/playground/src/App.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import DateField from '@/components/DateField.vue';
 import Calendar from '@/components/Calendar.vue';
+import { createCalendar, IslamicUmalquraCalendar } from '@internationalized/date';
+const calendar = createCalendar('islamic-umalqura');
 
 // You need to be careful with the time component of the date object.
 // JS date objects fills the date time with the current time component.
@@ -11,20 +13,6 @@ const max = new Date('2025-01-20');
 
 <template>
   <div class="flex flex-col gap-4">
-    <!-- <DateField
-      name="date"
-      label="Date"
-      :format-options="{
-        day: '2-digit',
-        month: 'numeric',
-        year: 'numeric',
-        hour: '2-digit',
-        hour12: true,
-        minute: '2-digit',
-        second: '2-digit',
-      }"
-    /> -->
-
-    <Calendar label="Calendar" :value="value" readonly />
+    <DateField label="Hijri Date" :value="new Date('2025-02-11')" :calendar="calendar" locale="ar-EG" />
   </div>
 </template>
diff --git a/packages/playground/src/components/DateField.vue b/packages/playground/src/components/DateField.vue
index b6531eef..3c578b38 100644
--- a/packages/playground/src/components/DateField.vue
+++ b/packages/playground/src/components/DateField.vue
@@ -46,6 +46,8 @@ const { pickerProps, pickerTriggerProps } = usePicker({
 </template>
 
 <style scoped lang="postcss">
+@reference "../style.css";
+
 .InputDate {
   font-family: 'Monaspace Neon Var';
   @apply relative w-full;