feat(angular-material): Date Picker Format and View

Use a custom dateFormatter to enable the date picker format option.
Enable the JSON Forms view option.

packages/angular-material/package.json

@@ -70,6 +70,7 @@
     "@angular/router": "^16.0.0 || ^17.0.0",
     "@jsonforms/angular": "3.2.1",
     "@jsonforms/core": "3.2.1",
+    "dayjs": "^1.11.7",
     "rxjs": "^6.6.0 || ^7.4.0"
   },
   "dependencies": {
@@ -108,6 +109,7 @@
     "@typescript-eslint/parser": "^5.54.1",
     "babel-loader": "^8.0.6",
     "copy-webpack-plugin": "^11.0.0",
+    "dayjs": "^1.11.10",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.7.0",
     "eslint-plugin-import": "^2.27.5",

packages/angular-material/src/library/controls/date.renderer.ts

@@ -22,30 +22,52 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { isDateControl, RankedTester, rankWith } from '@jsonforms/core';
+import {
+  Component,
+  ChangeDetectionStrategy,
+  Inject,
+  ViewEncapsulation,
+} from '@angular/core';
+import {
+  defaultDateFormat,
+  isDateControl,
+  JsonFormsState,
+  RankedTester,
+  rankWith,
+  StatePropsOfControl,
+} from '@jsonforms/core';
 import { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';
-import { DateAdapter } from '@angular/material/core';
+import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
+import { MyFormat } from '../util/date-format';
+import { DayJsDateAdapter } from '../util/dayjs-date-adapter';
+import { MatDatepicker } from '@angular/material/datepicker';
 
 @Component({
   selector: 'DateControlRenderer',
   template: `
-    <mat-form-field [ngStyle]="{ display: hidden ? 'none' : '' }">
+    <mat-form-field
+      class="date-control-renderer"
+      [ngStyle]="{ display: hidden ? 'none' : '' }"
+    >
       <mat-label>{{ label }}</mat-label>
       <input
         matInput
         (dateChange)="onChange($event)"
         [id]="id"
         [formControl]="form"
         [matDatepicker]="datepicker"
-        (focus)="focused = true"
-        (focusout)="focused = false"
       />
       <mat-datepicker-toggle
         matSuffix
         [for]="datepicker"
       ></mat-datepicker-toggle>
-      <mat-datepicker #datepicker></mat-datepicker>
+      <mat-datepicker
+        #datepicker
+        (monthSelected)="monthSelected($event, datepicker)"
+        (yearSelected)="yearSelected($event, datepicker)"
+        [startView]="startView"
+        [panelClass]="panelClass"
+      ></mat-datepicker>
       <mat-hint *ngIf="shouldShowUnfocusedDescription()">{{
         description
       }}</mat-hint>
@@ -54,28 +76,97 @@ import { DateAdapter } from '@angular/material/core';
   `,
   styles: [
     `
-      :host {
+      DateControlRenderer {
         display: flex;
         flex-direction: row;
       }
-      mat-form-field {
+      .date-control-renderer {
         flex: 1 1 auto;
       }
+      .no-panel-navigation .mat-calendar-period-button {
+        pointer-events: none;
+      }
+      .no-panel-navigation .mat-calendar-arrow {
+        display: none;
+      }
     `,
   ],
+  encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: DateAdapter,
+      useClass: DayJsDateAdapter,
+    },
+    {
+      provide: MAT_DATE_FORMATS,
+      useClass: MyFormat,
+    },
+  ],
 })
 export class DateControlRenderer extends JsonFormsControl {
+  views: string[] = [];
+  startView = '';
+  panelClass = '';
+
   constructor(
     jsonformsService: JsonFormsAngularService,
-    private dateAdapter: DateAdapter<Date>
+    @Inject(MAT_DATE_FORMATS) public dateFormat: MyFormat,
+    @Inject(DateAdapter) public dateAdapter: DayJsDateAdapter
   ) {
     super(jsonformsService);
   }
 
   getEventValue = (event: any) => {
-    return this.dateAdapter.format(event.value, 'YYYY-MM-DD');
+    const value = event.value ? event.value : event;
+    return this.dateAdapter.toSaveFormat(value);
   };
+
+  protected mapToProps(state: JsonFormsState): StatePropsOfControl {
+    const props = super.mapToProps(state);
+    const saveFormat = this.uischema?.options?.dateSaveFormat
+      ? this.uischema.options.dateSaveFormat
+      : defaultDateFormat;
+    const dateFormat = this.uischema?.options?.dateFormat
+      ? this.uischema.options.dateFormat
+      : defaultDateFormat;
+    this.views = this.uischema?.options?.views
+      ? this.uischema.options.views
+      : ['year', 'month', 'day'];
+    this.setViewProperties();
+
+    this.dateAdapter.setSaveFormat(saveFormat);
+    this.dateAdapter.setDisplayFormat(dateFormat);
+    this.dateFormat.setSaveFormat(saveFormat);
+    this.dateFormat.setDisplayFormat(dateFormat);
+    const date = this.dateAdapter.parse(props.data);
+    return { ...props, data: date };
+  }
+
+  yearSelected($event: any, datepicker: MatDatepicker<DayJsDateAdapter>) {
+    if (!this.views.includes('day') && !this.views.includes('month')) {
+      this.onChange($event);
+      datepicker.close();
+    }
+  }
+  monthSelected($event: any, datepicker: MatDatepicker<DayJsDateAdapter>) {
+    if (!this.views.includes('day')) {
+      this.onChange($event);
+      datepicker.close();
+    }
+  }
+
+  setViewProperties() {
+    if (!this.views.includes('day') && !this.views.includes('month')) {
+      this.startView = 'multi-year';
+      this.panelClass = 'no-panel-navigation';
+    } else if (!this.views.includes('day')) {
+      this.startView = 'multi-year';
+      this.panelClass = 'no-panel-navigation';
+    } else {
+      this.startView = 'month';
+    }
+  }
 }
 
 export const DateControlRendererTester: RankedTester = rankWith(

packages/angular-material/src/library/module.ts

@@ -22,7 +22,7 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import { CommonModule, DatePipe } from '@angular/common';
+import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
@@ -42,11 +42,7 @@ import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatTableModule } from '@angular/material/table';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatToolbarModule } from '@angular/material/toolbar';
-import {
-  DateAdapter,
-  MatNativeDateModule,
-  MAT_DATE_FORMATS,
-} from '@angular/material/core';
+import { MatNativeDateModule } from '@angular/material/core';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { JsonFormsModule } from '@jsonforms/angular';
 import { AutocompleteControlRenderer } from './controls/autocomplete.renderer';
