DatePicker rework (#737)

* fix(date-picker): append calendar to date picker element #345

Fixes #345

* fix(date-picker): do not import rangePlugin from esm folder

* fix(date-picker): correctly type change event for single/range types

* feat(date-picker): add valueFrom, valueTo for range datepicker

* docs(date-picker): add range type example

* docs(date-picker): extract range example to iframe

* docs(date-picker): extract single type to iframe

src/DatePicker/DatePickerInput.svelte

@@ -60,11 +60,14 @@
     add,
     hasCalendar,
     declareRef,
+    inputIds,
     updateValue,
     blurInput,
     openCalendar,
     focusCalendar,
     inputValue,
+    inputValueFrom,
+    inputValueTo,
   } = getContext("DatePicker");
 
   add({ id, labelText });
@@ -105,7 +108,11 @@
       pattern="{pattern}"
       disabled="{disabled}"
       {...$$restProps}
-      value="{!$range ? $inputValue : undefined}"
+      value="{$range
+        ? $inputIds.indexOf(id) === 0
+          ? $inputValueFrom
+          : $inputValueTo
+        : $inputValue}"
       class:bx--date-picker__input="{true}"
       class:bx--date-picker__input--invalid="{invalid}"
       class="{size && `bx--date-picker__input--${size}`}"