fix: Date Validation fixed

jnetwork-gmbh · Nov 18, 2024 · 972db8a · 972db8a
1 parent 8214cfe
commit 972db8a
Show file tree

Hide file tree

Showing 14 changed files with 239 additions and 60 deletions.
diff --git a/ch.jnetwork.sac-controls/projects/demo-bootstrap3/src/app/datetime/datetime.component.html b/ch.jnetwork.sac-controls/projects/demo-bootstrap3/src/app/datetime/datetime.component.html
@@ -6,42 +6,123 @@ <h2>DateTime</h2>
   <sac-validationsummary></sac-validationsummary>
 
   <div ngModelGroup="Group1">
-
-
-    <sac-date name="datum1" label="Datum 1" [(ngModel)]="values.datum1"></sac-date>
-
-    <sac-date name="datum2" label="Datum 2" [(ngModel)]="values.datum2" [isrequired]="true"></sac-date>
-
-    <sac-date name="datum3" label="Datum 3 (Min 01.01.2018)" [(ngModel)]="values.datum3" mindate="01.01.2018"></sac-date>
-
-    <sac-date name="datum4" label="Datum 4 (Max 31.12.2018)" [(ngModel)]="values.datum4" maxdate="31.12.2018"></sac-date>
-
-    <sac-date name="datum5" label="Datum 5" [(ngModel)]="values.datum5" disabled="true"></sac-date>
+    <sac-date
+      name="datum1"
+      label="Datum 1"
+      [(ngModel)]="values.datum1"
+    ></sac-date>
+
+    <sac-date
+      name="datum2"
+      label="Datum 2"
+      [(ngModel)]="values.datum2"
+      [isrequired]="true"
+    ></sac-date>
+
+    <sac-date
+      name="datum3"
+      label="Datum 3 (Min 01.01.2018)"
+      [(ngModel)]="values.datum3"
+      mindate="01.01.2018"
+    ></sac-date>
+
+    <sac-date
+      name="datum4"
+      label="Datum 4 (Max 31.12.2018)"
+      [(ngModel)]="values.datum4"
+      maxdate="31.12.2018"
+    ></sac-date>
+
+    <sac-date
+      name="datum5"
+      label="Datum 5"
+      [(ngModel)]="values.datum5"
+      disabled="true"
+    ></sac-date>
 
     <sac-time name="time1" label="Zeit 1" [(ngModel)]="values.time1"></sac-time>
 
-    <sac-time name="time2" label="Zeit 2 (Min. 10:00)" [(ngModel)]="values.time2" mintime="10:00"></sac-time>
-
-    <sac-time name="time3" label="Zeit 3 (Max. 18:00)" [(ngModel)]="values.time3" maxtime="18:00"></sac-time>
-
-    <sac-time name="time4" label="Zeit 4 (10:00 - 18:00)" [(ngModel)]="values.time4" mintime="10:00" maxtime="18:00"></sac-time>
-
-    <sac-time name="time5" label="Zeit 5 (Disabled)" [(ngModel)]="values.time5" disabled="true"></sac-time>
-
-    <sac-time name="time6" label="Zeit 5 (Required)" [(ngModel)]="values.time6" [isrequired]="true"></sac-time>
-
-    <sac-datetime name="datetime1" label="Datum & Zeit 1" [(ngModel)]="values.datumzeit1"></sac-datetime>
-
-    <sac-datetime name="datetime2" label="Datum & Zeit 2 (Min. 19.08.2018 14:00)" [(ngModel)]="values.datumzeit2" mindate="19.08.2018 14:00"></sac-datetime>
-
-    <sac-datetime name="datetime3" label="Datum & Zeit 3 (Max. 19.08.2018 17:00)" [(ngModel)]="values.datumzeit3" maxdate="19.08.2018 17:00"></sac-datetime>
-
-    <sac-datetime name="datetime4" label="Datum & Zeit 4 (Required)" [(ngModel)]="values.datumzeit4" [isrequired]="true"></sac-datetime>
-
-    <sac-datetime name="datetime5" label="Datum & Zeit 5 (Disabled)" [(ngModel)]="values.datumzeit5" disabled="true"></sac-datetime>
-
-    <sac-dateselector name="selector1" dateselection="true" timeselection="true"></sac-dateselector>
-
-
+    <sac-time
+      name="time2"
+      label="Zeit 2 (Min. 10:00)"
+      [(ngModel)]="values.time2"
+      mintime="10:00"
+    ></sac-time>
+
+    <sac-time
+      name="time3"
+      label="Zeit 3 (Max. 18:00)"
+      [(ngModel)]="values.time3"
+      maxtime="18:00"
+    ></sac-time>
+
+    <sac-time
+      name="time4"
+      label="Zeit 4 (10:00 - 18:00)"
+      [(ngModel)]="values.time4"
+      mintime="10:00"
+      maxtime="18:00"
+    ></sac-time>
+
+    <sac-time
+      name="time5"
+      label="Zeit 5 (Disabled)"
+      [(ngModel)]="values.time5"
+      disabled="true"
+    ></sac-time>
+
+    <sac-time
+      name="time6"
+      label="Zeit 5 (Required)"
+      [(ngModel)]="values.time6"
+      [isrequired]="true"
+    ></sac-time>
+
+    <sac-datetime
+      name="datetime1"
+      label="Datum & Zeit 1"
+      [(ngModel)]="values.datumzeit1"
+    ></sac-datetime>
+
+    <sac-datetime
+      name="datetime2"
+      label="Datum & Zeit 2 (Min. 19.08.2018 14:00)"
+      [(ngModel)]="values.datumzeit2"
+      mindate="19.08.2018 14:00"
+    ></sac-datetime>
+
+    <sac-datetime
+      name="datetime3"
+      label="Datum & Zeit 3 (Max. 19.08.2018 17:00)"
+      [(ngModel)]="values.datumzeit3"
+      maxdate="19.08.2018 17:00"
+    ></sac-datetime>
+
+    <sac-datetime
+      name="datetime4"
+      label="Datum & Zeit 4 (Required)"
+      [(ngModel)]="values.datumzeit4"
+      [isrequired]="true"
+    ></sac-datetime>
+
+    <sac-datetime
+      name="datetime5"
+      label="Datum & Zeit 5 (Disabled)"
+      [(ngModel)]="values.datumzeit5"
+      disabled="true"
+    ></sac-datetime>
+
+    <sac-datetime
+      name="datetime6"
+      label="Datum & Zeit 6 (Required)"
+      [(ngModel)]="values.datumzeit6"
+      [isrequired]="true"
+    ></sac-datetime>
+
+    <sac-dateselector
+      name="selector1"
+      dateselection="true"
+      timeselection="true"
+    ></sac-dateselector>
   </div>
 </form>