@@ -68,7 +64,6 @@ import { HorizontalLayoutRenderer } from './layouts/horizontal-layout.renderer';
 import { VerticalLayoutRenderer } from './layouts/vertical-layout.renderer';
 import { ArrayLayoutRenderer } from './layouts/array-layout.renderer';
 import { LayoutChildrenRenderPropsPipe } from './layouts';
-import { DayJsDateAdapter } from './util/dayjs-date-adapter';
 
 @NgModule({
   imports: [
@@ -137,25 +132,5 @@ import { DayJsDateAdapter } from './util/dayjs-date-adapter';
     MatAutocompleteModule,
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  providers: [
-    {
-      provide: DateAdapter,
-      useClass: DayJsDateAdapter,
-    },
-    {
-      provide: MAT_DATE_FORMATS,
-      useValue: {
-        parse: {
-          dateInput: 'YYYY-MM-DD',
-        },
-        display: {
-          dateInput: 'YYYY-MM-DD',
-          monthYearLabel: 'YYYY-MM',
-          dateA11yLabel: 'YYYY-MM-DD',
-          monthYearA11yLabel: 'YYYY-MM',
-        },
-      },
-    },
-  ],
 })
 export class JsonFormsAngularMaterialModule {}

packages/angular-material/src/library/util/date-format.ts

@@ -0,0 +1,25 @@
+import { defaultDateFormat } from '@jsonforms/core';
+
+export class MyFormat {
+  saveFormat: string = defaultDateFormat;
+  displayFormat = 'MM-DD-YYYY';
+
+  setSaveFormat(saveFormat: string) {
+    this.saveFormat = saveFormat;
+  }
+
+  setDisplayFormat(displayFormat: string) {
+    this.saveFormat = displayFormat;
+  }
+
+  get display() {
+    return {
+      dateInput: this.displayFormat,
+    };
+  }
+  get parse() {
+    return {
+      dateInput: this.saveFormat,
+    };
+  }
+}

packages/angular-material/src/util/dayjs-date-adapter.ts → packages/angular-material/src/library/util/dayjs-date-adapter.ts

@@ -23,42 +23,68 @@
   THE SOFTWARE.
 */
 
+import { Injectable } from '@angular/core';
 import { NativeDateAdapter } from '@angular/material/core';
+import { defaultDateFormat } from '@jsonforms/core';
 import dayjs from 'dayjs';
 import customParsing from 'dayjs/plugin/customParseFormat';
 
 // allows to parse date strings with custom format
 dayjs.extend(customParsing);
 
 /**
- * date adapter for dayjs to parse and format dates 
+ * date adapter for dayjs to parse and format dates
  */
+@Injectable()
 export class DayJsDateAdapter extends NativeDateAdapter {
+  saveFormat: string = defaultDateFormat;
+  displayFormat = 'YYYY-MM-DD';
+
+  setSaveFormat(format: string) {
+    this.saveFormat = format;
+  }
+
+  setDisplayFormat(displayFormat: string) {
+    this.displayFormat = displayFormat;
+  }
+
   /**
-  * parses a given user input string in the YYYY-MM-DD format into a date object
-  * @param value date string to be parsed (YYYY-MM-DD)
-  * @returns date object or null if parsing failed
-  */
-  parse(value: any): Date | null {
+   * parses a given data prop string in the save-format into a date object
+   * @param value date string to be parsed
+   * @returns date object or null if parsing failed
+   */
+  parse(value: string): Date | null {
     if (!value) {
       return null;
-    }    
-    const date = dayjs(value, 'YYYY-MM-DD', true);    
+    }
+    const date = dayjs(value, this.saveFormat, true);
     if (date.isValid()) {
       return date.toDate();
     } else {
       return null;
     }
   }
 
+  toSaveFormat(value: Date) {
+    if (!value) {
+      return undefined;
+    }
+    const date = dayjs(value);
+    if (date.isValid()) {
+      return date.format(this.saveFormat);
+    } else {
+      return undefined;
+    }
+  }
+
   /**
-  * transforms the date to a string representation for display
-  * @param date date to be formatted
-  * @param displayFormat format to be used for formatting the date e.g. YYYY-MM-DD
-  * @returns string representation of the date
-  */
-  format(date: Date, displayFormat: string): string {
-    return dayjs(date).format(displayFormat);
+   * transforms the date to a string representation for display
+   * @param date date to be formatted
+   * @param displayFormat format to be used for formatting the date e.g. YYYY-MM-DD
+   * @returns string representation of the date
+   */
+  format(date: Date): string {
+    return dayjs(date).format(this.displayFormat);
   }
 
   deserialize(value: any): Date | null {
@@ -72,5 +98,4 @@ export class DayJsDateAdapter extends NativeDateAdapter {
       return null;
     }
   }
-
 }

packages/examples/src/examples/dates.ts

@@ -133,7 +133,7 @@ export const data = {
     datetime: new Date().toISOString(),
   },
   uiSchemaBased: {
-    date: new Date().toISOString().substr(0, 10),
+    date: '2024-01',
     time: '13:37:00',
     datetime: '1999/12/11 10:05 am',
   },