fix(limel-date-picker): keep formatted value in sync

fix #295

src/components/date-picker/date-picker.tsx

@@ -5,6 +5,7 @@ import {
     EventEmitter,
     Listen,
     Prop,
+    State,
 } from '@stencil/core';
 
 import { Translations } from '../../global/translations';
@@ -89,11 +90,18 @@ export class DatePicker {
     @Event()
     private change: EventEmitter;
 
+    @State()
+    private formattedValue: string;
+
     private picker: Picker;
 
     private container: HTMLElement;
     private input: HTMLElement;
 
+    constructor() {
+        this.handleChange = this.handleChange.bind(this);
+    }
+
     public componentWillLoad() {
         switch (this.type) {
             case 'date':
@@ -165,23 +173,22 @@ export class DatePicker {
         this.container = this.host.shadowRoot.querySelector('.container');
 
         this.picker.init(this.input, this.container, this.value);
+        this.formattedValue = this.picker.formatDate(this.value);
     }
 
     public componentDidUnload() {
         this.picker.destroy();
     }
 
     public render() {
-        const formattedValue = this.picker.formatDate(this.value);
-
         return (
             <div class="container">
                 <limel-input-field
                     disabled={this.disabled}
                     invalid={this.invalid}
                     label={this.label}
                     required={this.required}
-                    value={formattedValue}
+                    value={this.formattedValue}
                     onChange={this.handleChange}
                 />
             </div>
@@ -195,5 +202,6 @@ export class DatePicker {
 
     private handleChange(event) {
         event.stopPropagation();
+        this.formattedValue = event.detail;
     }
 }