fix value setting from initialDate and add rich change event, close #127

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:
 

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();
   }