Fix datetime input bug (#999)

* fix: repair datetime input bug * fix: remove unnecessary data
swimlane · Jul 11, 2023 · 8851a1c · 8851a1c
1 parent deb613d
commit 8851a1c
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 4 deletions.
diff --git a/...s/json-editor/json-editor-flat/json-editor-node-flat/json-editor-node-flat.component.html b/...s/json-editor/json-editor-flat/json-editor-node-flat/json-editor-node-flat.component.html
@@ -118,7 +118,7 @@
                 <ngx-input
                   type="datetime-local"
                   [ngModel]="model"
-                  (ngModelChange)="updateModel($event)"
+                  (ngModelChange)="updateDateTime($event)"
                   [requiredIndicator]="false"
                   [required]="required"
                   [disabled]="isDuplicated"

diff --git a/...nts/json-editor/json-editor-flat/json-editor-node-flat/json-editor-node-flat.component.ts b/...nts/json-editor/json-editor-flat/json-editor-node-flat/json-editor-node-flat.component.ts
@@ -12,6 +12,7 @@ import {
   OnDestroy
 } from '@angular/core';
 import { JsonEditorNode } from '../../json-editor-node';
+import { DateFormatPipe } from 'ngx-moment';
 
 import { DialogService } from '../../../dialog/dialog.service';
 import { JSONEditorSchema, JSONEditorTemplateProperty, JsonSchemaDataType } from '../../json-editor.helper';
@@ -23,6 +24,7 @@ import { JSONSchema7TypeName } from 'json-schema';
   selector: 'ngx-json-editor-node-flat',
   templateUrl: './json-editor-node-flat.component.html',
   styleUrls: ['./json-editor-node-flat.component.scss'],
+  providers: [DateFormatPipe],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush
 })
@@ -71,7 +73,7 @@ export class JsonEditorNodeFlatComponent extends JsonEditorNode implements OnIni
   nodeExpandTrigger$ = new Subject<boolean>();
   private readonly unsub$: Subject<void> = new Subject();
 
-  constructor(public dialogMngr: DialogService) {
+  constructor(public dialogMngr: DialogService, private dateFormat: DateFormatPipe) {
     super(dialogMngr);
   }
 
@@ -112,4 +114,8 @@ export class JsonEditorNodeFlatComponent extends JsonEditorNode implements OnIni
       this.expanded = value;
     }
   }
+
+  updateDateTime(value: any): void {
+    this.updateDateTimeModel(value, this.dateFormat);
+  }
 }
diff --git a/projects/swimlane/ngx-ui/src/lib/components/json-editor/json-editor-node.ts b/projects/swimlane/ngx-ui/src/lib/components/json-editor/json-editor-node.ts
@@ -14,6 +14,9 @@ import {
 import { createValueForSchema, inferType, JSONEditorSchema } from './json-editor.helper';
 import { DialogComponent } from '../dialog/dialog.component';
 import { DialogService } from '../dialog/dialog.service';
+import { DateFormatPipe } from 'ngx-moment';
+
+const DATETIME_FORMAT = 'YYYY-MM-DD[T]HH:mm:ss';
 
 @Directive()
 export class JsonEditorNode implements OnInit, OnChanges {
@@ -177,6 +180,10 @@ export class JsonEditorNode implements OnInit, OnChanges {
     this.modelChange.emit(this.model);
   }
 
+  updateDateTimeModel(value: any, format: DateFormatPipe): void {
+    this.updateModel(format.transform(value, DATETIME_FORMAT));
+  }
+
   /**
    * Expand click event
    */

diff --git a/...c/lib/components/json-editor/json-editor/json-editor-node/json-editor-node.component.html b/...c/lib/components/json-editor/json-editor/json-editor-node/json-editor-node.component.html
@@ -140,7 +140,7 @@
           [placeholder]="placeholder"
           [ngModel]="model"
           [disabled]="isDuplicated"
-          (ngModelChange)="updateModel($event)"
+          (ngModelChange)="updateDateTime($event)"
           [required]="required"
         />
       </div>

diff --git a/...src/lib/components/json-editor/json-editor/json-editor-node/json-editor-node.component.ts b/...src/lib/components/json-editor/json-editor/json-editor-node/json-editor-node.component.ts
@@ -3,11 +3,13 @@ import { JsonEditorNode } from '../../json-editor-node';
 
 import { DialogService } from '../../../dialog/dialog.service';
 import { JSONEditorSchema } from '../../json-editor.helper';
+import { DateFormatPipe } from 'ngx-moment';
 
 @Component({
   selector: 'ngx-json-editor-node',
   templateUrl: 'json-editor-node.component.html',
   styleUrls: ['./json-editor-node.component.scss'],
+  providers: [DateFormatPipe],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush
 })
@@ -28,7 +30,7 @@ export class JsonEditorNodeComponent extends JsonEditorNode implements OnInit {
 
   placeholder = '';
 
-  constructor(public dialogMngr: DialogService) {
+  constructor(public dialogMngr: DialogService, private dateFormat: DateFormatPipe) {
     super(dialogMngr);
   }
 
@@ -39,4 +41,8 @@ export class JsonEditorNodeComponent extends JsonEditorNode implements OnInit {
       this.placeholder = this.schema.examples.join(', ');
     }
   }
+
+  updateDateTime(value: any): void {
+    this.updateDateTimeModel(value, this.dateFormat);
+  }
 }