fix(limel-date-picker): don't format value for native pickers

Lundalogik · Sep 10, 2019 · 6e944ed · 6e944ed
1 parent 88aa280
commit 6e944ed
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 9 deletions.
diff --git a/src/components/date-picker/date-picker.tsx b/src/components/date-picker/date-picker.tsx
@@ -169,7 +169,9 @@ export class DatePicker {
             'limel-input-field'
         );
         this.input = textfield.shadowRoot.querySelector('input');
-        const container: HTMLElement = this.host.shadowRoot.querySelector('.container');
+        const container: HTMLElement = this.host.shadowRoot.querySelector(
+            '.container'
+        );
 
         this.picker.init(this.input, container, this.value);
         this.formattedValue = this.picker.formatDate(this.value);

diff --git a/src/components/date-picker/pickers/Picker.ts b/src/components/date-picker/pickers/Picker.ts
@@ -73,6 +73,9 @@ export abstract class Picker {
     ): flatpickr.Options.Options;
 
     public formatDate(date: Date) {
+        if (this.nativePicker) {
+            return date ? JSON.stringify(date) : '';
+        }
         if (date) {
             return moment(date)
                 .locale(this.getMomentLang())
@@ -128,6 +131,7 @@ export abstract class Picker {
                         pickerDate = momentInputDate.toDate();
                         this.flatpickr.setDate(pickerDate);
                     } else {
+                        pickerDate = null;
                         this.flatpickr.clear();
                     }
                 }

diff --git a/src/examples/date-picker/date-picker.tsx b/src/examples/date-picker/date-picker.tsx
@@ -9,25 +9,25 @@ const types = ['datetime', 'date', 'time', 'week', 'month', 'quarter', 'year'];
 })
 export class DatePickerExample {
     @State()
-    private datetime = new Date('2018-12-25 16:00');
+    private datetime = new Date();
 
     @State()
-    private date = new Date('2018-12-25');
+    private date = new Date();
 
     @State()
-    private time = new Date('2018-12-25 16:00');
+    private time = new Date();
 
     @State()
-    private week = new Date('2018-12-24');
+    private week = new Date();
 
     @State()
-    private month = new Date('2018-12-01');
+    private month = new Date();
 
     @State()
-    private quarter = new Date('2018-10-01');
+    private quarter = new Date();
 
     @State()
-    private year = new Date('2018-10-01');
+    private year = new Date();
 
     public render() {
         return types.map((type: DateType) => {
@@ -44,7 +44,9 @@ export class DatePickerExample {
                     <p style={{ 'font-size': 'small' }}>
                         Value:{' '}
                         <code>
-                            {this[type] ? this[type].toString() : 'invalid'}
+                            {this[type]
+                                ? this[type].toString()
+                                : JSON.stringify(this[type])}
                         </code>
                     </p>
                 </p>