diff --git a/ch.jnetwork.sac-controls/projects/demo-bootstrap3/src/app/datetime/datetime.component.ts b/ch.jnetwork.sac-controls/projects/demo-bootstrap3/src/app/datetime/datetime.component.ts
@@ -6,29 +6,38 @@ import { SacFormDirective } from '@simpleangularcontrols/sac-bootstrap3';
   templateUrl: './datetime.component.html',
 })
 export class DemoDatetimeComponent {
+  // #region Properties
+
+  @ViewChild('myForm') public myForm: SacFormDirective;
+
   public values: any = {
     datum1: '',
-    datum2: Date.now(),
+    datum2: new Date(Date.now()),
     datum3: '',
     datum4: '',
     datum5: '',
-    time1: '',
+    time1: new Date(Date.now()),
     time2: '',
     time3: '',
     time4: '',
-    time5: Date.now(),
+    time5: new Date(Date.now()),
     time6: '',
-    datumzeit1: Date.now(),
-    datumzeit2: '',
+    datumzeit1: new Date(Date.now()),
+    datumzeit2: '2024-11-22T17:10:00+01:00',
     datumzeit3: '',
     datumzeit4: '',
     datumzeit5: '',
+    datumzeit6: '2024-11-18T07:54:28.870Z',
   };
 
-  @ViewChild('myForm') myForm: SacFormDirective;
+  // #endregion Properties
+
+  // #region Public Methods
 
   public debugAction(): void {
     this.myForm.markAsTouched();
     alert('Action');
   }
+
+  // #endregion Public Methods
 }
diff --git a/...rk.sac-controls/projects/demo-bootstrap3/src/app/formreactive/reactiveform.component.html b/...rk.sac-controls/projects/demo-bootstrap3/src/app/formreactive/reactiveform.component.html
@@ -1,5 +1,7 @@
 <h2>Reactive Form</h2>
 
+<button (click)="change()">Patch Model</button>
+
 <div [formGroup]="baseForm" class="form-horizontal">
   <div>Full Summary</div>
   <sac-validationsummary [form]="baseForm"></sac-validationsummary>

