From 76069227c396efd8de6e7b66ac0b21c2667c5f22 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20Sko=C4=8D=C3=ADk?= <mskocik@gmail.com>
Date: Sat, 30 Sep 2023 19:11:33 +0200
Subject: [PATCH] fix value setting from initialDate and add rich change event,
 close #127

---
 src/documentation/06-events/page.svx   | 13 ++++++++++++-
 src/lib/components/SveltyPicker.svelte |  9 +++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/documentation/06-events/page.svx b/src/documentation/06-events/page.svx
index 1bf8c27..23836cc 100644
--- a/src/documentation/06-events/page.svx
+++ b/src/documentation/06-events/page.svx
@@ -2,10 +2,21 @@
 title: Events
 ---
 
-Component emits `input`, `change` and `blur` events.
+Component emits `input`, `change`, `dateChange` and `blur` events.
 
 - `input` is dispatched on `<input>` element therefore you can get current value like from every native event:
 - `change` event is using Svelte's `eventDispatcher`, therefore triggered event contains `detail` property
+- `dateChange` event is dispatched on date change as well as `change` event, but with more data on `detail` property:
+
+```js
+{   // event.detail property
+    value: string | string[] | null     // array for range
+    dateValue: Date | Date[] | null     // array for range
+    displayValue: string
+    valueFormat: string
+    displayFormat: string
+}
+```
 
 For custom element:
 
diff --git a/src/lib/components/SveltyPicker.svelte b/src/lib/components/SveltyPicker.svelte
index 12e3c8a..a1f5466 100644
--- a/src/lib/components/SveltyPicker.svelte
+++ b/src/lib/components/SveltyPicker.svelte
@@ -90,6 +90,8 @@
   const dispatch = createEventDispatcher();
 
   let { valueArray, prevValue, innerDates } = initProps(value, initialDate, format, i18n, formatType);
+  // properly set value from initialDate
+  if (!value && initialDate) value = isRange ? valueArray : valueArray[0];
   let currentFormat = format;
   let isFocused = pickerOnly;
   let undoHistory = [...valueArray];
@@ -325,6 +327,13 @@
     isDirty = computeDirty(valueArray);
     dispatchInputEvent(true);
     dispatch("change", isRange ? valueArray : (valueArray[0] || null));    // change is dispatched on user interaction
+    dispatch("dateChange", {
+      value: isRange ? valueArray : (valueArray[0] || null),
+      dateValue: isRange ? innerDates : (innerDates[0] || null),
+      displayValue: displayValue,
+      valueFormat: format,
+      displayFormat: displayFormat
+    });
     doResetView && resetView();
   }