Date Value

package.json

@@ -26,7 +26,7 @@
     "@angular/router": "~8.2.14",
     "@knora/api": "file:.yalc/@knora/api",
     "jdnconvertiblecalendar": "^0.0.5",
-    "jdnconvertiblecalendardateadapter": "^0.0.10",
+    "jdnconvertiblecalendardateadapter": "^0.0.12",
     "ngx-color-picker": "^8.2.0",
     "rxjs": "~6.4.0",
     "tslib": "^1.10.0",

projects/knora-ui/package.json

@@ -6,6 +6,8 @@
     "@angular/core": "^8.2.14",
     "@angular/material": "^8.2.3",
     "@angular/cdk": "^8.2.3",
-    "@knora/api": "file:.yalc/@knora/api"
+    "@knora/api": "file:.yalc/@knora/api",
+    "jdnconvertiblecalendar": "^0.0.5",
+    "jdnconvertiblecalendardateadapter": "^0.0.12"
   }
 }

projects/knora-ui/src/lib/viewer/operations/display-edit/display-edit.component.html

@@ -23,6 +23,7 @@ <h4 class="label">
       <kui-geoname-value #displayVal *ngSwitchCase="constants.GeonameValue" [mode]="mode" [displayValue]="displayValue"></kui-geoname-value>
       <kui-link-value class="parent-value-component" #displayVal *ngSwitchCase="constants.LinkValue" [mode]="mode" [displayValue]="displayValue"
                     [parentResource]="parentResource" [propIri]="displayValue.property"></kui-link-value>
+      <kui-date-value #displayVal *ngSwitchCase="constants.DateValue" [mode]="mode" [displayValue]="displayValue"></kui-date-value>
       <kui-list-value #displayVal *ngSwitchCase="constants.ListValue" [mode]="mode" [displayValue]="displayValue"
                     [propertyDef]="parentResource.entityInfo.properties[displayValue.property]"></kui-list-value>
       <span *ngSwitchDefault>{{displayValue.strval}}</span> 

projects/knora-ui/src/lib/viewer/operations/display-edit/display-edit.component.spec.ts

@@ -183,6 +183,16 @@ class TestGeonameValueComponent {
 
 }
 
+@Component({
+  selector: `kui-date-value`,
+  template: ``
+})
+class TestDateValueComponent {
+  @Input() mode;
+
+  @Input() displayValue;
+}
+
 /**
  * Test host component to simulate parent component.
  */
@@ -253,7 +263,8 @@ describe('DisplayEditComponent', () => {
         TestDecimalValueComponent,
         TestGeonameValueComponent,
         TestTimeValueComponent,
-        TestColorValueComponent
+        TestColorValueComponent,
+        TestDateValueComponent
       ],
       providers: [
         {

projects/knora-ui/src/lib/viewer/operations/display-edit/display-edit.component.ts

@@ -40,7 +40,7 @@ export class DisplayEditComponent implements OnInit {
   editModeActive = false;
 
   shouldShowCommentToggle: boolean;
-  
+
   // type of given displayValue
   // or knora-api-js-lib class representing the value
   valueTypeOrClass: string;
@@ -135,7 +135,7 @@ export class DisplayEditComponent implements OnInit {
   checkCommentToggleVisibility() {
     this.shouldShowCommentToggle = (this.mode === 'read' && this.displayValue.valueHasComment !== '' && this.displayValue.valueHasComment !== undefined);
   }
-  
+
   /**
    * Given a value, determines the type or class representing it.
    *
@@ -174,7 +174,6 @@ export class DisplayEditComponent implements OnInit {
   isReadOnly(valueTypeOrClass: string): boolean {
     return valueTypeOrClass === this.readTextValueAsHtml ||
            valueTypeOrClass === this.readTextValueAsXml  ||
-           valueTypeOrClass === this.constants.DateValue ||
            valueTypeOrClass === this.constants.GeomValue;
   }
 }

projects/knora-ui/src/lib/viewer/values/date-value/calendar-header/calendar-header.component.html

@@ -0,0 +1,4 @@
+<mat-select placeholder="Calendar" class="kui-calendar-header" [formControl]="formControl">
+  <mat-option *ngFor="let cal of supportedCalendars" [value]="cal">{{cal}}</mat-option>
+</mat-select>
+<mat-calendar-header></mat-calendar-header>

projects/knora-ui/src/lib/viewer/values/date-value/calendar-header/calendar-header.component.scss

@@ -0,0 +1,6 @@
+:host {
+  .mat-select.kui-calendar-header {
+    margin: 16px 16px 0 16px !important;
+    width: calc(100% - 32px) !important;
+  }
+}