diff --git a/...work.sac-controls/projects/demo-bootstrap3/src/app/formreactive/reactiveform.component.ts b/...work.sac-controls/projects/demo-bootstrap3/src/app/formreactive/reactiveform.component.ts
@@ -7,14 +7,16 @@ import { Validation } from '@simpleangularcontrols/sac-common';
   templateUrl: './reactiveform.component.html',
 })
 export class DemoRectiveFormComponent {
+  // #region Properties
+
   // formfield1 = new FormControl('', Validation.required('VALIDATION_ERROR_REQUIRED','VALIDATION_ERROR_SUMMARY_REQUIRED'));
-  baseForm = new FormGroup({
+  public baseForm = new FormGroup({
     inputvalue: new FormControl(''),
     checkboxvalue: new FormControl(true),
     listvalue: new FormControl(''),
     dropdownvalue: new FormControl(''),
     radiobuttonvalue: new FormControl('1'),
-    datetimevalue: new FormControl(''),
+    datetimevalue: new FormControl('2024-11-22T17:10:00+01:00'),
     partial: new FormGroup({
       part1: new FormGroup({
         inputvalue2: new FormControl(''),
@@ -28,4 +30,14 @@ export class DemoRectiveFormComponent {
       }),
     }),
   });
+
+  // #endregion Properties
+
+  // #region Public Methods
+
+  public change(): void {
+    this.baseForm.patchValue({ datetimevalue: '2024-11-23T17:11:00+01:00' });
+  }
+
+  // #endregion Public Methods
 }
diff --git a/ch.jnetwork.sac-controls/projects/demo-bootstrap4/src/app/datetime/datetime.component.html b/ch.jnetwork.sac-controls/projects/demo-bootstrap4/src/app/datetime/datetime.component.html
@@ -122,6 +122,13 @@ <h2>DateTime</h2>
       disabled="true"
     ></sac-datetime>
 
+    <sac-datetime
+      name="datetime6"
+      label="Datum & Zeit 6 (Required)"
+      [(ngModel)]="values.datumzeit6"
+      [isrequired]="true"
+    ></sac-datetime>
+
     <sac-dateselector
       name="selector1"
       dateselection="true"

diff --git a/ch.jnetwork.sac-controls/projects/demo-bootstrap4/src/app/datetime/datetime.component.ts b/ch.jnetwork.sac-controls/projects/demo-bootstrap4/src/app/datetime/datetime.component.ts
@@ -6,29 +6,38 @@ import { SacFormDirective } from '@simpleangularcontrols/sac-bootstrap4';
   templateUrl: './datetime.component.html',
 })
 export class DemoDatetimeComponent {
+  // #region Properties
+
+  @ViewChild('myForm') public myForm: SacFormDirective;
+
   public values: any = {
     datum1: '',
-    datum2: Date.now(),
+    datum2: new Date(Date.now()),
     datum3: '',
     datum4: '',
     datum5: '',
-    time1: '',
+    time1: new Date(Date.now()),
     time2: '',
     time3: '',
     time4: '',
-    time5: Date.now(),
+    time5: new Date(Date.now()),
     time6: '',
-    datumzeit1: Date.now(),
-    datumzeit2: '',
+    datumzeit1: new Date(Date.now()),
+    datumzeit2: '2024-11-22T17:10:00+01:00',
     datumzeit3: '',
     datumzeit4: '',
     datumzeit5: '',
+    datumzeit6: '2024-11-18T07:54:28.870Z',
   };
 
-  @ViewChild('myForm') myForm: SacFormDirective;
+  // #endregion Properties
+
+  // #region Public Methods
 
   public debugAction(): void {
     this.myForm.markAsTouched();
     alert('Action');
   }
+
+  // #endregion Public Methods
 }
diff --git a/...rk.sac-controls/projects/demo-bootstrap4/src/app/formreactive/reactiveform.component.html b/...rk.sac-controls/projects/demo-bootstrap4/src/app/formreactive/reactiveform.component.html
@@ -1,5 +1,7 @@
 <h2>Reactive Form</h2>
 
+<button (click)="change()">Patch Model</button>
+
 <div [formGroup]="baseForm">
   <div>Full Summary</div>
   <sac-validationsummary [form]="baseForm"></sac-validationsummary>

diff --git a/...work.sac-controls/projects/demo-bootstrap4/src/app/formreactive/reactiveform.component.ts b/...work.sac-controls/projects/demo-bootstrap4/src/app/formreactive/reactiveform.component.ts
@@ -7,14 +7,16 @@ import { Validation } from '@simpleangularcontrols/sac-common';
   templateUrl: './reactiveform.component.html',
 })
 export class DemoRectiveFormComponent {
+  // #region Properties
+
   // formfield1 = new FormControl('', Validation.required('VALIDATION_ERROR_REQUIRED','VALIDATION_ERROR_SUMMARY_REQUIRED'));
-  baseForm = new FormGroup({
+  public baseForm = new FormGroup({
     inputvalue: new FormControl(''),
     checkboxvalue: new FormControl(true),
     listvalue: new FormControl(''),
     dropdownvalue: new FormControl(''),
     radiobuttonvalue: new FormControl('1'),
-    datetimevalue: new FormControl(''),
+    datetimevalue: new FormControl('2024-11-22T17:10:00+01:00'),
     partial: new FormGroup({
       part1: new FormGroup({
         inputvalue2: new FormControl(''),
@@ -28,4 +30,14 @@ export class DemoRectiveFormComponent {
       }),
     }),
   });
+
+  // #endregion Properties
+
+  // #region Public Methods
+
+  public change(): void {
+    this.baseForm.patchValue({ datetimevalue: '2024-11-23T17:11:00+01:00' });
+  }
+
+  // #endregion Public Methods
 }
diff --git a/ch.jnetwork.sac-controls/projects/demo-bootstrap5/src/app/datetime/datetime.component.html b/ch.jnetwork.sac-controls/projects/demo-bootstrap5/src/app/datetime/datetime.component.html
@@ -122,6 +122,13 @@ <h2>DateTime</h2>
       disabled="true"
     ></sac-datetime>
 
+    <sac-datetime
+      name="datetime6"
+      label="Datum & Zeit 6 (Required)"
+      [(ngModel)]="values.datumzeit6"
+      [isrequired]="true"
+    ></sac-datetime>
+
     <sac-dateselector
       name="selector1"
       dateselection="true"