Merge pull request #87 from belsman/fix/update-dateadapter

fix: expose a setParser method on dateAdapter class
vcl · Jul 4, 2024 · 836e9b5 · 836e9b5
2 parents 92b3409 + 83e4db3
commit 836e9b5
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 5 deletions.
diff --git a/demo/app/demos/date-picker/demo.component.html b/demo/app/demos/date-picker/demo.component.html
@@ -1,24 +1,43 @@
 <vcl-form-control-group>
   <vcl-label>Basic Date Picker</vcl-label>
-  <vcl-date-picker [placeholder]="datePattern" [(ngModel)]="date"></vcl-date-picker>
+  <vcl-date-picker
+    [placeholder]="datePattern"
+    [(ngModel)]="date"></vcl-date-picker>
 </vcl-form-control-group>
 
 <vcl-form-control-group>
   <vcl-label>Month Picker</vcl-label>
-  <vcl-date-picker [placeholder]="monthPattern" [(ngModel)]="month" pick="month"></vcl-date-picker>
+  <vcl-date-picker
+    [placeholder]="monthPattern"
+    [(ngModel)]="month"
+    pick="month"></vcl-date-picker>
 </vcl-form-control-group>
 
 <vcl-form-control-group>
   <vcl-label>Month Picker with custom Display Format</vcl-label>
-  <vcl-date-picker [placeholder]="monthPattern" [(ngModel)]="monthAlt" pick="month" displayFormat="yearMonthLong"></vcl-date-picker>
+  <vcl-date-picker
+    [placeholder]="monthPattern"
+    [(ngModel)]="monthAlt"
+    pick="month"
+    displayFormat="yearMonthLong"></vcl-date-picker>
 </vcl-form-control-group>
 
 <vcl-form-control-group>
   <vcl-label>Time Picker</vcl-label>
-  <vcl-date-picker [placeholder]="timePattern" [(ngModel)]="time" pick="time"></vcl-date-picker>
+  <vcl-date-picker
+    [placeholder]="timePattern"
+    [(ngModel)]="time"
+    pick="time"></vcl-date-picker>
 </vcl-form-control-group>
 
 <vcl-form-control-group>
   <vcl-label>Disabled Date Picker</vcl-label>
   <vcl-date-picker [disabled]="true"></vcl-date-picker>
 </vcl-form-control-group>
+
+<h3>Select Locale</h3>
+
+<vcl-button-group [(value)]="selectedLocale" mode="single">
+  <button [value]="'en'" vcl-button (click)="toEnglish()">English</button>
+  <button [value]="'de'" vcl-button (click)="toGerman()">Deutsch</button>
+</vcl-button-group>
diff --git a/demo/app/demos/date-picker/demo.component.ts b/demo/app/demos/date-picker/demo.component.ts
@@ -1,5 +1,9 @@
 import { Component } from '@angular/core';
-import { DateAdapter } from '@vcl/ng-vcl';
+import {
+  DateAdapter,
+  DateAdapterParserDE,
+  DateAdapterParserEN,
+} from '@vcl/ng-vcl';
 
 @Component({
   templateUrl: 'demo.component.html',
@@ -12,11 +16,31 @@ export class DatePickerDemoComponent {
   monthAlt = new Date();
   time = new Date();
 
+  selectedLocale = 'en';
+
   datePattern = this.da.pattern('date');
   monthPattern = this.da.pattern('month');
   timePattern = this.da.pattern('time');
 
   onChange(date) {
     console.log('onChange', date);
   }
+
+  toGerman() {
+    this.da.setParser(new DateAdapterParserDE(), 'de-DE');
+    this.date = new Date(this.date);
+    this.month = new Date(this.month);
+    this.monthAlt = new Date(this.monthAlt);
+    this.time = new Date(this.time);
+    this.selectedLocale = 'de';
+  }
+
+  toEnglish() {
+    this.da.setParser(new DateAdapterParserEN(), 'en-US');
+    this.date = new Date(this.date);
+    this.month = new Date(this.month);
+    this.monthAlt = new Date(this.monthAlt);
+    this.time = new Date(this.time);
+    this.selectedLocale = 'en';
+  }
 }
diff --git a/demo/app/demos/date-picker/demo.module.ts b/demo/app/demos/date-picker/demo.module.ts
@@ -5,6 +5,7 @@ import {
   VCLDatePickerModule,
   VCLButtonModule,
   VCLFormControlGroupModule,
+  VCLButtonGroupModule,
 } from '@vcl/ng-vcl';
 import { DemoModule, DemoComponent } from '../../modules/demo/demo.module';
 import { DatePickerDemoComponent } from './demo.component';
@@ -38,6 +39,7 @@ export function demo() {
     FormsModule,
     DemoModule,
     VCLButtonModule,
+    VCLButtonGroupModule,
     VCLFormControlGroupModule,
     VCLDatePickerModule,
     RouterModule.forChild([

diff --git a/lib/ng-vcl/src/dateadapter/dateadapter.ts b/lib/ng-vcl/src/dateadapter/dateadapter.ts
@@ -49,6 +49,11 @@ export class DateAdapter extends DateAdapterBase<Date> {
 
   parser: DateAdapterParser;
 
+  setParser(dateParser: DateAdapterParser, locale: string) {
+    this.parser = dateParser;
+    this.locale = locale;
+  }
+
   isDate(date: any): date is Date {
     return date instanceof Date && isFinite(date.getTime());
   }