diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 7ae4e90d1f..513d783b15 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -45,6 +45,7 @@ import { KnoraDatePipe } from './main/pipes/formatting/knoradate.pipe';
 import { SplitPipe } from './main/pipes/split.pipe';
 import { LinkifyPipe } from './main/pipes/string-transformation/linkify.pipe';
 import { StringifyStringLiteralPipe } from './main/pipes/string-transformation/stringify-string-literal.pipe';
+import { TitleFromCamelCasePipe } from './main/pipes/string-transformation/title-from-camel-case.pipe';
 import { TruncatePipe } from './main/pipes/string-transformation/truncate.pipe';
 import { SelectLanguageComponent } from './main/select-language/select-language.component';
 import { DatadogRumService } from './main/services/datadog-rum.service';
@@ -111,10 +112,8 @@ import { ResourceComponent } from './workspace/resource/resource.component';
 import { BooleanValueComponent } from './workspace/resource/values/boolean-value/boolean-value.component';
 import { ColorPickerComponent } from './workspace/resource/values/color-value/color-picker/color-picker.component';
 import { ColorValueComponent } from './workspace/resource/values/color-value/color-value.component';
-import { CalendarHeaderComponent } from './workspace/resource/values/date-value/calendar-header/calendar-header.component';
-import { DateEditComponent } from './workspace/resource/values/date-value/date-input-text/date-edit/date-edit.component';
-import { DateInputTextComponent } from './workspace/resource/values/date-value/date-input-text/date-input-text.component';
-import { DateInputComponent } from './workspace/resource/values/date-value/date-input/date-input.component';
+import { DatePickerComponent } from './workspace/resource/values/date-value/date-picker/date-picker.component';
+import { DateValueHandlerComponent } from './workspace/resource/values/date-value/date-value-handler/date-value-handler.component';
 import { DateValueComponent } from './workspace/resource/values/date-value/date-value.component';
 import { DecimalValueComponent } from './workspace/resource/values/decimal-value/decimal-value.component';
 import { GeonameValueComponent } from './workspace/resource/values/geoname-value/geoname-value.component';
@@ -131,9 +130,6 @@ import { TextValueAsXMLComponent } from './workspace/resource/values/text-value/
 import { TimeInputComponent } from './workspace/resource/values/time-value/time-input/time-input.component';
 import { TimeValueComponent } from './workspace/resource/values/time-value/time-value.component';
 import { UriValueComponent } from './workspace/resource/values/uri-value/uri-value.component';
-import { DatePickerComponent } from './workspace/resource/values/yet-another-date-value/date-picker/date-picker.component';
-import { DateValueHandlerComponent } from './workspace/resource/values/yet-another-date-value/date-value-handler/date-value-handler.component';
-import { YetAnotherDateValueComponent } from './workspace/resource/values/yet-another-date-value/yet-another-date-value.component';
 import { ListViewComponent } from './workspace/results/list-view/list-view.component';
 import { ResourceGridComponent } from './workspace/results/list-view/resource-grid/resource-grid.component';
 import { ResourceListComponent } from './workspace/results/list-view/resource-list/resource-list.component';
@@ -157,7 +153,6 @@ import { SearchSelectOntologyComponent } from './workspace/search/advanced-searc
 import { ExpertSearchComponent } from './workspace/search/expert-search/expert-search.component';
 import { FulltextSearchComponent } from './workspace/search/fulltext-search/fulltext-search.component';
 import { SearchPanelComponent } from './workspace/search/search-panel/search-panel.component';
-import { TitleFromCamelCasePipe } from './main/pipes/string-transformation/title-from-camel-case.pipe';
 
 // translate: AoT requires an exported function for factories
 export function httpLoaderFactory(httpClient: HttpClient) {
@@ -178,7 +173,6 @@ export function httpLoaderFactory(httpClient: HttpClient) {
         AudioComponent,
         BoardComponent,
         BooleanValueComponent,
-        CalendarHeaderComponent,
         CollaborationComponent,
         CollectionListComponent,
         ColorPickerComponent,
@@ -189,9 +183,6 @@ export function httpLoaderFactory(httpClient: HttpClient) {
         CookiePolicyComponent,
         CreateLinkResourceComponent,
         DashboardComponent,
-        DateEditComponent,
-        DateInputComponent,
-        DateInputTextComponent,
         DatePickerComponent,
         DateValueComponent,
         DateValueHandlerComponent,
@@ -294,6 +285,7 @@ export function httpLoaderFactory(httpClient: HttpClient) {
         TextValueHtmlLinkDirective,
         TimeInputComponent,
         TimeValueComponent,
+        TitleFromCamelCasePipe,
         TruncatePipe,
         UploadComponent,
         UriValueComponent,
@@ -302,8 +294,6 @@ export function httpLoaderFactory(httpClient: HttpClient) {
         UserMenuComponent,
         UsersComponent,
         UsersListComponent,
-        YetAnotherDateValueComponent,
-        TitleFromCamelCasePipe
     ],
     imports: [
         AngularSplitModule.forRoot(),
diff --git a/src/app/project/ontology/default-data/default-properties.ts b/src/app/project/ontology/default-data/default-properties.ts
index 75dd8b5d8c..af0b4eaf8a 100644
--- a/src/app/project/ontology/default-data/default-properties.ts
+++ b/src/app/project/ontology/default-data/default-properties.ts
@@ -121,7 +121,7 @@ export class DefaultProperties {
                 {
                     icon: 'access_time',
                     label: 'Timestamp',
-                    description: 'A single timestamp on a timeline',
+                    description: 'A single timestamp (date and time) on a timeline',
                     subPropOf: Constants.HasValue,
                     objectType: Constants.TimeValue,
                     guiEle: Constants.GuiTimeStamp,
diff --git a/src/app/project/ontology/ontology-form/ontology-form.component.html b/src/app/project/ontology/ontology-form/ontology-form.component.html
index 3fda72246a..aef9749634 100644
--- a/src/app/project/ontology/ontology-form/ontology-form.component.html
+++ b/src/app/project/ontology/ontology-form/ontology-form.component.html
@@ -3,7 +3,7 @@
     <div class="form-content">
         <mat-form-field class="large-field ontology-name">
             <input matInput class="ontology-name" autocomplete="off" [maxlength]="nameMaxLength" [formControl]="ontologyForm.controls['name']"
-                [placeholder]="'Set a unique name *'">
+                [placeholder]="'Set a unique name'">
             <mat-icon matSuffix [matTooltip]="ontologyNameInfo" matTooltipPosition="above" matTooltipClass="multi-line-tooltip">help</mat-icon>
             <mat-hint *ngIf="formErrors.name" class="medium-field">
                 {{ formErrors.name }}
@@ -13,7 +13,7 @@
 
         <mat-form-field class="large-field ontology-label">
             <span *ngIf="!iri" matPrefix>{{project.shortname}}:&nbsp;</span>
-            <input matInput [formControl]="ontologyForm.controls['label']" placeholder="Label *"
+            <input matInput [formControl]="ontologyForm.controls['label']" placeholder="Label"
                 [value]="ontologyLabel">
             <mat-hint *ngIf="formErrors.label">
                 {{ formErrors.label }}
diff --git a/src/app/project/ontology/ontology-form/ontology-form.component.ts b/src/app/project/ontology/ontology-form/ontology-form.component.ts
index eed7f2b6c5..4e476a40ca 100644
--- a/src/app/project/ontology/ontology-form/ontology-form.component.ts
+++ b/src/app/project/ontology/ontology-form/ontology-form.component.ts
@@ -186,6 +186,7 @@ export class OntologyFormComponent implements OnInit {
             label: new FormControl({
                 value: this.ontologyLabel, disabled: false
             }, [
+                Validators.required,
                 Validators.minLength(this.nameMinLength)
             ]),
             comment: new FormControl({
diff --git a/src/app/project/ontology/property-form/property-form.component.html b/src/app/project/ontology/property-form/property-form.component.html
index 58e0d66a1b..2a4d121a21 100644
--- a/src/app/project/ontology/property-form/property-form.component.html
+++ b/src/app/project/ontology/property-form/property-form.component.html
@@ -41,7 +41,7 @@
             <span matPrefix class="ontology-prefix-icon">
                 <mat-icon>fingerprint</mat-icon>&nbsp;
             </span>
-            <mat-label>Property name *</mat-label>
+            <mat-label>Property name</mat-label>
             <input matInput formControlName="name" >
             <mat-hint class="ontology-error-with-prefix" *ngIf="formErrors.name">
                 {{formErrors.name}}
diff --git a/src/app/project/ontology/property-form/property-form.component.ts b/src/app/project/ontology/property-form/property-form.component.ts
index c3468c2600..36a58646c7 100644
--- a/src/app/project/ontology/property-form/property-form.component.ts
+++ b/src/app/project/ontology/property-form/property-form.component.ts
@@ -424,6 +424,7 @@ export class PropertyFormComponent implements OnInit {
 
                         this._dspApiConnection.v2.onto.updateResourceProperty(onto4Comment).subscribe(
                             (classCommentResponse: ResourcePropertyDefinitionWithAllLanguages) => {
+                                console.log(classCommentResponse);
                                 this.lastModificationDate = classCommentResponse.lastModificationDate;
 
                                 if (!this.unsupportedPropertyType) {
@@ -491,7 +492,7 @@ export class PropertyFormComponent implements OnInit {
             const newResProp = new CreateResourceProperty();
             newResProp.name = this.propertyForm.controls['name'].value;
             newResProp.label = this.labels;
-            newResProp.comment = (this.comments.length ? this.comments : this.labels);
+            newResProp.comment = this.comments;
             const guiAttr = this.propertyForm.controls['guiAttr'].value;
             if (guiAttr) {
                 newResProp.guiAttributes = this.setGuiAttribute(guiAttr);
diff --git a/src/app/project/ontology/resource-class-form/resource-class-form.component.html b/src/app/project/ontology/resource-class-form/resource-class-form.component.html
index e43926f8b4..49106d413b 100644
--- a/src/app/project/ontology/resource-class-form/resource-class-form.component.html
+++ b/src/app/project/ontology/resource-class-form/resource-class-form.component.html
@@ -10,7 +10,7 @@
                 <span matPrefix class="ontology-prefix-icon">
                     <mat-icon>fingerprint</mat-icon>&nbsp;
                 </span>
-                <mat-label>Class name *</mat-label>
+                <mat-label>Class name</mat-label>
                 <input matInput formControlName="name" >
                 <mat-hint class="ontology-error-with-prefix" *ngIf="formErrors.name">
                     {{formErrors.name}}
@@ -34,15 +34,12 @@
             <!-- description -->
             <div class="large-field string-literal-container more-space-top">
                 <app-string-literal-input
-                    [placeholder]="'Comment *'"
+                    [placeholder]="'Comment'"
                     [value]="resourceClassComments"
                     [textarea]="true"
                     (touched)="resourceClassCommentsTouched = $event"
                     (dataChanged)="handleData($event, 'comment')">
                 </app-string-literal-input>
-                <mat-hint class="string-literal-error" *ngIf="formErrors.comment">
-                    {{ formErrors.comment }}
-                </mat-hint>
             </div>
         </div>
 
@@ -56,12 +53,12 @@
             <span class="fill-remaining-space"></span>
             <span>
                 <button *ngIf="!edit" mat-raised-button type="button" color="primary"
-                    [disabled]="!resourceClassLabels.length || !resourceClassComments.length"
+                    [disabled]="!resourceClassLabels.length || (resourceClassForm.enabled && !resourceClassForm.valid)"
                     (click)="submitData()">
                     Submit
                 </button>
                 <button *ngIf="edit" mat-raised-button type="button" color="primary"
-                    [disabled]="!resourceClassLabels.length || !resourceClassComments.length"
+                    [disabled]="!resourceClassLabels.length || (resourceClassForm.enabled && !resourceClassForm.valid)"
                     (click)="submitData()">
                     <app-progress-indicator [color]="'white'" [status]="0" *ngIf="loading" class="submit-progress">
                     </app-progress-indicator>
diff --git a/src/app/project/ontology/resource-class-form/resource-class-form.component.ts b/src/app/project/ontology/resource-class-form/resource-class-form.component.ts
index 34bb34518a..46edafac8d 100644
--- a/src/app/project/ontology/resource-class-form/resource-class-form.component.ts
+++ b/src/app/project/ontology/resource-class-form/resource-class-form.component.ts
@@ -103,8 +103,7 @@ export class ResourceClassFormComponent implements OnInit, AfterViewChecked {
     // form errors on the following fields:
     formErrors = {
         'name': '',
-        'label': '',
-        'comment': ''
+        'label': ''
     };
 
     // in case of form error: show message
@@ -116,9 +115,6 @@ export class ResourceClassFormComponent implements OnInit, AfterViewChecked {
         },
         'label': {
             'required': 'Label is required.'
-        },
-        'comment': {
-            'required': 'Comment is required.'
         }
     };
 
@@ -216,9 +212,7 @@ export class ResourceClassFormComponent implements OnInit, AfterViewChecked {
             ]),
             comment: new FormControl({
                 value: this.resourceClassComments, disabled: false
-            }, [
-                Validators.required
-            ])
+            })
         });
 
         this.resourceClassForm.valueChanges.subscribe(data => this.onValueChanged(data));
@@ -253,6 +247,7 @@ export class ResourceClassFormComponent implements OnInit, AfterViewChecked {
         switch (type) {
             case 'label':
                 this.resourceClassLabels = data;
+                this.resourceClassForm.controls['label'].setValue(data);
                 this.handleError(this.resourceClassLabelsTouched, type);
                 break;
 
@@ -307,7 +302,7 @@ export class ResourceClassFormComponent implements OnInit, AfterViewChecked {
 
             const updateComment = new UpdateResourceClassComment();
             updateComment.id = this.iri;
-            updateComment.comments = this.resourceClassComments;
+            updateComment.comments = (this.resourceClassComments.length ? this.resourceClassComments : this.resourceClassLabels);
             onto4Comment.entity = updateComment;
 
             this._dspApiConnection.v2.onto.updateResourceClass(onto4Label).subscribe(
@@ -351,6 +346,7 @@ export class ResourceClassFormComponent implements OnInit, AfterViewChecked {
             newResClass.subClassOf = [this.iri];
 
             onto.entity = newResClass;
+
             this._dspApiConnection.v2.onto.createResourceClass(onto).subscribe(
                 (classResponse: ResourceClassDefinitionWithAllLanguages) => {
                     // need lmd from classResponse
diff --git a/src/app/project/project-form/project-form.component.html b/src/app/project/project-form/project-form.component.html
index 81ce39067d..88772a76c1 100644
--- a/src/app/project/project-form/project-form.component.html
+++ b/src/app/project/project-form/project-form.component.html
@@ -6,7 +6,7 @@
 
         <!-- short and long name -->
         <mat-form-field class="small-field">
-            <input matInput placeholder="{{'appLabels.form.project.general.shortcode' | translate}} * "
+            <input matInput placeholder="{{'appLabels.form.project.general.shortcode' | translate}}"
                 [maxlength]="shortcodeMaxLength" [formControl]="form.controls['shortcode']">
             <mat-hint *ngIf="formErrors.shortcode">
                 {{ formErrors.shortcode }}
@@ -16,7 +16,7 @@
         <!-- short name -->
         <mat-form-field class="medium-field">
             <input matInput [maxlength]="shortnameMaxLength"
-                placeholder="{{'appLabels.form.project.general.shortname' | translate}} * "
+                placeholder="{{'appLabels.form.project.general.shortname' | translate}}"
                 [formControl]="form.controls['shortname']">
             <mat-hint *ngIf="formErrors.shortname">
                 {{ formErrors.shortname }}
@@ -25,7 +25,7 @@
 
         <!-- long name -->
         <mat-form-field class="large-field">
-            <input matInput placeholder="{{'appLabels.form.project.general.longname' | translate}} *"
+            <input matInput placeholder="{{'appLabels.form.project.general.longname' | translate}}"
                 [formControl]="form.controls['longname']">
             <mat-hint *ngIf="formErrors.longname">
                 {{ formErrors.longname }}
diff --git a/src/app/user/user-form/password-form/password-form.component.html b/src/app/user/user-form/password-form/password-form.component.html
index 324c50281e..1386e02c7b 100644
--- a/src/app/user/user-form/password-form/password-form.component.html
+++ b/src/app/user/user-form/password-form/password-form.component.html
@@ -17,7 +17,7 @@ <h4 class="mat-subheading-1">As system admin, please enter your password before
             <mat-form-field class="large-field">
                 <input matInput [type]="showRequesterPassword ? 'text' : 'password'"
                     [formControl]="confirmForm.controls['requesterPassword']" autocomplete="old-password"
-                    placeholder="{{ 'appLabels.form.user.general.requesterPassword' | translate}} *">
+                    placeholder="{{ 'appLabels.form.user.general.requesterPassword' | translate}}">
 
                 <button mat-button type="button" matSuffix mat-icon-button class="input-icon"
                     attr.aria-label="{{showRequesterPassword ? 'Hide password' : 'Show password'}}"
@@ -57,7 +57,7 @@ <h4 class="mat-subheading-1">As system admin, please enter your password before
 
                 <input matInput [type]="showRequesterPassword ? 'text' : 'password'"
                     [formControl]="form.controls['requesterPassword']" autocomplete="current-password"
-                    placeholder="{{ 'appLabels.form.user.general.oldPassword' | translate}} *">
+                    placeholder="{{ 'appLabels.form.user.general.oldPassword' | translate}}">
 
                 <button mat-button type="button" matSuffix mat-icon-button class="input-icon"
                     attr.aria-label="{{showRequesterPassword ? 'Hide password' : 'Show password'}}"
@@ -76,7 +76,7 @@ <h4 class="mat-subheading-1">As system admin, please enter your password before
             <!-- password -->
             <mat-form-field class="large-field">
                 <input matInput [type]="showPassword ? 'text' : 'password'" [formControl]="form.controls['password']"
-                    autocomplete="new-password" placeholder="{{ 'appLabels.form.user.general.password' | translate}} *">
+                    autocomplete="new-password" placeholder="{{ 'appLabels.form.user.general.password' | translate}}">
 
                 <button mat-button type="button" matSuffix mat-icon-button class="input-icon"
                     attr.aria-label="{{showPassword ? 'Hide password' : 'Show password'}}"
@@ -97,7 +97,7 @@ <h4 class="mat-subheading-1">As system admin, please enter your password before
                 <input matInput [type]="showConfirmPassword ? 'text' : 'password'"
                     [class.error]="formErrors.confirmPassword  || (!matchingPasswords)"
                     [formControl]="form.controls['confirmPassword']" autocomplete="confirm-password"
-                    placeholder="{{ 'appLabels.form.user.general.confirmPassword' | translate}} *">
+                    placeholder="{{ 'appLabels.form.user.general.confirmPassword' | translate}}">
 
                 <button mat-button type="button" matSuffix mat-icon-button class="input-icon"
                     attr.aria-label="{{showConfirmPassword ? 'Hide password' : 'Show password'}}"
diff --git a/src/app/user/user-form/user-form.component.html b/src/app/user/user-form/user-form.component.html
index 67945e2bdf..135d40c059 100644
--- a/src/app/user/user-form/user-form.component.html
+++ b/src/app/user/user-form/user-form.component.html
@@ -12,7 +12,7 @@
         <!-- username -->
         <mat-form-field [class.large-field]="!username" [class.small-field]="username">
             <input matInput type="text" [formControl]="form.controls['username']"
-                placeholder="{{ 'appLabels.form.user.general.username' | translate }} *" autocomplete="username">
+                placeholder="{{ 'appLabels.form.user.general.username' | translate }}" autocomplete="username">
             <mat-hint *ngIf="formErrors.username">
                 {{ formErrors.username }}
             </mat-hint>
@@ -21,7 +21,7 @@
         <!-- email -->
         <mat-form-field [class.large-field]="!username" [class.medium-field]="username">
             <input matInput type="email" [formControl]="form.controls['email']"
-                placeholder="{{ 'appLabels.form.user.general.email' | translate }} *" autocomplete="email">
+                placeholder="{{ 'appLabels.form.user.general.email' | translate }}" autocomplete="email">
             <mat-hint *ngIf="formErrors.email">
                 {{ formErrors.email }}
             </mat-hint>
@@ -31,7 +31,7 @@
         <!-- given name -->
         <mat-form-field class="small-field">
             <input matInput [formControl]="form.controls['givenName']"
-                placeholder="{{ 'appLabels.form.user.general.givenName' | translate }} *" autocomplete="givenname">
+                placeholder="{{ 'appLabels.form.user.general.givenName' | translate }}" autocomplete="givenname">
             <mat-hint *ngIf="formErrors.givenName">
                 {{ formErrors.givenName }}
             </mat-hint>
@@ -40,7 +40,7 @@
         <!-- family name -->
         <mat-form-field class="medium-field">
             <input matInput [formControl]="form.controls['familyName']"
-                placeholder="{{ 'appLabels.form.user.general.familyName' | translate }} *" autocomplete="name">
+                placeholder="{{ 'appLabels.form.user.general.familyName' | translate }}" autocomplete="name">
             <mat-hint *ngIf="formErrors.familyName">
                 {{ formErrors.familyName }}
             </mat-hint>
diff --git a/src/app/workspace/resource/operations/add-value/add-value.component.html b/src/app/workspace/resource/operations/add-value/add-value.component.html
index d39b129723..47e5c2c225 100644
--- a/src/app/workspace/resource/operations/add-value/add-value.component.html
+++ b/src/app/workspace/resource/operations/add-value/add-value.component.html
@@ -14,7 +14,7 @@
             <app-geoname-value #createVal *ngSwitchCase="constants.GeonameValue" [mode]="mode"></app-geoname-value>
             <app-link-value #createVal *ngSwitchCase="constants.LinkValue" [mode]="mode"
                         [parentResource]="parentResource" [propIri]="resourcePropertyDefinition.id"></app-link-value>
-            <app-yet-another-date-value #createVal *ngSwitchCase="constants.DateValue" [mode]="mode"></app-yet-another-date-value>
+            <app-date-value #createVal *ngSwitchCase="constants.DateValue" [mode]="mode"></app-date-value>
             <app-list-value #createVal *ngSwitchCase="constants.ListValue" [mode]="mode"
                         [propertyDef]="resourcePropertyDefinition"></app-list-value>
         </span>
diff --git a/src/app/workspace/resource/operations/display-edit/display-edit.component.html b/src/app/workspace/resource/operations/display-edit/display-edit.component.html
index 956377d136..b7925dc278 100644
--- a/src/app/workspace/resource/operations/display-edit/display-edit.component.html
+++ b/src/app/workspace/resource/operations/display-edit/display-edit.component.html
@@ -21,7 +21,7 @@
             <app-link-value class="parent-value-component" #displayVal *ngSwitchCase="constants.LinkValue" [mode]="mode" [displayValue]="$any(displayValue)"
                         [parentResource]="parentResource" [propIri]="displayValue.property" (referredResourceClicked)="referredResourceClicked.emit($event)" (referredResourceHovered)="referredResourceHovered.emit($event)"></app-link-value>
             <!-- <app-date-value class="parent-value-component" #displayVal *ngSwitchCase="constants.DateValue" [mode]="mode" [displayValue]="$any(displayValue)" [displayOptions]="dateDisplayOptions" [labels]="showDateLabels" [ontologyDateFormat]="dateFormat"></app-date-value> -->
-            <app-yet-another-date-value class="parent-value-component" #displayVal *ngSwitchCase="constants.DateValue" [mode]="mode" [displayValue]="$any(displayValue)" [ontologyDateFormat]="dateFormat"></app-yet-another-date-value>
+            <app-date-value class="parent-value-component" #displayVal *ngSwitchCase="constants.DateValue" [mode]="mode" [displayValue]="$any(displayValue)" [ontologyDateFormat]="dateFormat"></app-date-value>
             <app-list-value class="parent-value-component" #displayVal *ngSwitchCase="constants.ListValue" [mode]="mode" [displayValue]="$any(displayValue)"
                         [propertyDef]="$any(parentResource.entityInfo.properties[displayValue.property])"></app-list-value>
             <span *ngSwitchDefault>{{displayValue.strval}}</span>
diff --git a/src/app/workspace/resource/resource-instance-form/select-properties/switch-properties/switch-properties.component.html b/src/app/workspace/resource/resource-instance-form/select-properties/switch-properties/switch-properties.component.html
index eff4ced169..c059fff86f 100644
--- a/src/app/workspace/resource/resource-instance-form/select-properties/switch-properties/switch-properties.component.html
+++ b/src/app/workspace/resource/resource-instance-form/select-properties/switch-properties/switch-properties.component.html
@@ -11,7 +11,7 @@
     <app-geoname-value #createVal *ngSwitchCase="constants.GeonameValue" [mode]="mode" [valueRequiredValidator]="isRequiredProp" [parentForm]="parentForm" [formName]="formName"></app-geoname-value>
     <app-link-value #createVal *ngSwitchCase="constants.LinkValue" [mode]="mode" [valueRequiredValidator]="isRequiredProp" [parentForm]="parentForm" [formName]="formName"
                 [parentResource]="parentResource" [propIri]="property.id"></app-link-value>
-    <app-yet-another-date-value #createVal *ngSwitchCase="constants.DateValue" [mode]="mode" [valueRequiredValidator]="isRequiredProp" [parentForm]="parentForm" [formName]="formName"></app-yet-another-date-value>
+    <app-date-value #createVal *ngSwitchCase="constants.DateValue" [mode]="mode" [valueRequiredValidator]="isRequiredProp" [parentForm]="parentForm" [formName]="formName"></app-date-value>
     <app-list-value #createVal *ngSwitchCase="constants.ListValue" [mode]="mode" [valueRequiredValidator]="isRequiredProp" [parentForm]="parentForm" [formName]="formName"
                 [propertyDef]="property"></app-list-value>
     <span *ngSwitchDefault>
diff --git a/src/app/workspace/resource/values/date-value/calendar-header/calendar-header.component.html b/src/app/workspace/resource/values/date-value/calendar-header/calendar-header.component.html
deleted file mode 100644
index 250e5154e5..0000000000
--- a/src/app/workspace/resource/values/date-value/calendar-header/calendar-header.component.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<mat-select placeholder="Calendar" class="dsp-calendar-header" [formControl]="formControl">
-    <mat-option *ngFor="let cal of supportedCalendars" [value]="cal">{{cal}}</mat-option>
-  </mat-select>
-  <mat-calendar-header></mat-calendar-header>
diff --git a/src/app/workspace/resource/values/date-value/calendar-header/calendar-header.component.scss b/src/app/workspace/resource/values/date-value/calendar-header/calendar-header.component.scss
deleted file mode 100644
index fc98f08199..0000000000
--- a/src/app/workspace/resource/values/date-value/calendar-header/calendar-header.component.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-:host {
-  .mat-select.dsp-calendar-header {
-    margin: 16px 16px 0 16px !important;
-    width: calc(100% - 32px) !important;
-  }
-}
diff --git a/src/app/workspace/resource/values/date-value/calendar-header/calendar-header.component.spec.ts b/src/app/workspace/resource/values/date-value/calendar-header/calendar-header.component.spec.ts
deleted file mode 100644
index 32bb925691..0000000000
--- a/src/app/workspace/resource/values/date-value/calendar-header/calendar-header.component.spec.ts
+++ /dev/null
@@ -1,149 +0,0 @@
-import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { CalendarHeaderComponent } from './calendar-header.component';
-import { ACTIVE_CALENDAR, JDNConvertibleCalendarDateAdapter } from 'jdnconvertiblecalendardateadapter';
-import { MatSelectModule } from '@angular/material/select';
-import { DateAdapter, MatOptionModule } from '@angular/material/core';
-import { ReactiveFormsModule } from '@angular/forms';
-import { MatCalendar, MatDatepickerContent } from '@angular/material/datepicker';
-import { BehaviorSubject } from 'rxjs';
-import { Component } from '@angular/core';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import {
-    CalendarDate,
-    CalendarPeriod,
-    GregorianCalendarDate,
-    JDNConvertibleCalendar,
-    JulianCalendarDate
-} from 'jdnconvertiblecalendar';
-import { HarnessLoader } from '@angular/cdk/testing';
-import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
-import { MatSelectHarness } from '@angular/material/select/testing';
-
-@Component({
-    selector: 'mat-calendar-header',
-    template: ''
-})
-class TestMatCalendarHeaderComponent {
-
-}
-
-describe('CalendarHeaderComponent', () => {
-    let component: CalendarHeaderComponent<JDNConvertibleCalendarDateAdapter>;
-    let fixture: ComponentFixture<CalendarHeaderComponent<JDNConvertibleCalendarDateAdapter>>;
-    let loader: HarnessLoader;
-
-    beforeEach(waitForAsync(() => {
-        TestBed.configureTestingModule({
-            imports: [
-                ReactiveFormsModule,
-                MatSelectModule,
-                MatOptionModule,
-                BrowserAnimationsModule
-            ],
-            declarations: [CalendarHeaderComponent, TestMatCalendarHeaderComponent],
-            providers: [
-                {
-                    provide: MatCalendar, useValue: {
-                        activeDate: new GregorianCalendarDate(new CalendarPeriod(new CalendarDate(2020, 3, 17), new CalendarDate(2020, 3, 17))),
-                        updateTodaysDate: () => {
-                        }
-                    }
-                },
-                { provide: DateAdapter, useClass: JDNConvertibleCalendarDateAdapter },
-                { provide: ACTIVE_CALENDAR, useValue: new BehaviorSubject('Gregorian') },
-                {
-                    provide: MatDatepickerContent, useValue: {
-                        datepicker: {
-                            select: () => {
-                            }
-                        }
-                    }
-                }
-            ]
-        })
-            .compileComponents();
-    }));
-
-    beforeEach(() => {
-        fixture = TestBed.createComponent(CalendarHeaderComponent);
-        component = fixture.componentInstance;
-        loader = TestbedHarnessEnvironment.loader(fixture);
-        fixture.detectChanges();
-    });
-
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
-
-    it('should init the selected value and options correctly', async () => {
-
-        const select = await loader.getHarness(MatSelectHarness);
-        const initVal = await select.getValueText();
-
-        expect(initVal).toEqual('Gregorian');
-
-        await select.open();
-
-        const options = await select.getOptions();
-
-        expect(options.length).toEqual(2);
-
-        const option1 = await options[0].getText();
-
-        expect(option1).toEqual('Gregorian');
-
-        const option2 = await options[1].getText();
-
-        expect(option2).toEqual('Julian');
-
-    });
-
-    it('should perform a calendar conversion when the selection is changed', async () => {
-
-        const dateAdapter: DateAdapter<JDNConvertibleCalendar> = TestBed.inject(DateAdapter);
-
-        const dateAdapterSpy = spyOn(dateAdapter as JDNConvertibleCalendarDateAdapter, 'convertCalendar').and.callFake(
-            (date, calendar) => new JulianCalendarDate(new CalendarPeriod(new CalendarDate(2020, 3, 4), new CalendarDate(2020, 3, 4))));
-
-        const matCal = TestBed.inject(MatCalendar);
-
-        const matCalendarSpy = spyOn(matCal, 'updateTodaysDate').and.stub();
-
-        const datepickerContent = TestBed.inject(MatDatepickerContent);
-
-        const datepickerContentSpy = spyOn(datepickerContent.datepicker, 'select').and.stub();
-
-        const select = await loader.getHarness(MatSelectHarness);
-
-        await select.open();
-
-        const options = await select.getOptions({ text: 'Julian' });
-
-        expect(options.length).toEqual(1);
-
-        await options[0].click();
-
-        expect(dateAdapterSpy).toHaveBeenCalledTimes(1);
-
-        expect(dateAdapterSpy).toHaveBeenCalledWith(new GregorianCalendarDate(new CalendarPeriod(new CalendarDate(2020, 3, 17), new CalendarDate(2020, 3, 17))), 'Julian');
-
-        expect(matCal.activeDate).toEqual(new JulianCalendarDate(new CalendarPeriod(new CalendarDate(2020, 3, 4), new CalendarDate(2020, 3, 4))));
-
-        expect(datepickerContentSpy).toHaveBeenCalledTimes(1);
-
-        expect(matCalendarSpy).toHaveBeenCalledTimes(1);
-
-    });
-
-    it('should unsubscribe from value changes subscription when the component is destroyed', () => {
-
-        expect(component.valueChangesSubscription.closed).toEqual(false);
-
-        component.ngOnDestroy();
-
-        expect(component.valueChangesSubscription.closed).toEqual(true);
-
-    });
-
-});
diff --git a/src/app/workspace/resource/values/date-value/calendar-header/calendar-header.component.ts b/src/app/workspace/resource/values/date-value/calendar-header/calendar-header.component.ts
deleted file mode 100644
index 0da33b6de1..0000000000
--- a/src/app/workspace/resource/values/date-value/calendar-header/calendar-header.component.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-/** custom header component containing a calendar format switcher */
-import { JDNConvertibleCalendarDateAdapter } from 'jdnconvertiblecalendardateadapter';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
-import { JDNConvertibleCalendar } from 'jdnconvertiblecalendar';
-import { MatCalendar, MatDatepickerContent } from '@angular/material/datepicker';
-import { DateAdapter } from '@angular/material/core';
-import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
-import { Subscription } from 'rxjs';
-
-@Component({
-    selector: 'app-calendar-header',
-    templateUrl: './calendar-header.component.html',
-    styleUrls: ['./calendar-header.component.scss']
-})
-export class CalendarHeaderComponent<D> implements OnInit, OnDestroy {
-    form: FormGroup;
-    formControl: FormControl;
-    valueChangesSubscription: Subscription;
-
-    // a list of supported calendars (Gregorian and Julian)
-    supportedCalendars = ['Gregorian', 'Julian'];
-
-    constructor(private _calendar: MatCalendar<JDNConvertibleCalendar>,
-        private _dateAdapter: DateAdapter<JDNConvertibleCalendar>,
-        private _datepickerContent: MatDatepickerContent<JDNConvertibleCalendar>,
-        @Inject(FormBuilder) private _fb: FormBuilder) {
-    }
-
-    ngOnInit() {
-
-        let activeCal;
-
-        // get the currently active calendar from the date adapter
-        if (this._dateAdapter instanceof JDNConvertibleCalendarDateAdapter) {
-            activeCal = this._dateAdapter.activeCalendar;
-        } else {
-            console.log('date adapter is expected to be an instance of JDNConvertibleCalendarDateAdapter');
-        }
-
-        this.formControl = new FormControl(activeCal, Validators.required);
-
-        // build a form for the calendar format selection
-        this.form = this._fb.group({
-            calendar: this.formControl
-        });
-
-        // do the conversion when the user selects another calendar format
-        this.valueChangesSubscription = this.form.valueChanges.subscribe((data) => {
-            // pass the target calendar format to the conversion method
-            this.convertDate(data.calendar);
-        });
-
-    }
-
-    ngOnDestroy(): void {
-        if (this.valueChangesSubscription !== undefined) {
-            this.valueChangesSubscription.unsubscribe();
-        }
-    }
-
-    /**
-     * converts the date into the target format.
-     *
-     * @param calendar the target calendar format.
-     */
-    convertDate(calendar: 'Gregorian' | 'Julian') {
-
-        if (this._dateAdapter instanceof JDNConvertibleCalendarDateAdapter) {
-
-            // convert the date into the target calendar format
-            const convertedDate = this._dateAdapter.convertCalendar(this._calendar.activeDate, calendar);
-
-            // set the new date
-            this._calendar.activeDate = convertedDate;
-
-            // select the new date in the datepicker UI
-            this._datepickerContent.datepicker.select(convertedDate);
-
-            // update view after calendar format conversion
-            this._calendar.updateTodaysDate();
-        } else {
-            console.log('date adapter is expected to be an instance of JDNConvertibleCalendarDateAdapter');
-        }
-    }
-}
diff --git a/src/app/workspace/resource/values/date-value/date-input-text/date-edit/date-edit.component.html b/src/app/workspace/resource/values/date-value/date-input-text/date-edit/date-edit.component.html
deleted file mode 100644
index 6cc4040781..0000000000
--- a/src/app/workspace/resource/values/date-value/date-input-text/date-edit/date-edit.component.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<div [formGroup]="form">
-
-    <div class="era-radio">
-        <mat-radio-group class="era" [formControlName]="'era'" aria-label="Select an option" (change)="_handleInput()">
-            <mat-radio-button value="BCE">Before Common Era</mat-radio-button>
-            <mat-radio-button value="CE">Common Era</mat-radio-button>
-        </mat-radio-group>
-    </div>
-
-    <mat-form-field>
-        <mat-label>Year</mat-label>
-        <input class="year" matInput placeholder="Year" type="number" [formControlName]="'year'" min="1"
-               (input)="_handleInput()">
-        <div class="date-form-error">
-            <mat-error *ngIf="yearControl.hasError('required')">
-                <span class="custom-error-message">A year is <strong>required</strong>.</span>
-            </mat-error>
-            <mat-error *ngIf="yearControl.hasError('min')">
-                <span class="custom-error-message">A valid year is greater than 0.</span>
-            </mat-error>
-        </div>
-    </mat-form-field>
-    <mat-form-field>
-        <mat-label>Month</mat-label>
-        <mat-select class="month" [formControlName]="'month'" (selectionChange)="_handleInput()">
-            <mat-option [value]="null">no selection</mat-option>
-            <mat-option *ngFor="let month of months" [value]="month">
-                {{month}}
-            </mat-option>
-        </mat-select>
-    </mat-form-field>
-    <mat-form-field>
-        <mat-label>Day</mat-label>
-        <mat-select class="day" [formControlName]="'day'" (selectionChange)="_handleInput()">
-            <mat-option [value]="null">no selection</mat-option>
-            <mat-option *ngFor="let day of days" [value]="day">
-                {{day}}
-            </mat-option>
-        </mat-select>
-    </mat-form-field>
-</div>
diff --git a/src/app/workspace/resource/values/date-value/date-input-text/date-edit/date-edit.component.scss b/src/app/workspace/resource/values/date-value/date-input-text/date-edit/date-edit.component.scss
deleted file mode 100644
index b4aa4ed150..0000000000
--- a/src/app/workspace/resource/values/date-value/date-input-text/date-edit/date-edit.component.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.era-radio {
-  margin-bottom: 15px;
-}
-
-.date-form-error {
-  margin-top: -16px;
-}
diff --git a/src/app/workspace/resource/values/date-value/date-input-text/date-edit/date-edit.component.spec.ts b/src/app/workspace/resource/values/date-value/date-input-text/date-edit/date-edit.component.spec.ts
deleted file mode 100644
index fc2e4f971a..0000000000
--- a/src/app/workspace/resource/values/date-value/date-input-text/date-edit/date-edit.component.spec.ts
+++ /dev/null
@@ -1,498 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-
-import { DateEditComponent } from './date-edit.component';
-import { Component, OnInit, ViewChild } from '@angular/core';
-import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import { KnoraDate } from '@dasch-swiss/dsp-js';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { MatRadioModule } from '@angular/material/radio';
-import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
-import { HarnessLoader } from '@angular/cdk/testing';
-import { MatSelectModule } from '@angular/material/select';
-import { MatInputHarness } from '@angular/material/input/testing';
-import { MatSelectHarness } from '@angular/material/select/testing';
-import { MatRadioGroupHarness } from '@angular/material/radio/testing';
-
-/**
- * test host component to simulate parent component.
- */
-@Component({
-    template: `
-        <div [formGroup]="form">
-            <mat-form-field>
-                <app-date-edit #dateEdit [formControlName]="'date'" [calendar]="calendar"></app-date-edit>
-            </mat-form-field>
-        </div>`
-})
-class TestHostComponent implements OnInit {
-
-    @ViewChild('dateEdit') dateEditComponent: DateEditComponent;
-
-    form: FormGroup;
-
-    calendar = 'JULIAN';
-
-    constructor(private _fb: FormBuilder) {
-    }
-
-    ngOnInit(): void {
-
-        this.form = this._fb.group({
-            date: [new KnoraDate('JULIAN', 'CE', 2018, 5, 19)]
-        });
-
-    }
-}
-
-/**
- * test host component to simulate parent component.
- */
-@Component({
-    template: `
-        <div [formGroup]="form">
-            <mat-form-field>
-                <app-date-edit #dateEdit [formControlName]="'date'" [calendar]="calendar" [valueRequiredValidator]="false"></app-date-edit>
-            </mat-form-field>
-        </div>`
-})
-class TestHostComponentNoValueRequiredComponent implements OnInit {
-
-    @ViewChild('dateEdit') dateEditComponent: DateEditComponent;
-
-    form: FormGroup;
-
-    calendar = 'JULIAN';
-
-    constructor(private _fb: FormBuilder) {
-    }
-
-    ngOnInit(): void {
-
-        this.form = this._fb.group({
-            date: [null]
-        });
-
-    }
-}
-
-describe('DateEditComponent', () => {
-    let testHostComponent: TestHostComponent;
-    let testHostFixture: ComponentFixture<TestHostComponent>;
-    let loader: HarnessLoader;
-
-    beforeEach(waitForAsync(() => {
-        TestBed.configureTestingModule({
-            imports: [
-                ReactiveFormsModule,
-                MatFormFieldModule,
-                MatInputModule,
-                MatRadioModule,
-                BrowserAnimationsModule,
-                MatSelectModule
-            ],
-            declarations: [DateEditComponent, TestHostComponent]
-        })
-            .compileComponents();
-    }));
-
-    beforeEach(() => {
-        testHostFixture = TestBed.createComponent(TestHostComponent);
-        testHostComponent = testHostFixture.componentInstance;
-        loader = TestbedHarnessEnvironment.loader(testHostFixture);
-        testHostFixture.detectChanges();
-
-        expect(testHostComponent).toBeTruthy();
-    });
-
-    it('should initialize a date with day precision correctly', async () => {
-
-        // init involves various "value changes" callbacks
-        await testHostFixture.whenStable();
-
-        expect(testHostComponent.dateEditComponent.calendar).toEqual('JULIAN');
-        expect(testHostComponent.dateEditComponent.eraControl.value).toEqual('CE');
-        expect(testHostComponent.dateEditComponent.yearControl.value).toEqual(2018);
-        expect(testHostComponent.dateEditComponent.monthControl.value).toEqual(5);
-        expect(testHostComponent.dateEditComponent.dayControl.value).toEqual(19);
-        expect(testHostComponent.dateEditComponent.form.valid).toBeTrue();
-
-        const value = testHostComponent.dateEditComponent.value;
-
-        expect(value.calendar).toEqual('JULIAN');
-        expect(value.year).toEqual(2018);
-        expect(value.month).toEqual(5);
-        expect(value.day).toEqual(19);
-
-        const eraRadioGroup = await loader.getHarness(MatRadioGroupHarness.with({ selector: '.era' }));
-        expect(await (await eraRadioGroup.getCheckedRadioButton()).getValue()).toEqual('CE');
-
-        const yearInput = await loader.getHarness(MatInputHarness.with({ selector: '.year' }));
-        expect(await yearInput.getValue()).toEqual('2018');
-        expect(await yearInput.isDisabled()).toBeFalse();
-
-        const monthInput = await loader.getHarness(MatSelectHarness.with({ selector: '.month' }));
-        expect(await monthInput.getValueText()).toEqual('5');
-        expect(await monthInput.isDisabled()).toBeFalse();
-
-        const dayInput = await loader.getHarness(MatSelectHarness.with({ selector: '.day' }));
-        expect(await dayInput.getValueText()).toEqual('19');
-        expect(await dayInput.isDisabled()).toBeFalse();
-
-    });
-
-    it('should initialize a date with month precision correctly', async () => {
-
-        // init involves various "value changes" callbacks
-        await testHostFixture.whenStable();
-
-        testHostComponent.form.controls.date.setValue(new KnoraDate('JULIAN', 'CE', 2018, 5));
-
-        expect(testHostComponent.dateEditComponent.calendar).toEqual('JULIAN');
-        expect(testHostComponent.dateEditComponent.eraControl.value).toEqual('CE');
-        expect(testHostComponent.dateEditComponent.yearControl.value).toEqual(2018);
-        expect(testHostComponent.dateEditComponent.monthControl.value).toEqual(5);
-        expect(testHostComponent.dateEditComponent.dayControl.value).toEqual(null);
-        expect(testHostComponent.dateEditComponent.form.valid).toBeTrue();
-
-        const value = testHostComponent.dateEditComponent.value;
-
-        expect(value.calendar).toEqual('JULIAN');
-        expect(value.year).toEqual(2018);
-        expect(value.month).toEqual(5);
-        expect(value.day).toBeUndefined();
-
-        const eraRadioGroup = await loader.getHarness(MatRadioGroupHarness.with({ selector: '.era' }));
-        expect(await (await eraRadioGroup.getCheckedRadioButton()).getValue()).toEqual('CE');
-
-        const yearInput = await loader.getHarness(MatInputHarness.with({ selector: '.year' }));
-        expect(await yearInput.getValue()).toEqual('2018');
-        expect(await yearInput.isDisabled()).toBeFalse();
-
-        const monthInput = await loader.getHarness(MatSelectHarness.with({ selector: '.month' }));
-        expect(await monthInput.getValueText()).toEqual('5');
-        expect(await monthInput.isDisabled()).toBeFalse();
-
-        const dayInput = await loader.getHarness(MatSelectHarness.with({ selector: '.day' }));
-        expect(await dayInput.getValueText()).toEqual('');
-        expect(await dayInput.isDisabled()).toBeFalse();
-
-    });
-
-    it('should initialize a date with year precision correctly', async () => {
-
-        // init involves various "value changes" callbacks
-        await testHostFixture.whenStable();
-
-        testHostComponent.form.controls.date.setValue(new KnoraDate('JULIAN', 'CE', 2018));
-
-        expect(testHostComponent.dateEditComponent.calendar).toEqual('JULIAN');
-        expect(testHostComponent.dateEditComponent.eraControl.value).toEqual('CE');
-        expect(testHostComponent.dateEditComponent.yearControl.value).toEqual(2018);
-        expect(testHostComponent.dateEditComponent.monthControl.value).toEqual(null);
-        expect(testHostComponent.dateEditComponent.dayControl.value).toEqual(null);
-        expect(testHostComponent.dateEditComponent.form.valid).toBeTrue();
-
-        const value = testHostComponent.dateEditComponent.value;
-
-        expect(value.calendar).toEqual('JULIAN');
-        expect(value.year).toEqual(2018);
-        expect(value.month).toBeUndefined();
-        expect(value.day).toBeUndefined();
-
-        const eraRadioGroup = await loader.getHarness(MatRadioGroupHarness.with({ selector: '.era' }));
-        expect(await (await eraRadioGroup.getCheckedRadioButton()).getValue()).toEqual('CE');
-
-        const yearInput = await loader.getHarness(MatInputHarness.with({ selector: '.year' }));
-        expect(await yearInput.getValue()).toEqual('2018');
-        expect(await yearInput.isDisabled()).toBeFalse();
-
-        const monthInput = await loader.getHarness(MatSelectHarness.with({ selector: '.month' }));
-        expect(await monthInput.getValueText()).toEqual('');
-        expect(await monthInput.isDisabled()).toBeFalse();
-
-        const dayInput = await loader.getHarness(MatSelectHarness.with({ selector: '.day' }));
-        expect(await dayInput.getValueText()).toEqual('');
-        expect(await dayInput.isDisabled()).toBeTrue();
-
-    });
-
-    it('should set CE era for an empty value in the Julian calendar', async () => {
-
-        testHostComponent.form.controls.date.setValue(null);
-
-        // init involves various "value changes" callbacks
-        await testHostFixture.whenStable();
-
-        expect(testHostComponent.dateEditComponent.eraControl.value).toEqual('CE');
-        expect(testHostComponent.dateEditComponent.eraControl.enabled).toBeTrue();
-
-        expect(testHostComponent.dateEditComponent.value).toEqual(null);
-
-    });
-
-    it('should disable era for an empty value in the ISLAMIC calendar', async () => {
-
-        testHostComponent.form.controls.date.setValue(null);
-
-        testHostComponent.calendar = 'ISLAMIC';
-
-        testHostFixture.detectChanges();
-
-        // init involves various "value changes" callbacks
-        await testHostFixture.whenStable();
-
-        expect(testHostComponent.dateEditComponent.eraControl.value).toBeNull();
-        expect(testHostComponent.dateEditComponent.eraControl.disabled).toBeTrue();
-
-        expect(testHostComponent.dateEditComponent.value).toEqual(null);
-
-    });
-
-    it('should disable era for an ISLAMIC calendar date', async () => {
-
-        testHostComponent.form.controls.date.setValue(new KnoraDate('ISLAMIC', 'noEra', 1441));
-
-        testHostComponent.calendar = 'ISLAMIC';
-
-        testHostFixture.detectChanges();
-
-        // init involves various "value changes" callbacks
-        await testHostFixture.whenStable();
-
-        expect(testHostComponent.dateEditComponent.eraControl.value).toBeNull();
-        expect(testHostComponent.dateEditComponent.eraControl.disabled).toBeTrue();
-
-        expect(testHostComponent.dateEditComponent.value).toEqual(new KnoraDate('ISLAMIC', 'noEra', 1441));
-
-    });
-
-    it('should disable era when changing to the ISLAMIC calendar', async () => {
-
-        testHostComponent.calendar = 'ISLAMIC';
-
-        testHostFixture.detectChanges();
-
-        // init involves various "value changes" callbacks
-        await testHostFixture.whenStable();
-
-        expect(testHostComponent.dateEditComponent.eraControl.value).toBeNull();
-        expect(testHostComponent.dateEditComponent.eraControl.disabled).toBeTrue();
-
-        expect(testHostComponent.dateEditComponent.value).toEqual(new KnoraDate('ISLAMIC', 'noEra', 2018, 5, 19));
-
-    });
-
-    it('should enable era when changing from the Islamic calendar to the Gregorian calendar', async () => {
-
-        testHostComponent.calendar = 'ISLAMIC';
-
-        testHostFixture.detectChanges();
-
-        // init involves various "value changes" callbacks
-        await testHostFixture.whenStable();
-
-        expect(testHostComponent.dateEditComponent.eraControl.value).toBeNull();
-        expect(testHostComponent.dateEditComponent.eraControl.disabled).toBeTrue();
-
-        testHostComponent.calendar = 'GREGORIAN';
-
-        testHostFixture.detectChanges();
-
-        await testHostFixture.whenStable();
-
-        expect(testHostComponent.dateEditComponent.eraControl.value).toEqual('CE');
-        expect(testHostComponent.dateEditComponent.eraControl.enabled).toBeTrue();
-
-    });
-
-    it('should react to changing the calendar', async () => {
-
-        // init involves various "value changes" callbacks
-        await testHostFixture.whenStable();
-
-        expect(testHostComponent.dateEditComponent.calendar).toEqual('JULIAN');
-        expect(testHostComponent.dateEditComponent.eraControl.value).toEqual('CE');
-        expect(testHostComponent.dateEditComponent.yearControl.value).toEqual(2018);
-        expect(testHostComponent.dateEditComponent.monthControl.value).toEqual(5);
-        expect(testHostComponent.dateEditComponent.dayControl.value).toEqual(19);
-
-        const value = testHostComponent.dateEditComponent.value;
-
-        expect(value.calendar).toEqual('JULIAN');
-        expect(value.year).toEqual(2018);
-        expect(value.month).toEqual(5);
-        expect(value.day).toEqual(19);
-
-        const eraRadioGroup = await loader.getHarness(MatRadioGroupHarness.with({ selector: '.era' }));
-        expect(await (await eraRadioGroup.getCheckedRadioButton()).getValue()).toEqual('CE');
-
-        const yearInput = await loader.getHarness(MatInputHarness.with({ selector: '.year' }));
-        expect(await yearInput.getValue()).toEqual('2018');
-
-        const monthInput = await loader.getHarness(MatSelectHarness.with({ selector: '.month' }));
-        expect(await monthInput.getValueText()).toEqual('5');
-
-        const dayInput = await loader.getHarness(MatSelectHarness.with({ selector: '.day' }));
-        expect(await dayInput.getValueText()).toEqual('19');
-
-        // change calendar @Input
-        testHostComponent.calendar = 'GREGORIAN';
-
-        testHostFixture.detectChanges();
-
-        await testHostFixture.whenStable();
-
-        const newValue = testHostComponent.dateEditComponent.value;
-
-        expect(newValue.calendar).toEqual('GREGORIAN');
-        expect(newValue.era).toEqual('CE');
-        expect(value.year).toEqual(2018);
-        expect(value.month).toEqual(5);
-        expect(value.day).toEqual(19);
-
-    });
-
-    it('should reinit the days when changing the calendar', async () => {
-
-        testHostComponent.form.controls.date.setValue(new KnoraDate('JULIAN', 'CE', 2021, 3, 31));
-
-        // init involves various "value changes" callbacks
-        await testHostFixture.whenStable();
-
-        expect(testHostComponent.dateEditComponent.dayControl.value).toEqual(31);
-
-        // change to Islamic calendar
-        testHostComponent.calendar = 'ISLAMIC';
-
-        testHostFixture.detectChanges();
-
-        await testHostFixture.whenStable();
-
-        expect(testHostComponent.dateEditComponent.dayControl.value).toEqual(30);
-
-    });
-
-    it('should reinit the day selection when month changes', async () => {
-
-        // init involves various "value changes" callbacks
-        await testHostFixture.whenStable();
-
-        expect(testHostComponent.dateEditComponent.calendar).toEqual('JULIAN');
-        expect(testHostComponent.dateEditComponent.eraControl.value).toEqual('CE');
-        expect(testHostComponent.dateEditComponent.yearControl.value).toEqual(2018);
-        expect(testHostComponent.dateEditComponent.monthControl.value).toEqual(5);
-        expect(testHostComponent.dateEditComponent.dayControl.value).toEqual(19);
-
-        const dayInput = await loader.getHarness(MatSelectHarness.with({ selector: '.day' }));
-
-        await dayInput.clickOptions();
-        expect((await dayInput.getOptions()).length).toEqual(32); // 31 + null
-
-        const monthInput = await loader.getHarness(MatSelectHarness.with({ selector: '.month' }));
-
-        await monthInput.clickOptions();
-
-        // choose February
-        const opts = await monthInput.getOptions();
-        expect(await opts[2].getText()).toEqual('2');
-        await opts[2].click();
-
-        await testHostFixture.whenStable();
-
-        // last day of February 2019 is 28
-        await dayInput.clickOptions();
-        const opts2 = await dayInput.getOptions();
-        expect(opts2.length).toEqual(29); // 28 + null
-        expect(await opts2[28].getText()).toEqual('28');
-
-        await opts2[28].click();
-
-        const value = testHostComponent.dateEditComponent.value;
-        expect(value.calendar).toEqual('JULIAN');
-        expect(value.year).toEqual(2018);
-        expect(value.month).toEqual(2);
-        expect(value.day).toEqual(28);
-
-    });
-
-    it('should change day selection to the latest possible day of the month when changing month selection', async () => {
-
-        testHostComponent.calendar = 'GREGORIAN';
-
-        testHostFixture.detectChanges();
-
-        testHostComponent.form.controls.date.setValue(new KnoraDate('GREGORIAN', 'CE', 2021, 3, 31));
-
-        // init involves various "value changes" callbacks
-        await testHostFixture.whenStable();
-
-        expect(testHostComponent.dateEditComponent.calendar).toEqual('GREGORIAN');
-        expect(testHostComponent.dateEditComponent.eraControl.value).toEqual('CE');
-        expect(testHostComponent.dateEditComponent.yearControl.value).toEqual(2021);
-        expect(testHostComponent.dateEditComponent.monthControl.value).toEqual(3);
-        expect(testHostComponent.dateEditComponent.dayControl.value).toEqual(31);
-
-        testHostComponent.dateEditComponent.monthControl.setValue(2);
-
-        expect(testHostComponent.dateEditComponent.dayControl.value).toEqual(28);
-
-    });
-
-    it('should consider a date without a year invalid', async () => {
-
-        // init involves various "value changes" callbacks
-        await testHostFixture.whenStable();
-
-        testHostComponent.dateEditComponent.yearControl.setValue(null);
-
-        expect(testHostComponent.dateEditComponent.form.valid).toBeFalse();
-
-    });
-
-});
-
-describe('DateEditComponent (no validator required)', () => {
-    let testHostComponent: TestHostComponentNoValueRequiredComponent;
-    let testHostFixture: ComponentFixture<TestHostComponentNoValueRequiredComponent>;
-    let loader: HarnessLoader;
-
-    beforeEach(waitForAsync(() => {
-        TestBed.configureTestingModule({
-            imports: [
-                ReactiveFormsModule,
-                MatFormFieldModule,
-                MatInputModule,
-                MatRadioModule,
-                BrowserAnimationsModule,
-                MatSelectModule
-            ],
-            declarations: [DateEditComponent, TestHostComponentNoValueRequiredComponent]
-        })
-            .compileComponents();
-    }));
-
-    beforeEach(() => {
-        testHostFixture = TestBed.createComponent(TestHostComponentNoValueRequiredComponent);
-        testHostComponent = testHostFixture.componentInstance;
-        loader = TestbedHarnessEnvironment.loader(testHostFixture);
-        testHostFixture.detectChanges();
-
-        expect(testHostComponent).toBeTruthy();
-    });
-
-    it('should be valid for an empty form (null)', async () => {
-
-        // init involves various "value changes" callbacks
-        await testHostFixture.whenStable();
-
-        expect(testHostComponent.dateEditComponent.form.valid).toBeTrue();
-
-        expect(testHostComponent.form.controls.date.value).toEqual(null);
-
-
-    });
-
-});
-
diff --git a/src/app/workspace/resource/values/date-value/date-input-text/date-edit/date-edit.component.ts b/src/app/workspace/resource/values/date-value/date-input-text/date-edit/date-edit.component.ts
deleted file mode 100644
index ff7e5ec17f..0000000000
--- a/src/app/workspace/resource/values/date-value/date-input-text/date-edit/date-edit.component.ts
+++ /dev/null
@@ -1,391 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-expressions */
-/* eslint-disable @typescript-eslint/naming-convention */
-/* eslint-disable @typescript-eslint/member-ordering */
-import {
-    Component,
-    DoCheck,
-    ElementRef,
-    HostBinding,
-    Input,
-    OnChanges,
-    OnDestroy,
-    OnInit,
-    Optional,
-    Self, SimpleChanges
-} from '@angular/core';
-import {
-    CanUpdateErrorState,
-    ErrorStateMatcher,
-    mixinErrorState
-} from '@angular/material/core';
-import { AbstractConstructor, Constructor } from '@angular/material/core/common-behaviors/constructor';
-import {
-    ControlValueAccessor,
-    FormBuilder,
-    FormControl,
-    FormGroup,
-    FormGroupDirective,
-    NgControl,
-    NgForm, Validators
-} from '@angular/forms';
-import { MatFormFieldControl } from '@angular/material/form-field';
-import { KnoraDate, KnoraPeriod } from '@dasch-swiss/dsp-js';
-import { Subject, Subscription } from 'rxjs';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { FocusMonitor } from '@angular/cdk/a11y';
-import { ValueService } from 'src/app/workspace/resource/services/value.service';
-
-// https://stackoverflow.com/questions/45661010/dynamic-nested-reactive-form-expressionchangedafterithasbeencheckederror
-const resolvedPromise = Promise.resolve(null);
-
-type CanUpdateErrorStateCtor = Constructor<CanUpdateErrorState> & AbstractConstructor<CanUpdateErrorState>;
-
-class MatInputBase {
-    constructor(public _defaultErrorStateMatcher: ErrorStateMatcher,
-        public _parentForm: NgForm,
-        public _parentFormGroup: FormGroupDirective,
-        public ngControl: NgControl) {
-    }
-}
-
-const _MatInputMixinBase: CanUpdateErrorStateCtor & typeof MatInputBase =
-    mixinErrorState(MatInputBase);
-
-@Component({
-    selector: 'app-date-edit',
-    templateUrl: './date-edit.component.html',
-    styleUrls: ['./date-edit.component.scss'],
-    providers: [{ provide: MatFormFieldControl, useExisting: DateEditComponent }]
-})
-export class DateEditComponent extends _MatInputMixinBase implements ControlValueAccessor, MatFormFieldControl<KnoraDate | KnoraPeriod>, DoCheck, CanUpdateErrorState, OnDestroy, OnInit, OnChanges {
-
-    static nextId = 0;
-
-    @Input() calendar: string;
-
-    @Input() valueRequiredValidator = true;
-
-    form: FormGroup;
-    stateChanges = new Subject<void>();
-
-    eraControl: FormControl;
-    yearControl: FormControl;
-    monthControl: FormControl;
-    dayControl: FormControl;
-
-    months = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
-
-    days = [];
-
-    readonly focused = false;
-
-    readonly controlType = 'app-date-edit';
-
-    private _subscriptions: Subscription[] = [];
-
-    @Input()
-    get value(): KnoraDate | null {
-
-        if (!this.form.valid
-            || this.calendar === undefined
-            || this.yearControl.value === null) { // in case valueRequiredValidator is set to false, return null for an empty year
-            return null;
-        }
-
-        let era: string;
-        if (this.eraControl.enabled) {
-            era = this.eraControl.value;
-        } else {
-            era = 'noEra';
-        }
-
-        return new KnoraDate(
-            this.calendar,
-            era,
-            this.yearControl.value,
-            this.monthControl.value ? this.monthControl.value : undefined,
-            this.dayControl.value ? this.dayControl.value : undefined
-        );
-    }
-
-    set value(date: KnoraDate | null) {
-
-        if (date instanceof KnoraDate) {
-
-            this._initEra(this.calendar, date.era);
-
-            this.yearControl.setValue(date.year);
-            this.monthControl.setValue(date.month ? date.month : null);
-            this.dayControl.setValue(date.day ? date.day : null);
-
-        } else {
-            // null
-
-            this._initEra(this.calendar, 'CE');
-
-            this.yearControl.setValue(null);
-            this.monthControl.setValue(null);
-            this.dayControl.setValue(null);
-
-        }
-
-        this.stateChanges.next();
-    }
-
-    @Input()
-    get disabled(): boolean {
-        return this._disabled;
-    }
-
-    set disabled(value: boolean) {
-        this._disabled = coerceBooleanProperty(value);
-        this._disabled ? this.form.disable() : this.form.enable();
-        this.stateChanges.next();
-    }
-
-    private _disabled = false;
-
-    @Input()
-    get placeholder() {
-        return this._placeholder;
-    }
-
-    set placeholder(plh) {
-        this._placeholder = plh;
-        this.stateChanges.next();
-    }
-
-    private _placeholder: string;
-
-    @Input()
-    get required() {
-        return this._required;
-    }
-
-    set required(req) {
-        this._required = coerceBooleanProperty(req);
-        this.stateChanges.next();
-    }
-
-    private _required = false;
-
-    @HostBinding('class.floating')
-    get shouldLabelFloat() {
-        return this.focused || !this.empty;
-    }
-
-    @HostBinding() id = `app-date-edit-${DateEditComponent.nextId++}`;
-
-    onChange = (_: any) => {
-    };
-
-    onTouched = () => {
-    };
-
-    get empty() {
-        return !this.yearControl && !this.monthControl && !this.dayControl;
-    }
-
-    constructor(fb: FormBuilder,
-        @Optional() @Self() public ngControl: NgControl,
-        private _fm: FocusMonitor,
-        private _elRef: ElementRef<HTMLElement>,
-        @Optional() _parentForm: NgForm,
-        @Optional() _parentFormGroup: FormGroupDirective,
-        _defaultErrorStateMatcher: ErrorStateMatcher,
-        private _valueService: ValueService) {
-
-        super(_defaultErrorStateMatcher, _parentForm, _parentFormGroup, ngControl);
-
-        if (this.ngControl != null) {
-            // setting the value accessor directly (instead of using
-            // the providers) to avoid running into a circular import.
-            this.ngControl.valueAccessor = this;
-        }
-
-        this.eraControl = new FormControl(null);
-
-        this.yearControl = new FormControl({
-            value: null,
-            disabled: false
-        });
-
-        this.monthControl = new FormControl({ value: null, disabled: true });
-
-        this.dayControl = new FormControl({ value: null, disabled: true });
-
-        // recalculate days of month when era changes
-        const eraChangesSubscription = this.eraControl.valueChanges.subscribe(
-            () => {
-                if (this.yearControl.valid && this.monthControl.value) {
-                    this._setDays(this.calendar, this.eraControl.value, this.yearControl.value, this.monthControl.value);
-                }
-            }
-        );
-
-        this._subscriptions.push(eraChangesSubscription);
-
-        // enable/disable month selection depending on year
-        // enable/disable day selection depending on
-        const yearChangesSubscription = this.yearControl.valueChanges.subscribe(
-            () => {
-                if (this.yearControl.valid) {
-                    this.monthControl.enable();
-                } else {
-                    this.monthControl.disable();
-                }
-
-                if (this.yearControl.valid && this.monthControl.value) {
-                    this.dayControl.enable();
-                } else {
-                    this.dayControl.disable();
-                }
-            }
-        );
-
-        this._subscriptions.push(yearChangesSubscription);
-
-        // enable/disable day selection depending on month
-        // recalculate days when month changes
-        const monthChangesSubscription = this.monthControl.valueChanges.subscribe(
-            () => {
-                if (this.yearControl.valid && this.monthControl.value) {
-                    this._setDays(this.calendar, this.eraControl.value, this.yearControl.value, this.monthControl.value);
-                }
-
-                if (this.monthControl.value) {
-                    this.dayControl.enable();
-                } else {
-                    this.dayControl.setValue(null);
-                    this.dayControl.disable();
-                }
-            }
-        );
-
-        this._subscriptions.push(monthChangesSubscription);
-
-        // init form
-        this.form = fb.group({
-            era: this.eraControl,
-            year: this.yearControl,
-            month: this.monthControl,
-            day: this.dayControl
-        });
-
-    }
-
-    ngOnInit() {
-        if (this.valueRequiredValidator) {
-            this.yearControl.setValidators([Validators.required, Validators.min(1)]);
-            this.yearControl.updateValueAndValidity();
-        }
-    }
-
-    ngOnChanges(changes: SimpleChanges) {
-
-        const calendar = this.calendar;
-        const era = this.eraControl.value;
-        const year =  this.yearControl.value;
-        const month = this.monthControl.value;
-
-        // async to prevent changed after checked error
-        resolvedPromise.then(
-            () => {
-                // reinit days on calendar change
-                this._setDays(calendar, era, year, month);
-
-                // enable / disable era, but preserve active era if possible
-                this._initEra(calendar, era);
-
-                this._handleInput();
-            }
-        );
-
-    }
-
-    ngDoCheck() {
-        if (this.ngControl) {
-            this.updateErrorState();
-        }
-    }
-
-    ngOnDestroy() {
-        this.stateChanges.complete();
-
-        this._subscriptions.forEach(
-            subs => {
-                if (subs instanceof Subscription && !subs.closed) {
-                    subs.unsubscribe();
-                }
-            }
-        );
-    }
-
-    writeValue(date: KnoraDate | null): void {
-        this.value = date;
-    }
-
-    registerOnChange(fn: any): void {
-        this.onChange = fn;
-    }
-
-    registerOnTouched(fn: any): void {
-        this.onTouched = fn;
-    }
-
-    _handleInput(): void {
-        this.onChange(this.value);
-    }
-
-    onContainerClick(event: MouseEvent): void {
-    }
-
-    setDescribedByIds(ids: string[]): void {
-    }
-
-    /**
-     *
-     * sets available days for a given year and month.
-     *
-     * @param calendar calendar of the given date.
-     * @param era era of the given date.
-     * @param year year of the given date.
-     * @param month month of the given date.
-     */
-    private _setDays(calendar: string, era: string, year: number, month: number) {
-
-        const yearAstro = this._valueService.convertHistoricalYearToAstronomicalYear(year, era, calendar);
-
-        const days = this._valueService.calculateDaysInMonth(calendar, yearAstro, month);
-
-        // empty array
-        this.days = [];
-        for (let i = 1; i <= days; i++) {
-            this.days.push(i);
-        }
-
-        // check if selected day is still valid, otherwise set to latest possible day
-        if (this.dayControl.value !== null && this.dayControl.value > this.days.length) {
-            this.dayControl.setValue(this.days.length);
-        }
-    }
-
-    /**
-     * inits the era control depending on the chosen calendar.
-     *
-     * @param calendar active calendar.
-     * @param era era to set.
-     */
-    private _initEra(calendar: string, era: string) {
-
-        if (calendar !== 'ISLAMIC') {
-            this.eraControl.enable();
-            this.eraControl.setValue(era !== null ? era : 'CE');
-        } else {
-            this.eraControl.setValue(null);
-            this.eraControl.disable();
-        }
-
-    }
-
-}
diff --git a/src/app/workspace/resource/values/date-value/date-input-text/date-input-text.component.html b/src/app/workspace/resource/values/date-value/date-input-text/date-input-text.component.html
deleted file mode 100644
index 71201e719f..0000000000
--- a/src/app/workspace/resource/values/date-value/date-input-text/date-input-text.component.html
+++ /dev/null
@@ -1,51 +0,0 @@
-<div [formGroup]="form">
-
-    <mat-checkbox class="period-checkbox" [formControlName]="'isPeriod'" (change)="_handleInput()">
-        is time period
-    </mat-checkbox>
-
-    <div class="date-form-grid">
-        <div class="date-form-field">
-
-            <mat-form-field>
-                <mat-label>Calendar</mat-label>
-                    <mat-select class="calendar-selection" [formControlName]="'calendar'">
-                        <mat-option *ngFor="let cal of calendars" [value]="cal">
-                            {{cal}}
-                        </mat-option>
-                    </mat-select>
-            </mat-form-field>
-        </div>
-    </div>
-
-    <div class="date-form-grid">
-        <div class="date-form-field">
-            <mat-form-field>
-                <mat-label *ngIf="isPeriodControl.value">Start</mat-label>
-                <app-date-edit class="start-date" [formControlName]="'startDate'" [calendar]="calendarControl.value" [valueRequiredValidator]="valueRequiredValidator"></app-date-edit>
-            </mat-form-field>
-        </div>
-
-        <span *ngIf="isPeriodControl.value">
-            <div class="date-form-field">
-                <mat-form-field>
-                    <mat-label>End</mat-label>
-                    <app-date-edit class="end-date" [formControlName]="'endDate'" [calendar]="calendarControl.value" [valueRequiredValidator]="valueRequiredValidator"></app-date-edit>
-                </mat-form-field>
-            </div>
-        </span>
-    </div>
-
-    <div class="date-form-error">
-        <mat-error *ngIf="startDate.hasError('required')">
-            <span class="custom-error-message">Start date is <strong>required</strong></span>
-        </mat-error>
-        <mat-error *ngIf="endDate.hasError('required')">
-            <span class="custom-error-message">End date is <strong>required</strong></span>
-        </mat-error>
-        <mat-error *ngIf="startDate.hasError('periodStartEnd')">
-            <span class="custom-error-message">End date must be after start date.</span>
-        </mat-error>
-    </div>
-
-</div>
diff --git a/src/app/workspace/resource/values/date-value/date-input-text/date-input-text.component.scss b/src/app/workspace/resource/values/date-value/date-input-text/date-input-text.component.scss
deleted file mode 100644
index e0e7baa1a7..0000000000
--- a/src/app/workspace/resource/values/date-value/date-input-text/date-input-text.component.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-.period-checkbox {
-  display: inline-block;
-  padding-bottom: 20px;
-}
-
-.date-form-grid {
-  display: grid;
-  grid-template-columns: 30% 30%;
-  grid-template-rows: auto;
-  column-gap: 12px;
-}
-
-.date-form-error {
-  margin-top: -16px;
-}
diff --git a/src/app/workspace/resource/values/date-value/date-input-text/date-input-text.component.spec.ts b/src/app/workspace/resource/values/date-value/date-input-text/date-input-text.component.spec.ts
deleted file mode 100644
index 93bae7d8f7..0000000000
--- a/src/app/workspace/resource/values/date-value/date-input-text/date-input-text.component.spec.ts
+++ /dev/null
@@ -1,423 +0,0 @@
-import { Component, forwardRef, Input, OnInit, ViewChild } from '@angular/core';
-import {
-    ControlValueAccessor,
-    FormBuilder,
-    FormControl,
-    FormGroup,
-    NG_VALUE_ACCESSOR,
-    NgControl,
-    ReactiveFormsModule
-} from '@angular/forms';
-import { KnoraDate, KnoraPeriod } from '@dasch-swiss/dsp-js';
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { HarnessLoader } from '@angular/cdk/testing';
-import { MatFormFieldControl, MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
-import { DateInputTextComponent } from './date-input-text.component';
-import { ErrorStateMatcher, MatOptionModule } from '@angular/material/core';
-import { Subject } from 'rxjs';
-import { MatSelectModule } from '@angular/material/select';
-import { By } from '@angular/platform-browser';
-import { MatCheckboxHarness } from '@angular/material/checkbox/testing';
-import { MatSelectHarness } from '@angular/material/select/testing';
-
-/**
- * test host component to simulate parent component.
- */
-@Component({
-    template: `
-        <div [formGroup]="form">
-            <mat-form-field>
-                <app-date-input-text #dateInputText [formControlName]="'date'"></app-date-input-text>
-            </mat-form-field>
-        </div>`
-})
-class TestHostComponent implements OnInit {
-
-    @ViewChild('dateInputText') dateInputTextComponent: DateInputTextComponent;
-
-    form: FormGroup;
-
-    constructor(private _fb: FormBuilder) {
-    }
-
-    ngOnInit(): void {
-
-        this.form = this._fb.group({
-            date: [new KnoraDate('JULIAN', 'CE', 2018, 5, 19)]
-        });
-
-    }
-}
-
-/**
- * test host component to simulate parent component.
- */
-@Component({
-    template: `
-        <div [formGroup]="form">
-            <mat-form-field>
-                <app-date-input-text #dateInputText [formControlName]="'date'"
-                                     [valueRequiredValidator]="false"></app-date-input-text>
-            </mat-form-field>
-        </div>`
-})
-class NoValueRequiredTestHostComponent implements OnInit {
-
-    @ViewChild('dateInputText') dateInputTextComponent: DateInputTextComponent;
-
-    form: FormGroup;
-
-    constructor(private _fb: FormBuilder) {
-    }
-
-    ngOnInit(): void {
-
-        this.form = this._fb.group({
-            date: new FormControl(null)
-        });
-
-    }
-}
-
-@Component({
-    selector: 'app-date-edit',
-    template: '',
-    providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            multi: true,
-            useExisting: forwardRef(() => TestDateEditComponent),
-        },
-        { provide: MatFormFieldControl, useExisting: TestDateEditComponent }
-    ]
-})
-
-class TestDateEditComponent implements ControlValueAccessor, MatFormFieldControl<any> {
-
-    @Input() value;
-    @Input() disabled: boolean;
-    @Input() empty: boolean;
-    @Input() placeholder: string;
-    @Input() required: boolean;
-    @Input() shouldLabelFloat: boolean;
-    @Input() errorStateMatcher: ErrorStateMatcher;
-    @Input() valueRequiredValidator = true;
-
-    @Input() calendar: string;
-    stateChanges = new Subject<void>();
-
-    errorState = false;
-    focused = false;
-    id = 'testid';
-    ngControl: NgControl | null;
-    onChange = (_: any) => {};
-
-
-    writeValue(date: KnoraDate | null): void {
-        this.value = date;
-    }
-
-    registerOnChange(fn: any): void {
-        this.onChange = fn;
-    }
-
-    registerOnTouched(fn: any): void {
-    }
-
-    onContainerClick(event: MouseEvent): void {
-    }
-
-    setDescribedByIds(ids: string[]): void {
-    }
-
-    _handleInput(): void {
-        this.onChange(this.value);
-    }
-
-}
-
-describe('DateInputTextComponent', () => {
-    let testHostComponent: TestHostComponent;
-    let testHostFixture: ComponentFixture<TestHostComponent>;
-    let loader: HarnessLoader;
-
-    beforeEach(waitForAsync(() => {
-        TestBed.configureTestingModule({
-            imports: [
-                ReactiveFormsModule,
-                MatFormFieldModule,
-                MatInputModule,
-                MatSelectModule,
-                MatOptionModule,
-                MatCheckboxModule,
-                BrowserAnimationsModule,
-            ],
-            declarations: [DateInputTextComponent, TestDateEditComponent, TestHostComponent]
-        })
-            .compileComponents();
-    }));
-
-    beforeEach(() => {
-        testHostFixture = TestBed.createComponent(TestHostComponent);
-        testHostComponent = testHostFixture.componentInstance;
-        loader = TestbedHarnessEnvironment.loader(testHostFixture);
-        testHostFixture.detectChanges();
-
-        expect(testHostComponent).toBeTruthy();
-    });
-
-    it('should initialize a date correctly', async () => {
-
-        expect(testHostComponent.dateInputTextComponent.calendarControl.value).toEqual('JULIAN');
-
-        expect(testHostComponent.dateInputTextComponent.startDate.value).toEqual(new KnoraDate('JULIAN', 'CE', 2018, 5, 19));
-
-        expect(testHostComponent.dateInputTextComponent.isPeriodControl.value).toBeFalse();
-
-        expect(testHostComponent.dateInputTextComponent.endDate.value).toBeNull();
-
-        const hostCompDe = testHostFixture.debugElement;
-        const dateEditComponentDe = hostCompDe.query(By.directive(TestDateEditComponent));
-
-        expect((dateEditComponentDe.componentInstance as TestDateEditComponent).calendar).toEqual('JULIAN');
-
-        expect((dateEditComponentDe.componentInstance as TestDateEditComponent).value).toEqual(new KnoraDate('JULIAN', 'CE', 2018, 5, 19));
-
-        expect(testHostComponent.dateInputTextComponent.form.valid).toBe(true);
-
-        const calendarSelection = await  loader.getHarness(MatSelectHarness.with({ selector: '.calendar-selection' }));
-        expect(await calendarSelection.getValueText()).toEqual('JULIAN');
-
-        const periodCheckbox = await loader.getHarness(MatCheckboxHarness.with({ selector: '.period-checkbox' }));
-        expect(await periodCheckbox.isChecked()).toEqual(false);
-
-        expect(testHostComponent.dateInputTextComponent.value instanceof KnoraDate).toBe(true);
-
-        expect(testHostComponent.dateInputTextComponent.value)
-            .toEqual(new KnoraDate('JULIAN', 'CE', 2018, 5, 19));
-
-    });
-
-    it('should initialize a period correctly', async () => {
-
-        testHostComponent.form.controls.date.setValue(new KnoraPeriod(new KnoraDate('JULIAN', 'CE', 2018, 5, 19), new KnoraDate('JULIAN', 'CE', 2019, 5, 19)));
-
-        expect(testHostComponent.dateInputTextComponent.calendarControl.value).toEqual('JULIAN');
-
-        expect(testHostComponent.dateInputTextComponent.startDate.value).toEqual(new KnoraDate('JULIAN', 'CE', 2018, 5, 19));
-
-        expect(testHostComponent.dateInputTextComponent.isPeriodControl.value).toBeTrue();
-
-        expect(testHostComponent.dateInputTextComponent.endDate.value).toEqual(new KnoraDate('JULIAN', 'CE', 2019, 5, 19));
-
-        testHostFixture.detectChanges();
-
-        const hostCompDe = testHostFixture.debugElement;
-
-        const startDateEditComponentDe = hostCompDe.query(By.css('.start-date'));
-
-        const endDateEditComponentDe = hostCompDe.query(By.css('.end-date'));
-
-        expect((startDateEditComponentDe.componentInstance as TestDateEditComponent).calendar).toEqual('JULIAN');
-
-        expect((startDateEditComponentDe.componentInstance as TestDateEditComponent).value).toEqual(new KnoraDate('JULIAN', 'CE', 2018, 5, 19));
-
-        expect((endDateEditComponentDe.componentInstance as TestDateEditComponent).calendar).toEqual('JULIAN');
-
-        expect((endDateEditComponentDe.componentInstance as TestDateEditComponent).value).toEqual(new KnoraDate('JULIAN', 'CE', 2019, 5, 19));
-
-        expect(testHostComponent.dateInputTextComponent.form.valid).toBe(true);
-
-        const calendarSelection = await  loader.getHarness(MatSelectHarness.with({ selector: '.calendar-selection' }));
-        expect(await calendarSelection.getValueText()).toEqual('JULIAN');
-
-        const periodCheckbox = await loader.getHarness(MatCheckboxHarness.with({ selector: '.period-checkbox' }));
-        expect(await periodCheckbox.isChecked()).toEqual(true);
-
-        expect(testHostComponent.dateInputTextComponent.value instanceof KnoraPeriod).toBe(true);
-
-        expect(testHostComponent.dateInputTextComponent.value)
-            .toEqual(new KnoraPeriod(new KnoraDate('JULIAN', 'CE', 2018, 5, 19), new KnoraDate('JULIAN', 'CE', 2019, 5, 19)));
-
-
-    });
-
-    it('should react correctly to changing the calendar for a single date', () => {
-
-        const hostCompDe = testHostFixture.debugElement;
-
-        const startDateEditComponentDe = hostCompDe.query(By.css('.start-date'));
-
-        expect((startDateEditComponentDe.componentInstance as TestDateEditComponent).calendar).toEqual('JULIAN');
-
-        testHostComponent.dateInputTextComponent.calendarControl.setValue('ISLAMIC');
-
-        testHostFixture.detectChanges();
-
-        expect((startDateEditComponentDe.componentInstance as TestDateEditComponent).calendar).toEqual('ISLAMIC');
-
-    });
-
-    it('should react correctly to changing the calendar for a period', () => {
-
-        testHostComponent.form.controls.date.setValue(new KnoraPeriod(new KnoraDate('JULIAN', 'CE', 2018, 5, 19), new KnoraDate('JULIAN', 'CE', 2019, 5, 19)));
-
-        expect(testHostComponent.dateInputTextComponent.calendarControl.value).toEqual('JULIAN');
-
-        expect(testHostComponent.dateInputTextComponent.startDate.value).toEqual(new KnoraDate('JULIAN', 'CE', 2018, 5, 19));
-
-        expect(testHostComponent.dateInputTextComponent.isPeriodControl.value).toBeTrue();
-
-        expect(testHostComponent.dateInputTextComponent.endDate.value).toEqual(new KnoraDate('JULIAN', 'CE', 2019, 5, 19));
-
-        testHostFixture.detectChanges();
-
-        const hostCompDe = testHostFixture.debugElement;
-
-        const startDateEditComponentDe = hostCompDe.query(By.css('.start-date'));
-
-        expect((startDateEditComponentDe.componentInstance as TestDateEditComponent).calendar).toEqual('JULIAN');
-
-        const endDateEditComponentDe = hostCompDe.query(By.css('.end-date'));
-
-        expect((endDateEditComponentDe.componentInstance as TestDateEditComponent).calendar).toEqual('JULIAN');
-
-        testHostComponent.dateInputTextComponent.calendarControl.setValue('ISLAMIC');
-
-        testHostFixture.detectChanges();
-
-        expect((startDateEditComponentDe.componentInstance as TestDateEditComponent).calendar).toEqual('ISLAMIC');
-
-        expect((endDateEditComponentDe.componentInstance as TestDateEditComponent).calendar).toEqual('ISLAMIC');
-
-    });
-
-    it('should propagate changes made by the user for a single date', async () => {
-
-        const hostCompDe = testHostFixture.debugElement;
-
-        const startDateEditComponentDe = hostCompDe.query(By.css('.start-date'));
-
-        (startDateEditComponentDe.componentInstance as TestDateEditComponent).writeValue(new KnoraDate('JULIAN', 'CE', 2019, 5, 19));
-        (startDateEditComponentDe.componentInstance as TestDateEditComponent)._handleInput();
-
-        await testHostFixture.whenStable();
-
-        expect(testHostComponent.dateInputTextComponent.form.valid).toBe(true);
-
-        expect(testHostComponent.form.controls.date.value).toEqual(new KnoraDate('JULIAN', 'CE', 2019, 5, 19));
-    });
-
-    it('should propagate changes made by the user for a period', async () => {
-
-        testHostComponent.dateInputTextComponent.isPeriodControl.setValue(true);
-
-        testHostFixture.detectChanges();
-
-        const hostCompDe = testHostFixture.debugElement;
-
-        const startDateEditComponentDe = hostCompDe.query(By.css('.start-date'));
-
-        (startDateEditComponentDe.componentInstance as TestDateEditComponent).writeValue(new KnoraDate('JULIAN', 'CE', 2019, 5, 19));
-        (startDateEditComponentDe.componentInstance as TestDateEditComponent)._handleInput();
-
-        const endDateEditComponentDe = hostCompDe.query(By.css('.end-date'));
-
-        (endDateEditComponentDe.componentInstance as TestDateEditComponent).writeValue(new KnoraDate('JULIAN', 'CE', 2020, 5, 19));
-        (endDateEditComponentDe.componentInstance as TestDateEditComponent)._handleInput();
-
-        await testHostFixture.whenStable();
-
-        expect(testHostComponent.dateInputTextComponent.form.valid).toBe(true);
-
-        expect(testHostComponent.form.controls.date.value).toEqual(new KnoraPeriod(new KnoraDate('JULIAN', 'CE', 2019, 5, 19), new KnoraDate('JULIAN', 'CE', 2020, 5, 19)));
-    });
-
-    it('should return "null" for an invalid user input (start date greater than end date)', async () => {
-
-        testHostComponent.dateInputTextComponent.isPeriodControl.setValue(true);
-
-        testHostComponent.dateInputTextComponent.startDate.setValue(new KnoraDate('JULIAN', 'CE', 2021, 5, 19));
-
-        testHostComponent.dateInputTextComponent.endDate.setValue(new KnoraDate('JULIAN', 'CE', 2020, 5, 19));
-
-        await testHostFixture.whenStable();
-
-        expect(testHostComponent.dateInputTextComponent.form.valid).toBe(false);
-
-        expect(testHostComponent.form.controls.date.value).toBeNull();
-    });
-
-    it('should return "null" for an invalid user input (start date greater than end date) 2', async () => {
-
-        testHostComponent.dateInputTextComponent.isPeriodControl.setValue(true);
-
-        testHostComponent.dateInputTextComponent.startDate.setValue(new KnoraDate('JULIAN', 'CE', 2021, 5, 19));
-
-        testHostComponent.dateInputTextComponent.endDate.setValue(new KnoraDate('JULIAN', 'BCE', 2022, 5, 19));
-
-        await testHostFixture.whenStable();
-
-        expect(testHostComponent.dateInputTextComponent.form.valid).toBe(false);
-
-        expect(testHostComponent.form.controls.date.value).toBeNull();
-    });
-
-    it('should initialize the date with an empty value', () => {
-
-        testHostComponent.form.controls.date.setValue(null);
-
-        expect(testHostComponent.dateInputTextComponent.startDate.value).toBe(null);
-        expect(testHostComponent.dateInputTextComponent.isPeriodControl.value).toBe(false);
-        expect(testHostComponent.dateInputTextComponent.endDate.value).toBe(null);
-        expect(testHostComponent.dateInputTextComponent.calendarControl.value).toEqual('GREGORIAN');
-
-        expect(testHostComponent.dateInputTextComponent.form.valid).toBe(false);
-
-    });
-
-});
-
-describe('DateInputTextComponent (no validator required)', () => {
-    let testHostComponent: NoValueRequiredTestHostComponent;
-    let testHostFixture: ComponentFixture<NoValueRequiredTestHostComponent>;
-    let loader: HarnessLoader;
-
-    beforeEach(waitForAsync(() => {
-        TestBed.configureTestingModule({
-            imports: [
-                ReactiveFormsModule,
-                MatFormFieldModule,
-                MatInputModule,
-                MatSelectModule,
-                MatOptionModule,
-                MatCheckboxModule,
-                BrowserAnimationsModule,
-            ],
-            declarations: [DateInputTextComponent, TestDateEditComponent, NoValueRequiredTestHostComponent]
-        })
-            .compileComponents();
-    }));
-
-    beforeEach(() => {
-        testHostFixture = TestBed.createComponent(NoValueRequiredTestHostComponent);
-        testHostComponent = testHostFixture.componentInstance;
-        loader = TestbedHarnessEnvironment.loader(testHostFixture);
-        testHostFixture.detectChanges();
-
-        expect(testHostComponent).toBeTruthy();
-    });
-
-    it('should receive the propagated valueRequiredValidator from the parent component', () => {
-        expect(testHostComponent.dateInputTextComponent.valueRequiredValidator).toBe(false);
-    });
-
-    it('should mark the form\'s validity correctly', () => {
-        expect(testHostComponent.dateInputTextComponent.form.valid).toBe(true);
-    });
-
-});
diff --git a/src/app/workspace/resource/values/date-value/date-input-text/date-input-text.component.ts b/src/app/workspace/resource/values/date-value/date-input-text/date-input-text.component.ts
deleted file mode 100644
index 86610e0a39..0000000000
--- a/src/app/workspace/resource/values/date-value/date-input-text/date-input-text.component.ts
+++ /dev/null
@@ -1,310 +0,0 @@
-/* eslint-disable @typescript-eslint/naming-convention */
-/* eslint-disable @typescript-eslint/member-ordering */
-/* eslint-disable @typescript-eslint/no-unused-expressions */
-import { Component, DoCheck, ElementRef, HostBinding, Input, OnDestroy, OnInit, Optional, Self } from '@angular/core';
-import {
-    CanUpdateErrorState,
-    ErrorStateMatcher,
-    mixinErrorState
-} from '@angular/material/core';
-import { AbstractConstructor, Constructor } from '@angular/material/core/common-behaviors/constructor';
-import {
-    AbstractControl,
-    ControlValueAccessor,
-    FormBuilder,
-    FormControl,
-    FormGroup,
-    FormGroupDirective,
-    NgControl,
-    NgForm,
-    ValidatorFn,
-    Validators
-} from '@angular/forms';
-import { MatFormFieldControl } from '@angular/material/form-field';
-import { JDNConvertibleCalendar } from 'jdnconvertiblecalendar';
-import { Subject, Subscription } from 'rxjs';
-import { FocusMonitor } from '@angular/cdk/a11y';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { KnoraDate, KnoraPeriod } from '@dasch-swiss/dsp-js';
-import { ValueService } from '../../../services/value.service';
-
-/** if a period is defined, start date must be before end date */
-export function periodStartEndValidator(isPeriod: FormControl, endDate: FormControl, valueService: ValueService): ValidatorFn {
-    return (control: AbstractControl): { [key: string]: any } | null => {
-
-        if (isPeriod.value && control.value !== null && endDate.value !== null) {
-            // period: check if start is before end
-
-            const jdnStartDate = valueService.createJDNCalendarDateFromKnoraDate(control.value);
-            const jdnEndDate = valueService.createJDNCalendarDateFromKnoraDate(endDate.value);
-
-            const invalid = jdnStartDate.toJDNPeriod().periodEnd >= jdnEndDate.toJDNPeriod().periodStart;
-
-            return invalid ? { 'periodStartEnd': { value: control.value } } : null;
-
-        }
-
-        return null;
-    };
-}
-
-type CanUpdateErrorStateCtor = Constructor<CanUpdateErrorState> & AbstractConstructor<CanUpdateErrorState>;
-
-class MatInputBase {
-    constructor(public _defaultErrorStateMatcher: ErrorStateMatcher,
-        public _parentForm: NgForm,
-        public _parentFormGroup: FormGroupDirective,
-        public ngControl: NgControl) {
-    }
-}
-
-const _MatInputMixinBase: CanUpdateErrorStateCtor & typeof MatInputBase =
-    mixinErrorState(MatInputBase);
-
-@Component({
-    selector: 'app-date-input-text',
-    templateUrl: './date-input-text.component.html',
-    styleUrls: ['./date-input-text.component.scss'],
-    providers: [{ provide: MatFormFieldControl, useExisting: DateInputTextComponent }]
-})
-export class DateInputTextComponent extends _MatInputMixinBase implements ControlValueAccessor, MatFormFieldControl<KnoraDate | KnoraPeriod>, DoCheck, CanUpdateErrorState, OnInit, OnDestroy, OnInit {
-
-    static nextId = 0;
-
-    @Input() valueRequiredValidator = true;
-
-    form: FormGroup;
-    stateChanges = new Subject<void>();
-
-    isPeriodControl: FormControl;
-    calendarControl: FormControl;
-    startDate: FormControl;
-    endDate: FormControl;
-
-    readonly focused = false;
-
-    readonly controlType = 'app-date-input-text';
-
-    calendars = JDNConvertibleCalendar.supportedCalendars.map(cal => cal.toUpperCase());
-
-    private _subscriptions: Subscription[] = [];
-
-    @Input()
-    get value(): KnoraDate | KnoraPeriod | null {
-
-        if (!this.form.valid) {
-            return null;
-        }
-
-        if (!this.isPeriodControl.value) {
-            return this.startDate.value;
-        } else {
-            if (this.startDate.value.calendar !== this.endDate.value.calendar) {
-                return null;
-            }
-
-            return new KnoraPeriod(this.startDate.value, this.endDate.value);
-        }
-    }
-
-    set value(date: KnoraDate | KnoraPeriod | null) {
-
-        if (date instanceof KnoraDate) {
-            // single date
-            this.calendarControl.setValue(date.calendar);
-            this.isPeriodControl.setValue(false);
-            this.startDate.setValue(date);
-        } else if (date instanceof KnoraPeriod) {
-            // period
-            this.calendarControl.setValue(date.start.calendar);
-            this.isPeriodControl.setValue(true);
-            this.startDate.setValue(date.start);
-            this.endDate.setValue(date.end);
-        } else {
-            // null
-            this.calendarControl.setValue('GREGORIAN');
-            this.isPeriodControl.setValue(false);
-            this.startDate.setValue(null);
-            this.endDate.setValue(null);
-        }
-
-        this.stateChanges.next();
-    }
-
-    @Input()
-    get disabled(): boolean {
-        return this._disabled;
-    }
-
-    set disabled(value: boolean) {
-        this._disabled = coerceBooleanProperty(value);
-        this._disabled ? this.form.disable() : this.form.enable();
-        this.stateChanges.next();
-    }
-
-    private _disabled = false;
-
-    @Input()
-    get placeholder() {
-        return this._placeholder;
-    }
-
-    set placeholder(plh) {
-        this._placeholder = plh;
-        this.stateChanges.next();
-    }
-
-    private _placeholder: string;
-
-    @Input()
-    get required() {
-        return this._required;
-    }
-
-    set required(req) {
-        this._required = coerceBooleanProperty(req);
-        this.stateChanges.next();
-    }
-
-    private _required = false;
-
-    @HostBinding('class.floating')
-    get shouldLabelFloat() {
-        return this.focused || !this.empty;
-    }
-
-    @HostBinding() id = `app-date-input-text-${DateInputTextComponent.nextId++}`;
-
-    constructor(fb: FormBuilder,
-        @Optional() @Self() public ngControl: NgControl,
-        private _fm: FocusMonitor,
-        private _elRef: ElementRef<HTMLElement>,
-        @Optional() _parentForm: NgForm,
-        @Optional() _parentFormGroup: FormGroupDirective,
-        _defaultErrorStateMatcher: ErrorStateMatcher,
-        private _valueService: ValueService) {
-        super(_defaultErrorStateMatcher, _parentForm, _parentFormGroup, ngControl);
-
-        if (this.ngControl != null) {
-            // setting the value accessor directly (instead of using
-            // the providers) to avoid running into a circular import.
-            this.ngControl.valueAccessor = this;
-        }
-
-        this.isPeriodControl = new FormControl(false); // tODO: if period, check if start is before end
-        this.calendarControl = new FormControl(null);
-
-        this.endDate = new FormControl(null);
-        this.startDate = new FormControl(null);
-
-        const eraChangesSubscription = this.isPeriodControl.valueChanges.subscribe(
-            isPeriod => {
-                this.endDate.clearValidators();
-
-                if (isPeriod && this.valueRequiredValidator) {
-                    // end date is required in case of a period
-                    this.endDate.setValidators([Validators.required]);
-                }
-
-                this.endDate.updateValueAndValidity();
-            }
-        );
-
-        this._subscriptions.push(eraChangesSubscription);
-
-        // tODO: find better way to detect changes
-        const startValueSubscription = this.startDate.valueChanges.subscribe(
-            () => {
-                // form's validity has not been updated yet,
-                // trigger update
-                this.form.updateValueAndValidity();
-                this._handleInput();
-            }
-        );
-
-        this._subscriptions.push(startValueSubscription);
-
-        // tODO: find better way to detect changes
-        const endValueSubscription = this.endDate.valueChanges.subscribe(
-            () => {
-                // trigger period check validator set on start date control
-                this.startDate.updateValueAndValidity();
-                // form's validity has not been updated yet,
-                // trigger update
-                this.form.updateValueAndValidity();
-                this._handleInput();
-            }
-        );
-
-        this._subscriptions.push(endValueSubscription);
-
-        // init form
-        this.form = fb.group({
-            isPeriod: this.isPeriodControl,
-            calendar: this.calendarControl,
-            startDate: this.startDate,
-            endDate: this.endDate
-        });
-
-    }
-
-    onChange = (_: any) => {
-    };
-
-    onTouched = () => {
-    };
-
-    get empty() {
-        return !this.startDate && !this.endDate;
-    }
-
-    ngOnInit(): void {
-        if (this.valueRequiredValidator) {
-            this.startDate.setValidators([Validators.required, periodStartEndValidator(this.isPeriodControl, this.endDate, this._valueService)]);
-        } else {
-            this.startDate.setValidators([periodStartEndValidator(this.isPeriodControl, this.endDate, this._valueService)]);
-        }
-        this.startDate.updateValueAndValidity();
-    }
-
-    ngDoCheck() {
-        if (this.ngControl) {
-            this.updateErrorState();
-        }
-    }
-
-    ngOnDestroy() {
-        this.stateChanges.complete();
-
-        this._subscriptions.forEach(
-            subs => {
-                if (subs instanceof Subscription && !subs.closed) {
-                    subs.unsubscribe();
-                }
-            }
-        );
-    }
-
-    writeValue(date: KnoraDate | KnoraPeriod | null): void {
-        this.value = date;
-    }
-
-    registerOnChange(fn: any): void {
-        this.onChange = fn;
-    }
-
-    registerOnTouched(fn: any): void {
-        this.onTouched = fn;
-    }
-
-    _handleInput(): void {
-        this.onChange(this.value);
-    }
-
-    onContainerClick(event: MouseEvent): void {
-    }
-
-    setDescribedByIds(ids: string[]): void {
-    }
-
-}
diff --git a/src/app/workspace/resource/values/date-value/date-input/date-input.component.html b/src/app/workspace/resource/values/date-value/date-input/date-input.component.html
deleted file mode 100644
index e4da69c6dc..0000000000
--- a/src/app/workspace/resource/values/date-value/date-input/date-input.component.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<div [formGroup]="form" class="date-input-container">
-
-    <mat-checkbox class="period-checkbox" [formControlName]="'isPeriod'" (change)="_handleInput()">
-        is time period
-    </mat-checkbox>
-
-    <div class="date-form-grid">
-        <div class="date-form-field">
-            <app-jdn-datepicker [activeCalendar]="startDateControl.value?.calendarName">
-                <mat-form-field class="start">
-                    <mat-label>Choose a <span *ngIf="isPeriodControl.value">start</span> date
-                        <span class="calendar" *ngIf="startDateControl.value">({{startDateControl.value?.calendarName}})</span>
-                    </mat-label>
-                    <input matInput [matDatepicker]="picker1" [formControlName]="'dateStart'"
-                        [errorStateMatcher]="matcher" (dateChange)="_handleInput()" readonly placeholder="Start">
-                    <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
-                    <mat-datepicker #picker1 [calendarHeaderComponent]="calendarHeaderComponent"></mat-datepicker>
-                </mat-form-field>
-            </app-jdn-datepicker>
-        </div>
-
-        <div class="date-form-field">
-            <app-jdn-datepicker [activeCalendar]="endDateControl.value?.calendarName">
-                <mat-form-field *ngIf="isPeriodControl.value" class="end">
-                    <mat-label>Choose an end date
-                        <span class="calendar" *ngIf="endDateControl.value">({{endDateControl.value?.calendarName}})</span>
-                    </mat-label>
-                    <input matInput [matDatepicker]="picker2" [formControlName]="'dateEnd'"
-                        (dateChange)="_handleInput()" readonly>
-                    <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
-                    <mat-datepicker #picker2 [calendarHeaderComponent]="calendarHeaderComponent"></mat-datepicker>
-                </mat-form-field>
-            </app-jdn-datepicker>
-        </div>
-    </div>
-
-    <div class="date-form-error">
-        <mat-error *ngIf="startDateControl.hasError('required')">
-            <span class="custom-error-message">Start date is <strong>required</strong></span>
-        </mat-error>
-        <mat-error *ngIf="startDateControl.hasError('sameCalendarRequired') && (startDateControl.value !== null || endDateControl.value !== null)">
-            <span class="custom-error-message">In a period, start and end dates are <strong>required</strong> and must use the same
-                <strong>calendar</strong></span>
-        </mat-error>
-        <mat-error *ngIf="startDateControl.hasError('periodStartEnd') && startDateControl.value !== null && endDateControl.value !== null">
-            <span class="custom-error-message">In a period, start must be <strong>before</strong> end</span>
-        </mat-error>
-    </div>
-
-</div>
diff --git a/src/app/workspace/resource/values/date-value/date-input/date-input.component.scss b/src/app/workspace/resource/values/date-value/date-input/date-input.component.scss
deleted file mode 100644
index 69f825df87..0000000000
--- a/src/app/workspace/resource/values/date-value/date-input/date-input.component.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-.period-checkbox {
-  display: inline-block;
-  padding-bottom: 20px;
-}
-
-.date-form-grid {
-  display: grid;
-  grid-template-columns: 49% 49%;
-  grid-template-rows: auto;
-  column-gap: 12px;
-}
-
-.date-form-error {
-  margin-top: -16px;
-}
-
diff --git a/src/app/workspace/resource/values/date-value/date-input/date-input.component.spec.ts b/src/app/workspace/resource/values/date-value/date-input/date-input.component.spec.ts
deleted file mode 100644
index 94c0d4f294..0000000000
--- a/src/app/workspace/resource/values/date-value/date-input/date-input.component.spec.ts
+++ /dev/null
@@ -1,341 +0,0 @@
-import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { DateInputComponent } from './date-input.component';
-import { Component, OnInit, ViewChild } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import { KnoraDate, KnoraPeriod } from '@dasch-swiss/dsp-js';
-import { JDNDatepickerDirective } from '../../jdn-datepicker-directive/jdndatepicker.directive';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { MatInputModule } from '@angular/material/input';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatJDNConvertibleCalendarDateAdapterModule } from 'jdnconvertiblecalendardateadapter';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { CalendarDate, GregorianCalendarDate, CalendarPeriod, JulianCalendarDate } from 'jdnconvertiblecalendar';
-import { By } from '@angular/platform-browser';
-import { HarnessLoader } from '@angular/cdk/testing';
-import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
-import { MatInputHarness } from '@angular/material/input/testing';
-
-/**
- * test host component to simulate parent component.
- */
-@Component({
-    template: `
-    <div [formGroup]="form">
-      <mat-form-field>
-        <app-date-input #dateInput [formControlName]="'date'"></app-date-input>
-      </mat-form-field>
-    </div>`
-})
-class TestHostComponent implements OnInit {
-
-    @ViewChild('dateInput') dateInputComponent: DateInputComponent;
-
-    form: FormGroup;
-
-    constructor(private _fb: FormBuilder) {
-    }
-
-    ngOnInit(): void {
-
-        this.form = this._fb.group({
-            date: [new KnoraDate('JULIAN', 'CE', 2018, 5, 19)]
-        });
-
-    }
-}
-
-/**
- * test host component to simulate parent component.
- */
-@Component({
-    template: `
-    <div [formGroup]="form">
-      <mat-form-field>
-        <app-date-input #dateInput [formControlName]="'date'" [valueRequiredValidator]="false"></app-date-input>
-      </mat-form-field>
-    </div>`
-})
-class NoValueRequiredTestHostComponent implements OnInit {
-
-    @ViewChild('dateInput') dateInputComponent: DateInputComponent;
-
-    form: FormGroup;
-
-    constructor(private _fb: FormBuilder) {
-    }
-
-    ngOnInit(): void {
-
-        this.form = this._fb.group({
-            date: new FormControl(null)
-        });
-
-    }
-}
-
-describe('DateInputComponent', () => {
-    let testHostComponent: TestHostComponent;
-    let testHostFixture: ComponentFixture<TestHostComponent>;
-    let loader: HarnessLoader;
-
-    beforeEach(waitForAsync(() => {
-        TestBed.configureTestingModule({
-            imports: [
-                ReactiveFormsModule,
-                MatFormFieldModule,
-                MatInputModule,
-                MatDatepickerModule,
-                MatCheckboxModule,
-                MatJDNConvertibleCalendarDateAdapterModule,
-                BrowserAnimationsModule
-            ],
-            declarations: [DateInputComponent, TestHostComponent, JDNDatepickerDirective]
-        })
-            .compileComponents();
-    }));
-
-    beforeEach(() => {
-        testHostFixture = TestBed.createComponent(TestHostComponent);
-        testHostComponent = testHostFixture.componentInstance;
-        loader = TestbedHarnessEnvironment.loader(testHostFixture);
-        testHostFixture.detectChanges();
-
-        expect(testHostComponent).toBeTruthy();
-    });
-
-    it('should initialize a date correctly', async () => {
-
-        expect(testHostComponent.dateInputComponent.value instanceof KnoraDate).toBe(true);
-        expect(testHostComponent.dateInputComponent.value)
-            .toEqual(new KnoraDate('JULIAN', 'CE', 2018, 5, 19));
-
-        expect(testHostComponent.dateInputComponent.startDateControl.value)
-            .toEqual(new JulianCalendarDate(new CalendarPeriod(new CalendarDate(2018, 5, 19), new CalendarDate(2018, 5, 19))));
-
-        expect(testHostComponent.dateInputComponent.isPeriodControl.value).toBe(false);
-
-        expect(testHostComponent.dateInputComponent.endDateControl.value).toBe(null);
-
-        expect(testHostComponent.dateInputComponent.form.valid).toBe(true);
-
-        // check that MatDatepicker has been initialized correctly
-        const dateStartInput = await loader.getAllHarnesses(MatInputHarness);
-
-        expect(dateStartInput.length).toEqual(1);
-
-        const startDate = await dateStartInput[0].getValue();
-
-        expect(startDate).toEqual('19-05-2018');
-
-        const startDateReadonly = await dateStartInput[0].isReadonly();
-
-        expect(startDateReadonly).toBe(true);
-
-    });
-
-    it('should initialize a period correctly', async () => {
-
-        testHostComponent.form.controls.date.setValue(new KnoraPeriod(new KnoraDate('JULIAN', 'CE', 2018, 5, 19), new KnoraDate('JULIAN', 'CE', 2019, 5, 19)));
-
-        expect(testHostComponent.dateInputComponent.value instanceof KnoraPeriod).toBe(true);
-        expect(testHostComponent.dateInputComponent.value)
-            .toEqual(new KnoraPeriod(new KnoraDate('JULIAN', 'CE', 2018, 5, 19), new KnoraDate('JULIAN', 'CE', 2019, 5, 19)));
-
-        expect(testHostComponent.dateInputComponent.startDateControl.value)
-            .toEqual(new JulianCalendarDate(new CalendarPeriod(new CalendarDate(2018, 5, 19), new CalendarDate(2018, 5, 19))));
-
-        expect(testHostComponent.dateInputComponent.isPeriodControl.value).toBe(true);
-
-        expect(testHostComponent.dateInputComponent.endDateControl.value)
-            .toEqual(new JulianCalendarDate(new CalendarPeriod(new CalendarDate(2019, 5, 19), new CalendarDate(2019, 5, 19))));
-
-        expect(testHostComponent.dateInputComponent.form.valid).toBe(true);
-
-        // check that MatDatepicker has been initialized correctly
-        const dateStartInput = await loader.getHarness(MatInputHarness.with({ ancestor: '.start' }));
-
-        const startDate = await dateStartInput.getValue();
-
-        expect(startDate).toEqual('19-05-2018');
-
-        const startDateReadonly = await dateStartInput.isReadonly();
-
-        expect(startDateReadonly).toBe(true);
-
-        const dateEndInput = await loader.getHarness(MatInputHarness.with({ ancestor: '.end' }));
-
-        const endDate = await dateEndInput.getValue();
-
-        expect(endDate).toEqual('19-05-2019');
-
-        const endDateReadonly = await dateEndInput.isReadonly();
-
-        expect(endDateReadonly).toBe(true);
-
-    });
-
-    it('should propagate changes made by the user for a single date', () => {
-
-        testHostComponent.dateInputComponent.form.controls.dateStart.setValue(new JulianCalendarDate(new CalendarPeriod(new CalendarDate(2019, 5, 19), new CalendarDate(2019, 5, 19))));
-
-        testHostComponent.dateInputComponent._handleInput();
-
-        expect(testHostComponent.dateInputComponent.form.valid).toBe(true);
-
-        expect(testHostComponent.form.controls.date.value).toEqual(new KnoraDate('JULIAN', 'CE', 2019, 5, 19));
-    });
-
-    it('should propagate changes made by the user for a period', () => {
-
-        testHostComponent.dateInputComponent.form.controls.dateStart.setValue(new JulianCalendarDate(new CalendarPeriod(new CalendarDate(2019, 5, 19), new CalendarDate(2019, 5, 19))));
-
-        testHostComponent.dateInputComponent.form.controls.isPeriod.setValue(true);
-
-        testHostComponent.dateInputComponent.form.controls.dateEnd.setValue(new JulianCalendarDate(new CalendarPeriod(new CalendarDate(2020, 5, 19), new CalendarDate(2020, 5, 19))));
-
-        testHostComponent.dateInputComponent._handleInput();
-
-        expect(testHostComponent.dateInputComponent.form.valid).toBe(true);
-
-        expect(testHostComponent.form.controls.date.value).toEqual(new KnoraPeriod(new KnoraDate('JULIAN', 'CE', 2019, 5, 19), new KnoraDate('JULIAN', 'CE', 2020, 5, 19)));
-    });
-
-    it('should return "null" for an invalid user input (start date greater than end date)', () => {
-
-        testHostComponent.dateInputComponent.form.controls.dateStart.setValue(new JulianCalendarDate(new CalendarPeriod(new CalendarDate(2021, 5, 19), new CalendarDate(2021, 5, 19))));
-
-        testHostComponent.dateInputComponent.form.controls.isPeriod.setValue(true);
-
-        testHostComponent.dateInputComponent.form.controls.dateEnd.setValue(new JulianCalendarDate(new CalendarPeriod(new CalendarDate(2020, 5, 19), new CalendarDate(2020, 5, 19))));
-
-        testHostComponent.dateInputComponent._handleInput();
-
-        expect(testHostComponent.dateInputComponent.form.valid).toBe(false);
-
-        expect(testHostComponent.dateInputComponent.value).toEqual(null);
-
-    });
-
-    it('should return "null" for an invalid user input (start date and end date have different calendars)', () => {
-
-        testHostComponent.dateInputComponent.form.controls.dateStart.setValue(new JulianCalendarDate(new CalendarPeriod(new CalendarDate(2021, 5, 19), new CalendarDate(2021, 5, 19))));
-
-        testHostComponent.dateInputComponent.form.controls.isPeriod.setValue(true);
-
-        testHostComponent.dateInputComponent.form.controls.dateEnd.setValue(new GregorianCalendarDate(new CalendarPeriod(new CalendarDate(2022, 5, 19), new CalendarDate(2022, 5, 19))));
-
-        testHostComponent.dateInputComponent._handleInput();
-
-        expect(testHostComponent.dateInputComponent.form.valid).toBe(false);
-
-        expect(testHostComponent.dateInputComponent.value).toEqual(null);
-
-    });
-
-    it('should return "null" for an invalid user input (start date is "null")', () => {
-
-        testHostComponent.dateInputComponent.form.controls.dateStart.setValue(null);
-
-        testHostComponent.dateInputComponent.form.controls.isPeriod.setValue(true);
-
-        testHostComponent.dateInputComponent.form.controls.dateEnd.setValue(new JulianCalendarDate(new CalendarPeriod(new CalendarDate(2020, 5, 19), new CalendarDate(2020, 5, 19))));
-
-        expect(testHostComponent.dateInputComponent.form.valid).toBe(false);
-
-        expect(testHostComponent.dateInputComponent.value).toEqual(null);
-
-    });
-
-    it('should initialize the date with an empty value', () => {
-
-        testHostComponent.form.controls.date.setValue(null);
-
-        expect(testHostComponent.dateInputComponent.form.controls.dateStart.value).toBe(null);
-        expect(testHostComponent.dateInputComponent.form.controls.isPeriod.value).toBe(false);
-        expect(testHostComponent.dateInputComponent.form.controls.dateEnd.value).toBe(null);
-
-        expect(testHostComponent.dateInputComponent.form.valid).toBe(false);
-
-    });
-
-    it('should show the toggle', () => {
-
-        testHostComponent.dateInputComponent.form.controls.isPeriod.setValue(true);
-
-        testHostFixture.detectChanges();
-
-        const hostCompDe = testHostFixture.debugElement;
-        const dateInputComponentDe = hostCompDe.query(By.directive(DateInputComponent));
-
-        const startDateToggle = dateInputComponentDe.query(By.css('.start mat-datepicker-toggle'));
-
-        expect(startDateToggle).not.toBe(null);
-
-        const endDateToggle = dateInputComponentDe.query(By.css('.end mat-datepicker-toggle'));
-
-        expect(endDateToggle).not.toBe(null);
-    });
-
-
-    it('should show the calendar of a date', () => {
-
-        const hostCompDe = testHostFixture.debugElement;
-        const dateInputComponentDe = hostCompDe.query(By.directive(DateInputComponent));
-
-        const startDateCalendar = dateInputComponentDe.query(By.css('.start span.calendar'));
-
-        expect(startDateCalendar).not.toBe(null);
-
-    });
-
-    it('should mark the form\'s validity correctly', () => {
-        expect(testHostComponent.dateInputComponent.valueRequiredValidator).toBe(true);
-        expect(testHostComponent.dateInputComponent.form.valid).toBe(true);
-
-        testHostComponent.dateInputComponent.startDateControl.setValue(null);
-
-        testHostComponent.dateInputComponent._handleInput();
-
-        expect(testHostComponent.dateInputComponent.form.valid).toBe(false);
-    });
-
-});
-
-describe('NoValueRequiredTestHostComponent', () => {
-    let testHostComponent: NoValueRequiredTestHostComponent;
-    let testHostFixture: ComponentFixture<NoValueRequiredTestHostComponent>;
-
-    beforeEach(waitForAsync(() => {
-        TestBed.configureTestingModule({
-            imports: [
-                ReactiveFormsModule,
-                MatFormFieldModule,
-                MatInputModule,
-                MatDatepickerModule,
-                MatCheckboxModule,
-                MatJDNConvertibleCalendarDateAdapterModule,
-                BrowserAnimationsModule
-            ],
-            declarations: [DateInputComponent, NoValueRequiredTestHostComponent, JDNDatepickerDirective]
-        })
-            .compileComponents();
-    }));
-
-    beforeEach(() => {
-        testHostFixture = TestBed.createComponent(NoValueRequiredTestHostComponent);
-        testHostComponent = testHostFixture.componentInstance;
-        testHostFixture.detectChanges();
-
-        expect(testHostComponent).toBeTruthy();
-    });
-
-    it('should receive the propagated valueRequiredValidator from the parent component', () => {
-        expect(testHostComponent.dateInputComponent.valueRequiredValidator).toBe(false);
-    });
-
-    it('should mark the form\'s validity correctly', () => {
-        expect(testHostComponent.dateInputComponent.form.valid).toBe(true);
-    });
-});
diff --git a/src/app/workspace/resource/values/date-value/date-input/date-input.component.ts b/src/app/workspace/resource/values/date-value/date-input/date-input.component.ts
deleted file mode 100644
index dba047c936..0000000000
--- a/src/app/workspace/resource/values/date-value/date-input/date-input.component.ts
+++ /dev/null
@@ -1,353 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-expressions */
-/* eslint-disable @typescript-eslint/member-ordering */
-import { FocusMonitor } from '@angular/cdk/a11y';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { Component, DoCheck, ElementRef, HostBinding, Input, OnDestroy, OnInit, Optional, Self } from '@angular/core';
-import {
-    AbstractControl,
-    ControlValueAccessor,
-    FormBuilder,
-    FormControl,
-    FormGroup,
-    FormGroupDirective,
-    NgControl,
-    NgForm,
-    ValidatorFn,
-    Validators
-} from '@angular/forms';
-import { CanUpdateErrorState, ErrorStateMatcher, mixinErrorState } from '@angular/material/core';
-import { AbstractConstructor, Constructor } from '@angular/material/core/common-behaviors/constructor';
-import { MatFormFieldControl } from '@angular/material/form-field';
-import { KnoraDate, KnoraPeriod } from '@dasch-swiss/dsp-js';
-import {
-    CalendarDate,
-    CalendarPeriod,
-    GregorianCalendarDate,
-    JDNConvertibleCalendar,
-    JulianCalendarDate
-} from 'jdnconvertiblecalendar';
-import { Subject } from 'rxjs';
-import { CalendarHeaderComponent } from '../calendar-header/calendar-header.component';
-
-/** error when invalid control is dirty, touched, or submitted. */
-export class DateInputErrorStateMatcher implements ErrorStateMatcher {
-    isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
-        const isSubmitted = form && form.submitted;
-        return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
-    }
-}
-
-/** if a period is defined, start and end date must have the same calendar */
-export function sameCalendarValidator(isPeriod: FormControl, endDate: FormControl): ValidatorFn {
-    return (control: AbstractControl): { [key: string]: any } | null => {
-
-        if (isPeriod.value) {
-
-            let invalid = true;
-            if (control.value instanceof JDNConvertibleCalendar && endDate.value instanceof JDNConvertibleCalendar) {
-                invalid = control.value.calendarName !== endDate.value.calendarName;
-            }
-
-            return invalid ? { 'sameCalendarRequired': { value: control.value } } : null;
-        }
-
-        return null;
-    };
-}
-
-/** if a period is defined, start date must be before end date */
-export function periodStartEndValidator(isPeriod: FormControl, endDate: FormControl): ValidatorFn {
-    return (control: AbstractControl): { [key: string]: any } | null => {
-
-        if (isPeriod.value) {
-            let invalid = true;
-
-            if (control.value instanceof JDNConvertibleCalendar && endDate.value instanceof JDNConvertibleCalendar) {
-
-                // check if start is before end
-                const startAsJdnPeriod = (control.value as JDNConvertibleCalendar).toJDNPeriod();
-                const endAsJdnPeriod = (endDate.value as JDNConvertibleCalendar).toJDNPeriod();
-
-                // check for start after end
-                invalid = startAsJdnPeriod.periodStart >= endAsJdnPeriod.periodStart;
-            }
-
-            return invalid ? { 'periodStartEnd': { value: control.value } } : null;
-        }
-
-        return null;
-    };
-}
-
-type CanUpdateErrorStateCtor = Constructor<CanUpdateErrorState> & AbstractConstructor<CanUpdateErrorState>;
-
-class MatInputBase {
-    constructor(public _defaultErrorStateMatcher: ErrorStateMatcher,
-        public _parentForm: NgForm,
-        public _parentFormGroup: FormGroupDirective,
-        public ngControl: NgControl) {
-    }
-}
-
-const _MatInputMixinBase: CanUpdateErrorStateCtor & typeof MatInputBase =
-    mixinErrorState(MatInputBase);
-
-@Component({
-    selector: 'app-date-input',
-    templateUrl: './date-input.component.html',
-    styleUrls: ['./date-input.component.scss'],
-    providers: [{ provide: MatFormFieldControl, useExisting: DateInputComponent }]
-})
-export class DateInputComponent extends _MatInputMixinBase implements ControlValueAccessor, MatFormFieldControl<KnoraDate | KnoraPeriod>, DoCheck, CanUpdateErrorState, OnDestroy, OnInit {
-
-    static nextId = 0;
-
-    @HostBinding() id = `app-date-input-${DateInputComponent.nextId++}`;
-    @Input() valueRequiredValidator = true;
-
-    form: FormGroup;
-    stateChanges = new Subject<void>();
-    focused = false;
-    errorState = false;
-    controlType = 'app-date-input';
-    matcher = new DateInputErrorStateMatcher();
-
-    calendarHeaderComponent = CalendarHeaderComponent;
-    startDateControl: FormControl;
-    endDateControl: FormControl;
-    isPeriodControl: FormControl;
-
-    onChange = (_: any) => {
-    };
-    onTouched = () => {
-    };
-
-    get empty() {
-        const userInput = this.form.value;
-        return !userInput.start && !userInput.end;
-    }
-
-    @HostBinding('class.floating')
-    get shouldLabelFloat() {
-        return this.focused || !this.empty;
-    }
-
-    @Input()
-    get required() {
-        return this._required;
-    }
-
-    set required(req) {
-        this._required = coerceBooleanProperty(req);
-        this.stateChanges.next();
-    }
-
-    private _required = false;
-
-    @Input()
-    get disabled(): boolean {
-        return this._disabled;
-    }
-
-    set disabled(value: boolean) {
-        this._disabled = coerceBooleanProperty(value);
-        this._disabled ? this.form.disable() : this.form.enable();
-        this.stateChanges.next();
-    }
-
-    private _disabled = false;
-
-    @Input()
-    get placeholder() {
-        return this._placeholder;
-    }
-
-    set placeholder(plh) {
-        this._placeholder = plh;
-        this.stateChanges.next();
-    }
-
-    private _placeholder: string;
-
-    @HostBinding('attr.aria-describedby') describedBy = '';
-
-    setDescribedByIds(ids: string[]) {
-        this.describedBy = ids.join(' ');
-    }
-
-    @Input()
-    get value(): KnoraDate | KnoraPeriod | null {
-
-        if (!this.form.valid) {
-            return null;
-        }
-
-        const userInput = this.form.value;
-
-        if (!this.isPeriodControl.value) {
-            // single date
-            if (userInput.dateStart !== null) {
-                return new KnoraDate(
-                    userInput.dateStart.calendarName.toUpperCase(), 'CE', userInput.dateStart.calendarStart.year, userInput.dateStart.calendarStart.month, userInput.dateStart.calendarStart.day);
-            } else {
-                return null;
-            }
-        } else {
-            // period
-            if (userInput.dateStart !== null && userInput.dateEnd !== null) {
-
-                const start = new KnoraDate(
-                    userInput.dateStart.calendarName.toUpperCase(), 'CE', userInput.dateStart.calendarStart.year, userInput.dateStart.calendarStart.month, userInput.dateStart.calendarStart.day);
-                const end = new KnoraDate(
-                    userInput.dateEnd.calendarName.toUpperCase(), 'CE', userInput.dateEnd.calendarStart.year, userInput.dateEnd.calendarStart.month, userInput.dateEnd.calendarStart.day);
-
-                return new KnoraPeriod(start, end);
-            } else {
-                return null;
-            }
-        }
-    }
-
-    set value(date: KnoraDate | KnoraPeriod | null) {
-        if (date !== null) {
-            if (date instanceof KnoraDate) {
-                // single date
-
-                this.form.setValue({
-                    dateStart: this.createCalendarDate(date),
-                    dateEnd: null,
-                    isPeriod: false
-                });
-
-                this.startDateControl.updateValueAndValidity();
-
-            } else {
-                // period
-                const period = date as KnoraPeriod;
-
-                this.form.setValue({
-                    dateStart: this.createCalendarDate(period.start),
-                    dateEnd: this.createCalendarDate(period.end),
-                    isPeriod: true
-                });
-
-                this.startDateControl.updateValueAndValidity();
-
-            }
-        } else {
-            this.form.setValue({ dateStart: null, dateEnd: null, isPeriod: false });
-
-            this.startDateControl.updateValueAndValidity();
-        }
-        this.stateChanges.next();
-    }
-
-    /**
-     * given a `KnoraDate`, creates a Gregorian or Julian calendar date.
-     *
-     * @param date the given KnoraDate.
-     */
-    createCalendarDate(date: KnoraDate): GregorianCalendarDate | JulianCalendarDate {
-
-        const calDate = new CalendarDate(date.year, date.month, date.day);
-        const period = new CalendarPeriod(calDate, calDate);
-
-        // determine calendar
-        if (date.calendar === 'GREGORIAN') {
-            return new GregorianCalendarDate(period);
-        } else if (date.calendar === 'JULIAN') {
-            return new JulianCalendarDate(period);
-        } else {
-            throw new Error('Unsupported calendar: ' + date.calendar);
-        }
-    }
-
-    @Input() errorStateMatcher: ErrorStateMatcher;
-
-    constructor(
-        fb: FormBuilder,
-        @Optional() @Self() public ngControl: NgControl,
-        private _fm: FocusMonitor,
-        private _elRef: ElementRef<HTMLElement>,
-        @Optional() _parentForm: NgForm,
-        @Optional() _parentFormGroup: FormGroupDirective,
-        _defaultErrorStateMatcher: ErrorStateMatcher) {
-
-        super(_defaultErrorStateMatcher, _parentForm, _parentFormGroup, ngControl);
-
-        this.endDateControl = new FormControl(null);
-        this.isPeriodControl = new FormControl(null);
-        this.startDateControl = new FormControl(null);
-
-        this.form = fb.group({
-            dateStart: this.startDateControl,
-            dateEnd: this.endDateControl,
-            isPeriod: this.isPeriodControl
-        });
-
-        _fm.monitor(_elRef.nativeElement, true).subscribe(origin => {
-            this.focused = !!origin;
-            this.stateChanges.next();
-        });
-
-        if (this.ngControl != null) {
-            this.ngControl.valueAccessor = this;
-        }
-    }
-
-    ngOnInit() {
-        if (this.valueRequiredValidator) {
-            this.startDateControl.setValidators([
-                Validators.required,
-                sameCalendarValidator(this.isPeriodControl, this.endDateControl),
-                periodStartEndValidator(this.isPeriodControl, this.endDateControl)
-            ]);
-        } else {
-            this.startDateControl.setValidators([
-                sameCalendarValidator(this.isPeriodControl, this.endDateControl),
-                periodStartEndValidator(this.isPeriodControl, this.endDateControl)
-            ]);
-        }
-
-        this.startDateControl.updateValueAndValidity();
-    }
-
-    ngDoCheck() {
-        if (this.ngControl) {
-            this.updateErrorState();
-        }
-    }
-
-    ngOnDestroy() {
-        this.stateChanges.complete();
-    }
-
-    onContainerClick(event: MouseEvent) {
-        if ((event.target as Element).tagName.toLowerCase() !== 'input') {
-            this._elRef.nativeElement.querySelector('input').focus();
-        }
-    }
-
-    writeValue(date: KnoraDate | KnoraPeriod | null): void {
-        this.value = date;
-    }
-
-    registerOnChange(fn: any): void {
-        this.onChange = fn;
-    }
-
-    registerOnTouched(fn: any): void {
-        this.onTouched = fn;
-    }
-
-    setDisabledState(isDisabled: boolean): void {
-        this.disabled = isDisabled;
-    }
-
-    _handleInput(): void {
-        // trigger evaluation of validators defined for start date
-        this.startDateControl.updateValueAndValidity();
-        this.onChange(this.value);
-    }
-
-}
diff --git a/src/app/workspace/resource/values/yet-another-date-value/date-picker/date-picker.component.html b/src/app/workspace/resource/values/date-value/date-picker/date-picker.component.html
similarity index 100%
rename from src/app/workspace/resource/values/yet-another-date-value/date-picker/date-picker.component.html
rename to src/app/workspace/resource/values/date-value/date-picker/date-picker.component.html
diff --git a/src/app/workspace/resource/values/yet-another-date-value/date-picker/date-picker.component.scss b/src/app/workspace/resource/values/date-value/date-picker/date-picker.component.scss
similarity index 100%
rename from src/app/workspace/resource/values/yet-another-date-value/date-picker/date-picker.component.scss
rename to src/app/workspace/resource/values/date-value/date-picker/date-picker.component.scss
diff --git a/src/app/workspace/resource/values/yet-another-date-value/date-picker/date-picker.component.spec.ts b/src/app/workspace/resource/values/date-value/date-picker/date-picker.component.spec.ts
similarity index 100%
rename from src/app/workspace/resource/values/yet-another-date-value/date-picker/date-picker.component.spec.ts
rename to src/app/workspace/resource/values/date-value/date-picker/date-picker.component.spec.ts
diff --git a/src/app/workspace/resource/values/yet-another-date-value/date-picker/date-picker.component.ts b/src/app/workspace/resource/values/date-value/date-picker/date-picker.component.ts
similarity index 100%
rename from src/app/workspace/resource/values/yet-another-date-value/date-picker/date-picker.component.ts
rename to src/app/workspace/resource/values/date-value/date-picker/date-picker.component.ts
diff --git a/src/app/workspace/resource/values/yet-another-date-value/date-value-handler/date-value-handler.component.html b/src/app/workspace/resource/values/date-value/date-value-handler/date-value-handler.component.html
similarity index 100%
rename from src/app/workspace/resource/values/yet-another-date-value/date-value-handler/date-value-handler.component.html
rename to src/app/workspace/resource/values/date-value/date-value-handler/date-value-handler.component.html
diff --git a/src/app/workspace/resource/values/yet-another-date-value/date-value-handler/date-value-handler.component.scss b/src/app/workspace/resource/values/date-value/date-value-handler/date-value-handler.component.scss
similarity index 100%
rename from src/app/workspace/resource/values/yet-another-date-value/date-value-handler/date-value-handler.component.scss
rename to src/app/workspace/resource/values/date-value/date-value-handler/date-value-handler.component.scss
diff --git a/src/app/workspace/resource/values/yet-another-date-value/date-value-handler/date-value-handler.component.spec.ts b/src/app/workspace/resource/values/date-value/date-value-handler/date-value-handler.component.spec.ts
similarity index 100%
rename from src/app/workspace/resource/values/yet-another-date-value/date-value-handler/date-value-handler.component.spec.ts
rename to src/app/workspace/resource/values/date-value/date-value-handler/date-value-handler.component.spec.ts
diff --git a/src/app/workspace/resource/values/yet-another-date-value/date-value-handler/date-value-handler.component.ts b/src/app/workspace/resource/values/date-value/date-value-handler/date-value-handler.component.ts
similarity index 100%
rename from src/app/workspace/resource/values/yet-another-date-value/date-value-handler/date-value-handler.component.ts
rename to src/app/workspace/resource/values/date-value/date-value-handler/date-value-handler.component.ts
diff --git a/src/app/workspace/resource/values/date-value/date-value.component.html b/src/app/workspace/resource/values/date-value/date-value.component.html
index e848b148b6..16f9d5f996 100644
--- a/src/app/workspace/resource/values/date-value/date-value.component.html
+++ b/src/app/workspace/resource/values/date-value/date-value.component.html
@@ -1,44 +1,29 @@
 <span *ngIf="mode === 'read'; else showForm" class="read-mode-view">
-
-    <!-- Date period -->
-    <span *ngIf="valueFormControl.value?.end; else date">
-        <span class="rm-value date-start">
-            <!-- <span *ngIf="labels">Period Start: </span> -->
-            {{valueFormControl.value?.start | knoraDate:ontologyDateFormat:displayOptions}}
-        </span>
-        <span class="rm-value date-end">
-            <span *ngIf="labels"> &mdash; </span>
-            {{valueFormControl.value?.end | knoraDate:ontologyDateFormat:displayOptions}}
-        </span>
-    </span>
-
-    <!-- Only one date -->
-    <ng-template #date>
-        <span class="rm-value">
-            <!-- <span *ngIf="labels">Date: </span> -->
-            {{valueFormControl.value | knoraDate:ontologyDateFormat:displayOptions}}
+    <span class="rm-value">
+        <span *ngIf="valueFormControl.value?.end; else singleDate">
+            <span class="calendar mat-caption">{{valueFormControl.value?.start | knoraDate:ontologyDateFormat:'calendarOnly'}}</span><br>
+            <span>{{ valueFormControl.value?.start | knoraDate:ontologyDateFormat:'era' }}</span>
+            <span>&nbsp;&ndash;&nbsp;{{ valueFormControl.value?.end | knoraDate:ontologyDateFormat:'era' }}</span>
         </span>
-    </ng-template>
 
+        <ng-template #singleDate>
+            <span class="calendar mat-caption">{{valueFormControl.value | knoraDate:ontologyDateFormat:'calendarOnly'}}</span><br>
+            <span>{{ valueFormControl.value | knoraDate:ontologyDateFormat:'era' }}</span>
+        </ng-template>
+    </span>
     <!-- Comment -->
     <span class="rm-comment" *ngIf="shouldShowComment">{{commentFormControl.value}}</span>
 </span>
-
-<!-- Edit mode -->
 <ng-template #showForm>
     <span [formGroup]="form">
-
-        <mat-form-field class="large-field child-value-component" floatLabel="never">
-
-            <app-date-input-text #dateInput [formControlName]="'value'" [valueRequiredValidator]="valueRequiredValidator" class="value"></app-date-input-text>
-
-            <mat-error *ngIf="valueFormControl.hasError('valueNotChanged')">
-                <span class="custom-error-message">New value must be different than the current value.</span>
-            </mat-error>
-            <mat-error *ngIf="valueFormControl.hasError('duplicateValue')">
-                <span class="custom-error-message">This value already exists for this property. Duplicate values are not allowed.</span>
-            </mat-error>
-        </mat-form-field>
+        <app-date-value-handler #dateInput [formControlName]="'value'" [valueRequiredValidator]="valueRequiredValidator" class="value"></app-date-value-handler>
+
+        <mat-error *ngIf="valueFormControl.hasError('valueNotChanged')">
+            <span class="custom-error-message">New value must be different than the current value.</span>
+        </mat-error>
+        <mat-error *ngIf="valueFormControl.hasError('duplicateValue')">
+            <span class="custom-error-message">This value already exists for this property. Duplicate values are not allowed.</span>
+        </mat-error>
 
         <!-- Comment field -->
         <mat-form-field class="large-field value-component-comment">
diff --git a/src/app/workspace/resource/values/date-value/date-value.component.scss b/src/app/workspace/resource/values/date-value/date-value.component.scss
index 0980fecbc7..e69de29bb2 100644
--- a/src/app/workspace/resource/values/date-value/date-value.component.scss
+++ b/src/app/workspace/resource/values/date-value/date-value.component.scss
@@ -1,15 +0,0 @@
-:host ::ng-deep .child-value-component {
-  .mat-form-field-underline {
-    display: none;
-  }
-  .mat-form-field-infix{
-    border-top: 0.2em solid transparent !important;
-    .mat-form-field-underline{
-      display: block;
-    }
-  }
-}
-
-.date-start, .date-end {
-    display: block;
-}
diff --git a/src/app/workspace/resource/values/date-value/date-value.component.spec.ts b/src/app/workspace/resource/values/date-value/date-value.component.spec.ts
index 6f26e8e4ea..b44d68c90d 100644
--- a/src/app/workspace/resource/values/date-value/date-value.component.spec.ts
+++ b/src/app/workspace/resource/values/date-value/date-value.component.spec.ts
@@ -1,8 +1,8 @@
 import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { Component, DebugElement, forwardRef, Input, OnInit, ViewChild } from '@angular/core';
-import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl, ReactiveFormsModule } from '@angular/forms';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { ControlValueAccessor, NgControl, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
 import { ErrorStateMatcher } from '@angular/material/core';
 import { MatFormFieldControl } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
@@ -14,9 +14,8 @@ import { Subject } from 'rxjs';
 import { KnoraDatePipe } from 'src/app/main/pipes/formatting/knoradate.pipe';
 import { DateValueComponent } from './date-value.component';
 
-
 @Component({
-    selector: 'app-date-input-text',
+    selector: 'app-date-value-handler',
     template: '',
     providers: [
         {
@@ -43,7 +42,7 @@ class TestDateInputComponent implements ControlValueAccessor, MatFormFieldContro
     focused = false;
     id = 'testid';
     ngControl: NgControl | null;
-    onChange = (_: any) => {};
+    onChange = (_: any) => { };
 
 
     writeValue(date: KnoraDate | KnoraPeriod | null): void {
@@ -63,7 +62,7 @@ class TestDateInputComponent implements ControlValueAccessor, MatFormFieldContro
     setDescribedByIds(ids: string[]): void {
     }
 
-    _handleInput(): void {
+    handleInput(): void {
         this.onChange(this.value);
     }
 
@@ -88,7 +87,7 @@ class TestHostDisplayValueComponent implements OnInit {
 
         MockResource.getTestThing().subscribe(res => {
             const inputVal: ReadDateValue =
-        res.getValuesAs('http://0.0.0.0:3333/ontology/0001/anything/v2#hasDate', ReadDateValue)[0];
+                res.getValuesAs('http://0.0.0.0:3333/ontology/0001/anything/v2#hasDate', ReadDateValue)[0];
 
             this.displayInputVal = inputVal;
 
@@ -103,7 +102,7 @@ class TestHostDisplayValueComponent implements OnInit {
  */
 @Component({
     template: `
-    <app-date-value #inputVal [mode]="mode"></app-date-value>`
+        <app-date-value #inputVal [mode]="mode"></app-date-value>`
 })
 class TestHostCreateValueComponent implements OnInit {
 
@@ -139,6 +138,8 @@ class TestHostCreateValueNoValueRequiredComponent implements OnInit {
 }
 
 describe('DateValueComponent', () => {
+    let component: DateValueComponent;
+    let fixture: ComponentFixture<DateValueComponent>;
 
     beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
@@ -159,6 +160,7 @@ describe('DateValueComponent', () => {
             .compileComponents();
     }));
 
+
     describe('display and edit a date value', () => {
         let testHostComponent: TestHostDisplayValueComponent;
         let testHostFixture: ComponentFixture<TestHostDisplayValueComponent>;
@@ -193,7 +195,7 @@ describe('DateValueComponent', () => {
 
             expect(testHostComponent.inputValueComponent.mode).toEqual('read');
 
-            expect(valueReadModeNativeElement.innerText).toEqual('13.05.2018');
+            expect(valueReadModeNativeElement.innerText).toEqual('Gregorian\n13.05.2018');
 
         });
 
@@ -207,13 +209,13 @@ describe('DateValueComponent', () => {
 
             expect(testHostComponent.inputValueComponent.form.valid).toBeFalsy();
 
-            expect(testHostComponent.inputValueComponent.dateInputComponent.value).toEqual(new KnoraDate('GREGORIAN', 'CE', 2018, 5, 13));
+            expect(testHostComponent.inputValueComponent.datePickerComponent.value).toEqual(new KnoraDate('GREGORIAN', 'CE', 2018, 5, 13));
 
             // simulate user input
             const newKnoraDate = new KnoraDate('GREGORIAN', 'CE', 2019, 5, 13);
 
-            testHostComponent.inputValueComponent.dateInputComponent.value = newKnoraDate;
-            testHostComponent.inputValueComponent.dateInputComponent._handleInput();
+            testHostComponent.inputValueComponent.datePickerComponent.value = newKnoraDate;
+            testHostComponent.inputValueComponent.datePickerComponent.handleInput();
 
             testHostFixture.detectChanges();
 
@@ -246,14 +248,14 @@ describe('DateValueComponent', () => {
 
             expect(testHostComponent.inputValueComponent.form.valid).toBeFalsy();
 
-            expect(testHostComponent.inputValueComponent.dateInputComponent.value)
+            expect(testHostComponent.inputValueComponent.datePickerComponent.value)
                 .toEqual(new KnoraDate('GREGORIAN', 'CE', 2018, 5, 13));
 
             // simulate user input (equivalent date)
             const newKnoraDate = new KnoraDate('GREGORIAN', 'CE', 2018, 5, 13);
 
-            testHostComponent.inputValueComponent.dateInputComponent.value = newKnoraDate;
-            testHostComponent.inputValueComponent.dateInputComponent._handleInput();
+            testHostComponent.inputValueComponent.datePickerComponent.value = newKnoraDate;
+            testHostComponent.inputValueComponent.datePickerComponent.handleInput();
 
             testHostFixture.detectChanges();
 
@@ -304,8 +306,8 @@ describe('DateValueComponent', () => {
 
             expect(testHostComponent.inputValueComponent.form.valid).toBeFalsy();
 
-            testHostComponent.inputValueComponent.dateInputComponent.value = null;
-            testHostComponent.inputValueComponent.dateInputComponent._handleInput();
+            testHostComponent.inputValueComponent.datePickerComponent.value = null;
+            testHostComponent.inputValueComponent.datePickerComponent.handleInput();
 
             testHostFixture.detectChanges();
 
@@ -330,20 +332,20 @@ describe('DateValueComponent', () => {
             // simulate user input
             const newKnoraDate = new KnoraDate('GREGORIAN', 'CE', 2019, 5, 13);
 
-            testHostComponent.inputValueComponent.dateInputComponent.value = newKnoraDate;
-            testHostComponent.inputValueComponent.dateInputComponent._handleInput();
+            testHostComponent.inputValueComponent.datePickerComponent.value = newKnoraDate;
+            testHostComponent.inputValueComponent.datePickerComponent.handleInput();
 
             testHostFixture.detectChanges();
 
             expect(testHostComponent.inputValueComponent.valueFormControl.value).toEqual(new KnoraDate('GREGORIAN', 'CE', 2019, 5, 13));
 
-            expect(testHostComponent.inputValueComponent.dateInputComponent.value).toEqual(new KnoraDate('GREGORIAN', 'CE', 2019, 5, 13));
+            expect(testHostComponent.inputValueComponent.datePickerComponent.value).toEqual(new KnoraDate('GREGORIAN', 'CE', 2019, 5, 13));
 
             testHostComponent.inputValueComponent.resetFormControl();
 
             expect(testHostComponent.inputValueComponent.valueFormControl.value).toEqual(new KnoraDate('GREGORIAN', 'CE', 2018, 5, 13));
 
-            expect(testHostComponent.inputValueComponent.dateInputComponent.value).toEqual(new KnoraDate('GREGORIAN', 'CE', 2018, 5, 13));
+            expect(testHostComponent.inputValueComponent.datePickerComponent.value).toEqual(new KnoraDate('GREGORIAN', 'CE', 2018, 5, 13));
 
             expect(testHostComponent.inputValueComponent.form.valid).toBeFalsy();
 
@@ -353,7 +355,7 @@ describe('DateValueComponent', () => {
 
             MockResource.getTestThing().subscribe(res => {
                 const newDate: ReadDateValue =
-          res.getValuesAs('http://0.0.0.0:3333/ontology/0001/anything/v2#hasDate', ReadDateValue)[0];
+                    res.getValuesAs('http://0.0.0.0:3333/ontology/0001/anything/v2#hasDate', ReadDateValue)[0];
 
                 newDate.id = 'updatedId';
 
@@ -365,7 +367,7 @@ describe('DateValueComponent', () => {
 
                 expect(testHostComponent.inputValueComponent.valueFormControl.value).toEqual(new KnoraDate('GREGORIAN', 'CE', 2019, 5, 13));
 
-                expect(valueReadModeNativeElement.innerText).toEqual('13.05.2019');
+                expect(valueReadModeNativeElement.innerText).toEqual('Gregorian\n13.05.2019');
 
                 expect(testHostComponent.inputValueComponent.form.valid).toBeTruthy();
 
@@ -562,13 +564,13 @@ describe('DateValueComponent', () => {
 
         it('should create a value', () => {
 
-            expect(testHostComponent.inputValueComponent.dateInputComponent.value).toEqual(null);
+            expect(testHostComponent.inputValueComponent.datePickerComponent.value).toEqual(null);
 
             // simulate user input
             const newKnoraDate = new KnoraDate('JULIAN', 'CE', 2019, 5, 13);
 
-            testHostComponent.inputValueComponent.dateInputComponent.value = newKnoraDate;
-            testHostComponent.inputValueComponent.dateInputComponent._handleInput();
+            testHostComponent.inputValueComponent.datePickerComponent.value = newKnoraDate;
+            testHostComponent.inputValueComponent.datePickerComponent.handleInput();
 
             testHostFixture.detectChanges();
 
@@ -596,8 +598,8 @@ describe('DateValueComponent', () => {
             // simulate user input
             const newKnoraDate = new KnoraDate('JULIAN', 'CE', 2019, 5, 13);
 
-            testHostComponent.inputValueComponent.dateInputComponent.value = newKnoraDate;
-            testHostComponent.inputValueComponent.dateInputComponent._handleInput();
+            testHostComponent.inputValueComponent.datePickerComponent.value = newKnoraDate;
+            testHostComponent.inputValueComponent.datePickerComponent.handleInput();
 
             testHostFixture.detectChanges();
 
@@ -614,7 +616,7 @@ describe('DateValueComponent', () => {
 
             expect(testHostComponent.inputValueComponent.form.valid).toBeFalsy();
 
-            expect(testHostComponent.inputValueComponent.dateInputComponent.value).toEqual(null);
+            expect(testHostComponent.inputValueComponent.datePickerComponent.value).toEqual(null);
 
             const comment = await commentTextarea.getValue();
 
@@ -648,5 +650,4 @@ describe('DateValueComponent', () => {
         });
 
     });
-
 });
diff --git a/src/app/workspace/resource/values/date-value/date-value.component.ts b/src/app/workspace/resource/values/date-value/date-value.component.ts
index 6c15192989..1766280f54 100644
--- a/src/app/workspace/resource/values/date-value/date-value.component.ts
+++ b/src/app/workspace/resource/values/date-value/date-value.component.ts
@@ -1,16 +1,10 @@
 import { Component, Inject, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewChild } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
-import {
-    CreateDateValue,
-    KnoraDate,
-    KnoraPeriod,
-    ReadDateValue,
-    UpdateDateValue
-} from '@dasch-swiss/dsp-js';
+import { CreateDateValue, KnoraDate, KnoraPeriod, ReadDateValue, UpdateDateValue } from '@dasch-swiss/dsp-js';
 import { Subscription } from 'rxjs';
-import { ValueErrorStateMatcher } from '../value-error-state-matcher';
-import { DateInputComponent } from './date-input/date-input.component';
 import { BaseValueDirective } from 'src/app/main/directive/base-value.directive';
+import { ValueErrorStateMatcher } from '../value-error-state-matcher';
+import { DatePickerComponent } from './date-picker/date-picker.component';
 
 // https://stackoverflow.com/questions/45661010/dynamic-nested-reactive-form-expressionchangedafterithasbeencheckederror
 const resolvedPromise = Promise.resolve(null);
@@ -22,25 +16,21 @@ const resolvedPromise = Promise.resolve(null);
 })
 export class DateValueComponent extends BaseValueDirective implements OnInit, OnChanges, OnDestroy {
 
-    @ViewChild('dateInput') dateInputComponent: DateInputComponent;
+    @ViewChild('dateInput') datePickerComponent: DatePickerComponent;
 
     @Input() displayValue?: ReadDateValue;
 
-    @Input() displayOptions?: 'era' | 'calendar' | 'all';
-
-    @Input() labels = false;
+    // @Input() displayOptions?: 'era' | 'calendar' | 'all';
 
     @Input() ontologyDateFormat = 'dd.MM.YYYY';
 
+    // @Input() showHexCode = false;
+
     valueFormControl: FormControl;
     commentFormControl: FormControl;
-
     form: FormGroup;
-
     valueChangesSubscription: Subscription;
-
     customValidators = [];
-
     matcher = new ValueErrorStateMatcher();
 
     constructor(@Inject(FormBuilder) private _fb: FormBuilder) {
@@ -54,7 +44,7 @@ export class DateValueComponent extends BaseValueDirective implements OnInit, On
      * @param date2 date for comparison with date1
      */
     sameDate(date1: KnoraDate, date2: KnoraDate): boolean {
-        return (date1.calendar === date2.calendar && date1.year === date2.year && date1.month === date2.month && date1.day === date2.day);
+        return (date1.calendar === date2.calendar && date1.year === date2.year && date1.month === date2.month && date1.day === date2.day && date1.era === date2.era);
     }
 
     standardValueComparisonFunc(initValue: KnoraDate | KnoraPeriod, curValue: KnoraDate | KnoraPeriod | null): boolean {
@@ -79,9 +69,9 @@ export class DateValueComponent extends BaseValueDirective implements OnInit, On
     }
 
     ngOnInit() {
+
         // initialize form control elements
         this.valueFormControl = new FormControl(null);
-
         this.commentFormControl = new FormControl(null);
 
         // subscribe to any change on the comment and recheck validity
@@ -102,7 +92,6 @@ export class DateValueComponent extends BaseValueDirective implements OnInit, On
             // add form to the parent form group
             this.addToParentFormGroup(this.formName, this.form);
         });
-
     }
 
     ngOnChanges(changes: SimpleChanges): void {
diff --git a/src/app/workspace/resource/values/yet-another-date-value/yet-another-date-value.component.html b/src/app/workspace/resource/values/yet-another-date-value/yet-another-date-value.component.html
deleted file mode 100644
index 16f9d5f996..0000000000
--- a/src/app/workspace/resource/values/yet-another-date-value/yet-another-date-value.component.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<span *ngIf="mode === 'read'; else showForm" class="read-mode-view">
-    <span class="rm-value">
-        <span *ngIf="valueFormControl.value?.end; else singleDate">
-            <span class="calendar mat-caption">{{valueFormControl.value?.start | knoraDate:ontologyDateFormat:'calendarOnly'}}</span><br>
-            <span>{{ valueFormControl.value?.start | knoraDate:ontologyDateFormat:'era' }}</span>
-            <span>&nbsp;&ndash;&nbsp;{{ valueFormControl.value?.end | knoraDate:ontologyDateFormat:'era' }}</span>
-        </span>
-
-        <ng-template #singleDate>
-            <span class="calendar mat-caption">{{valueFormControl.value | knoraDate:ontologyDateFormat:'calendarOnly'}}</span><br>
-            <span>{{ valueFormControl.value | knoraDate:ontologyDateFormat:'era' }}</span>
-        </ng-template>
-    </span>
-    <!-- Comment -->
-    <span class="rm-comment" *ngIf="shouldShowComment">{{commentFormControl.value}}</span>
-</span>
-<ng-template #showForm>
-    <span [formGroup]="form">
-        <app-date-value-handler #dateInput [formControlName]="'value'" [valueRequiredValidator]="valueRequiredValidator" class="value"></app-date-value-handler>
-
-        <mat-error *ngIf="valueFormControl.hasError('valueNotChanged')">
-            <span class="custom-error-message">New value must be different than the current value.</span>
-        </mat-error>
-        <mat-error *ngIf="valueFormControl.hasError('duplicateValue')">
-            <span class="custom-error-message">This value already exists for this property. Duplicate values are not allowed.</span>
-        </mat-error>
-
-        <!-- Comment field -->
-        <mat-form-field class="large-field value-component-comment">
-            <textarea matInput
-                      cdkTextareaAutosize
-                      cdkAutosizeMinRows="1"
-                      cdkAutosizeMaxRows="6"
-                      [formControlName]="'comment'"
-                      class="comment"
-                      placeholder="Comment"
-                      type="text"
-                      spellcheck="false">
-          </textarea>
-        </mat-form-field>
-    </span>
-</ng-template>
diff --git a/src/app/workspace/resource/values/yet-another-date-value/yet-another-date-value.component.scss b/src/app/workspace/resource/values/yet-another-date-value/yet-another-date-value.component.scss
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/src/app/workspace/resource/values/yet-another-date-value/yet-another-date-value.component.spec.ts b/src/app/workspace/resource/values/yet-another-date-value/yet-another-date-value.component.spec.ts
deleted file mode 100644
index fa446edcc8..0000000000
--- a/src/app/workspace/resource/values/yet-another-date-value/yet-another-date-value.component.spec.ts
+++ /dev/null
@@ -1,653 +0,0 @@
-import { HarnessLoader } from '@angular/cdk/testing';
-import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
-import { Component, DebugElement, forwardRef, Input, OnInit, ViewChild } from '@angular/core';
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { ControlValueAccessor, NgControl, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
-import { ErrorStateMatcher } from '@angular/material/core';
-import { MatFormFieldControl } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-import { MatInputHarness } from '@angular/material/input/testing';
-import { By } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { CreateDateValue, KnoraDate, KnoraPeriod, MockResource, ReadDateValue, UpdateDateValue } from '@dasch-swiss/dsp-js';
-import { Subject } from 'rxjs';
-import { KnoraDatePipe } from 'src/app/main/pipes/formatting/knoradate.pipe';
-import { YetAnotherDateValueComponent } from './yet-another-date-value.component';
-
-@Component({
-    selector: 'app-date-value-handler',
-    template: '',
-    providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            multi: true,
-            useExisting: forwardRef(() => TestDateInputComponent),
-        },
-        { provide: MatFormFieldControl, useExisting: TestDateInputComponent }
-    ]
-})
-class TestDateInputComponent implements ControlValueAccessor, MatFormFieldControl<any> {
-
-    @Input() value;
-    @Input() disabled: boolean;
-    @Input() empty: boolean;
-    @Input() placeholder: string;
-    @Input() required: boolean;
-    @Input() shouldLabelFloat: boolean;
-    @Input() errorStateMatcher: ErrorStateMatcher;
-    @Input() valueRequiredValidator = true;
-
-    stateChanges = new Subject<void>();
-    errorState = false;
-    focused = false;
-    id = 'testid';
-    ngControl: NgControl | null;
-    onChange = (_: any) => { };
-
-
-    writeValue(date: KnoraDate | KnoraPeriod | null): void {
-        this.value = date;
-    }
-
-    registerOnChange(fn: any): void {
-        this.onChange = fn;
-    }
-
-    registerOnTouched(fn: any): void {
-    }
-
-    onContainerClick(event: MouseEvent): void {
-    }
-
-    setDescribedByIds(ids: string[]): void {
-    }
-
-    handleInput(): void {
-        this.onChange(this.value);
-    }
-
-}
-
-/**
- * test host component to simulate parent component.
- */
-@Component({
-    template: `
-    <app-yet-another-date-value #inputVal [displayValue]="displayInputVal" [mode]="mode"></app-yet-another-date-value>`
-})
-class TestHostDisplayValueComponent implements OnInit {
-
-    @ViewChild('inputVal') inputValueComponent: YetAnotherDateValueComponent;
-
-    displayInputVal: ReadDateValue;
-
-    mode: 'read' | 'update' | 'create' | 'search';
-
-    ngOnInit() {
-
-        MockResource.getTestThing().subscribe(res => {
-            const inputVal: ReadDateValue =
-                res.getValuesAs('http://0.0.0.0:3333/ontology/0001/anything/v2#hasDate', ReadDateValue)[0];
-
-            this.displayInputVal = inputVal;
-
-            this.mode = 'read';
-        });
-
-    }
-}
-
-/**
- * test host component to simulate parent component.
- */
-@Component({
-    template: `
-        <app-yet-another-date-value #inputVal [mode]="mode"></app-yet-another-date-value>`
-})
-class TestHostCreateValueComponent implements OnInit {
-
-    @ViewChild('inputVal') inputValueComponent: YetAnotherDateValueComponent;
-
-    mode: 'read' | 'update' | 'create' | 'search';
-
-    ngOnInit() {
-
-        this.mode = 'create';
-
-    }
-}
-
-/**
- * test host component to simulate parent component.
- */
-@Component({
-    template: `
-      <app-yet-another-date-value #inputVal [mode]="mode" [valueRequiredValidator]="false"></app-yet-another-date-value>`
-})
-class TestHostCreateValueNoValueRequiredComponent implements OnInit {
-
-    @ViewChild('inputVal') inputValueComponent: YetAnotherDateValueComponent;
-
-    mode: 'read' | 'update' | 'create' | 'search';
-
-    ngOnInit() {
-
-        this.mode = 'create';
-
-    }
-}
-
-describe('YetAnotherDateValueComponent', () => {
-    let component: YetAnotherDateValueComponent;
-    let fixture: ComponentFixture<YetAnotherDateValueComponent>;
-
-    beforeEach(waitForAsync(() => {
-        TestBed.configureTestingModule({
-            imports: [
-                ReactiveFormsModule,
-                MatInputModule,
-                BrowserAnimationsModule
-            ],
-            declarations: [
-                YetAnotherDateValueComponent,
-                TestDateInputComponent,
-                TestHostDisplayValueComponent,
-                TestHostCreateValueComponent,
-                TestHostCreateValueNoValueRequiredComponent,
-                KnoraDatePipe
-            ]
-        })
-            .compileComponents();
-    }));
-
-
-    describe('display and edit a date value', () => {
-        let testHostComponent: TestHostDisplayValueComponent;
-        let testHostFixture: ComponentFixture<TestHostDisplayValueComponent>;
-        let loader: HarnessLoader;
-
-        let valueComponentDe: DebugElement;
-        let valueReadModeDebugElement: DebugElement;
-        let valueReadModeNativeElement;
-
-        beforeEach(() => {
-            testHostFixture = TestBed.createComponent(TestHostDisplayValueComponent);
-            testHostComponent = testHostFixture.componentInstance;
-            loader = TestbedHarnessEnvironment.loader(testHostFixture);
-            testHostFixture.detectChanges();
-
-            expect(testHostComponent).toBeTruthy();
-            expect(testHostComponent.inputValueComponent).toBeTruthy();
-
-            const hostCompDe = testHostFixture.debugElement;
-
-            valueComponentDe = hostCompDe.query(By.directive(YetAnotherDateValueComponent));
-            valueReadModeDebugElement = valueComponentDe.query(By.css('.rm-value'));
-            valueReadModeNativeElement = valueReadModeDebugElement.nativeElement;
-
-        });
-
-        it('should display an existing value', () => {
-
-            expect(testHostComponent.inputValueComponent.displayValue.date).toEqual(new KnoraDate('GREGORIAN', 'CE', 2018, 5, 13));
-
-            expect(testHostComponent.inputValueComponent.form.valid).toBeTruthy();
-
-            expect(testHostComponent.inputValueComponent.mode).toEqual('read');
-
-            expect(valueReadModeNativeElement.innerText).toEqual('Gregorian\n13.05.2018');
-
-        });
-
-        it('should make an existing value editable', () => {
-
-            testHostComponent.mode = 'update';
-
-            testHostFixture.detectChanges();
-
-            expect(testHostComponent.inputValueComponent.mode).toEqual('update');
-
-            expect(testHostComponent.inputValueComponent.form.valid).toBeFalsy();
-
-            expect(testHostComponent.inputValueComponent.datePickerComponent.value).toEqual(new KnoraDate('GREGORIAN', 'CE', 2018, 5, 13));
-
-            // simulate user input
-            const newKnoraDate = new KnoraDate('GREGORIAN', 'CE', 2019, 5, 13);
-
-            testHostComponent.inputValueComponent.datePickerComponent.value = newKnoraDate;
-            testHostComponent.inputValueComponent.datePickerComponent.handleInput();
-
-            testHostFixture.detectChanges();
-
-            expect(testHostComponent.inputValueComponent.valueFormControl.value)
-                .toEqual(newKnoraDate);
-
-            expect(testHostComponent.inputValueComponent.form.valid).toBeTruthy();
-
-            const updatedValue = testHostComponent.inputValueComponent.getUpdatedValue();
-
-            expect(updatedValue instanceof UpdateDateValue).toBeTruthy();
-
-            expect((updatedValue as UpdateDateValue).calendar).toEqual('GREGORIAN');
-            expect((updatedValue as UpdateDateValue).startYear).toEqual(2019);
-            expect((updatedValue as UpdateDateValue).endYear).toEqual(2019);
-            expect((updatedValue as UpdateDateValue).startMonth).toEqual(5);
-            expect((updatedValue as UpdateDateValue).endMonth).toEqual(5);
-            expect((updatedValue as UpdateDateValue).startDay).toEqual(13);
-            expect((updatedValue as UpdateDateValue).endDay).toEqual(13);
-
-        });
-
-        it('should not accept a user input equivalent to the existing value', () => {
-
-            testHostComponent.mode = 'update';
-
-            testHostFixture.detectChanges();
-
-            expect(testHostComponent.inputValueComponent.mode).toEqual('update');
-
-            expect(testHostComponent.inputValueComponent.form.valid).toBeFalsy();
-
-            expect(testHostComponent.inputValueComponent.datePickerComponent.value)
-                .toEqual(new KnoraDate('GREGORIAN', 'CE', 2018, 5, 13));
-
-            // simulate user input (equivalent date)
-            const newKnoraDate = new KnoraDate('GREGORIAN', 'CE', 2018, 5, 13);
-
-            testHostComponent.inputValueComponent.datePickerComponent.value = newKnoraDate;
-            testHostComponent.inputValueComponent.datePickerComponent.handleInput();
-
-            testHostFixture.detectChanges();
-
-            expect(testHostComponent.inputValueComponent.valueFormControl.value)
-                .toEqual(newKnoraDate);
-
-            expect(testHostComponent.inputValueComponent.form.valid).toBeFalsy();
-
-            const updatedValue = testHostComponent.inputValueComponent.getUpdatedValue();
-
-            expect(updatedValue).toBe(false);
-
-        });
-
-        it('should validate an existing value with an added comment', async () => {
-
-            testHostComponent.mode = 'update';
-
-            testHostFixture.detectChanges();
-
-            expect(testHostComponent.inputValueComponent.mode).toEqual('update');
-
-            expect(testHostComponent.inputValueComponent.displayValue.date).toEqual(new KnoraDate('GREGORIAN', 'CE', 2018, 5, 13));
-
-            expect(testHostComponent.inputValueComponent.form.valid).toBeFalsy();
-
-            const commentTextarea = await loader.getHarness(MatInputHarness);
-
-            await commentTextarea.setValue('this is a comment');
-
-            expect(testHostComponent.inputValueComponent.form.valid).toBeTruthy();
-
-            const updatedValue = testHostComponent.inputValueComponent.getUpdatedValue();
-
-            expect(updatedValue instanceof UpdateDateValue).toBeTruthy();
-
-            expect((updatedValue as UpdateDateValue).valueHasComment).toEqual('this is a comment');
-
-        });
-
-        it('should not return an invalid update value', () => {
-
-            testHostComponent.mode = 'update';
-
-            testHostFixture.detectChanges();
-
-            expect(testHostComponent.inputValueComponent.mode).toEqual('update');
-
-            expect(testHostComponent.inputValueComponent.form.valid).toBeFalsy();
-
-            testHostComponent.inputValueComponent.datePickerComponent.value = null;
-            testHostComponent.inputValueComponent.datePickerComponent.handleInput();
-
-            testHostFixture.detectChanges();
-
-            expect(testHostComponent.inputValueComponent.form.valid).toBeFalsy();
-
-            const updatedValue = testHostComponent.inputValueComponent.getUpdatedValue();
-
-            expect(updatedValue).toBeFalsy();
-
-        });
-
-        it('should restore the initially displayed value', () => {
-
-            testHostComponent.mode = 'update';
-
-            testHostFixture.detectChanges();
-
-            expect(testHostComponent.inputValueComponent.mode).toEqual('update');
-
-            expect(testHostComponent.inputValueComponent.form.valid).toBeFalsy();
-
-            // simulate user input
-            const newKnoraDate = new KnoraDate('GREGORIAN', 'CE', 2019, 5, 13);
-
-            testHostComponent.inputValueComponent.datePickerComponent.value = newKnoraDate;
-            testHostComponent.inputValueComponent.datePickerComponent.handleInput();
-
-            testHostFixture.detectChanges();
-
-            expect(testHostComponent.inputValueComponent.valueFormControl.value).toEqual(new KnoraDate('GREGORIAN', 'CE', 2019, 5, 13));
-
-            expect(testHostComponent.inputValueComponent.datePickerComponent.value).toEqual(new KnoraDate('GREGORIAN', 'CE', 2019, 5, 13));
-
-            testHostComponent.inputValueComponent.resetFormControl();
-
-            expect(testHostComponent.inputValueComponent.valueFormControl.value).toEqual(new KnoraDate('GREGORIAN', 'CE', 2018, 5, 13));
-
-            expect(testHostComponent.inputValueComponent.datePickerComponent.value).toEqual(new KnoraDate('GREGORIAN', 'CE', 2018, 5, 13));
-
-            expect(testHostComponent.inputValueComponent.form.valid).toBeFalsy();
-
-        });
-
-        it('should set a new display value', done => {
-
-            MockResource.getTestThing().subscribe(res => {
-                const newDate: ReadDateValue =
-                    res.getValuesAs('http://0.0.0.0:3333/ontology/0001/anything/v2#hasDate', ReadDateValue)[0];
-
-                newDate.id = 'updatedId';
-
-                newDate.date = new KnoraDate('GREGORIAN', 'CE', 2019, 5, 13);
-
-                testHostComponent.displayInputVal = newDate;
-
-                testHostFixture.detectChanges();
-
-                expect(testHostComponent.inputValueComponent.valueFormControl.value).toEqual(new KnoraDate('GREGORIAN', 'CE', 2019, 5, 13));
-
-                expect(valueReadModeNativeElement.innerText).toEqual('Gregorian\n13.05.2019');
-
-                expect(testHostComponent.inputValueComponent.form.valid).toBeTruthy();
-
-                done();
-            });
-
-        });
-
-        it('should unsubscribe when destroyed', () => {
-            expect(testHostComponent.inputValueComponent.valueChangesSubscription.closed).toBeFalsy();
-
-            testHostComponent.inputValueComponent.ngOnDestroy();
-
-            expect(testHostComponent.inputValueComponent.valueChangesSubscription.closed).toBeTruthy();
-
-        });
-
-        it('should compare two dates', () => {
-
-            expect(testHostComponent.inputValueComponent.sameDate(
-                new KnoraDate('GREGORIAN', 'CE', 2018, 5, 13),
-                new KnoraDate('GREGORIAN', 'CE', 2018, 5, 13))).toEqual(true);
-
-            expect(testHostComponent.inputValueComponent.sameDate(
-                new KnoraDate('JULIAN', 'CE', 2018, 5, 13),
-                new KnoraDate('GREGORIAN', 'CE', 2018, 5, 13))).toEqual(false);
-
-            expect(testHostComponent.inputValueComponent.sameDate(
-                new KnoraDate('GREGORIAN', 'CE', 2018, 5, 13),
-                new KnoraDate('GREGORIAN', 'CE', 2019, 5, 13))).toEqual(false);
-
-        });
-
-        it('should compare the existing version of a date to the user input', () => {
-
-            // knoraDate('GREGORIAN', 'CE', 2018, 5, 13)
-            const initValue: KnoraDate | KnoraPeriod = testHostComponent.inputValueComponent.getInitValue();
-
-            expect(
-                testHostComponent.inputValueComponent.standardValueComparisonFunc(
-                    initValue, new KnoraDate('GREGORIAN', 'CE', 2018, 5, 13)
-                )
-            ).toBeTruthy();
-
-            expect(
-                testHostComponent.inputValueComponent.standardValueComparisonFunc(
-                    initValue, new KnoraDate('GREGORIAN', 'CE', 2019, 5, 13)
-                )
-            ).toBeFalsy();
-
-            expect(
-                testHostComponent.inputValueComponent.standardValueComparisonFunc(
-                    initValue, null
-                )
-            ).toBeFalsy();
-
-            expect(
-                testHostComponent.inputValueComponent.standardValueComparisonFunc(
-                    initValue, new KnoraPeriod(
-                        new KnoraDate('GREGORIAN', 'CE', 2018, 5, 13),
-                        new KnoraDate('GREGORIAN', 'CE', 2019, 5, 13)
-                    )
-                )
-            ).toBeFalsy();
-
-        });
-
-        it('should correctly populate an UpdateValue from a KnoraDate', () => {
-
-            const date = new KnoraDate('GREGORIAN', 'CE', 2018, 5, 13);
-
-            const updateVal = new UpdateDateValue();
-
-            testHostComponent.inputValueComponent.populateValue(updateVal, date);
-
-            expect(updateVal.calendar).toEqual('GREGORIAN');
-            expect(updateVal.startEra).toEqual('CE');
-            expect(updateVal.startDay).toEqual(13);
-            expect(updateVal.startMonth).toEqual(5);
-            expect(updateVal.startYear).toEqual(2018);
-            expect(updateVal.endEra).toEqual('CE');
-            expect(updateVal.endDay).toEqual(13);
-            expect(updateVal.endMonth).toEqual(5);
-            expect(updateVal.endYear).toEqual(2018);
-
-        });
-
-        it('should correctly populate an UpdateValue from a KnoraDate with an Islamic calendar date', () => {
-
-            const date = new KnoraDate('ISLAMIC', 'noEra', 1441);
-
-            const updateVal = new UpdateDateValue();
-
-            testHostComponent.inputValueComponent.populateValue(updateVal, date);
-
-            expect(updateVal.calendar).toEqual('ISLAMIC');
-            expect(updateVal.startEra).toBeUndefined();
-            expect(updateVal.startDay).toBeUndefined();
-            expect(updateVal.startMonth).toBeUndefined();
-            expect(updateVal.startYear).toEqual(1441);
-            expect(updateVal.endEra).toBeUndefined();
-            expect(updateVal.endDay).toBeUndefined();
-            expect(updateVal.endMonth).toBeUndefined();
-            expect(updateVal.endYear).toEqual(1441);
-
-        });
-
-        it('should correctly populate an UpdateValue from a KnoraPeriod', () => {
-
-            const dateStart = new KnoraDate('GREGORIAN', 'CE', 2018, 5, 13);
-            const dateEnd = new KnoraDate('GREGORIAN', 'CE', 2019, 6, 14);
-
-            const updateVal = new UpdateDateValue();
-
-            testHostComponent.inputValueComponent.populateValue(updateVal, new KnoraPeriod(dateStart, dateEnd));
-
-            expect(updateVal.calendar).toEqual('GREGORIAN');
-            expect(updateVal.startEra).toEqual('CE');
-            expect(updateVal.startDay).toEqual(13);
-            expect(updateVal.startMonth).toEqual(5);
-            expect(updateVal.startYear).toEqual(2018);
-            expect(updateVal.endEra).toEqual('CE');
-            expect(updateVal.endDay).toEqual(14);
-            expect(updateVal.endMonth).toEqual(6);
-            expect(updateVal.endYear).toEqual(2019);
-
-        });
-
-        it('should correctly populate an UpdateValue from a KnoraPeriod with dates in different eras', () => {
-
-            const dateStart = new KnoraDate('GREGORIAN', 'BCE', 2018, 5, 13);
-            const dateEnd = new KnoraDate('GREGORIAN', 'CE', 2019, 6, 14);
-
-            const updateVal = new UpdateDateValue();
-
-            testHostComponent.inputValueComponent.populateValue(updateVal, new KnoraPeriod(dateStart, dateEnd));
-
-            expect(updateVal.calendar).toEqual('GREGORIAN');
-            expect(updateVal.startEra).toEqual('BCE');
-            expect(updateVal.startDay).toEqual(13);
-            expect(updateVal.startMonth).toEqual(5);
-            expect(updateVal.startYear).toEqual(2018);
-            expect(updateVal.endEra).toEqual('CE');
-            expect(updateVal.endDay).toEqual(14);
-            expect(updateVal.endMonth).toEqual(6);
-            expect(updateVal.endYear).toEqual(2019);
-
-        });
-
-        it('should correctly populate an UpdateValue from a KnoraPeriod with Islamic calendar dates', () => {
-
-            const dateStart = new KnoraDate('ISLAMIC', 'noEra', 1441);
-            const dateEnd = new KnoraDate('ISLAMIC', 'noEra', 1442);
-
-            const updateVal = new UpdateDateValue();
-
-            testHostComponent.inputValueComponent.populateValue(updateVal, new KnoraPeriod(dateStart, dateEnd));
-
-            expect(updateVal.calendar).toEqual('ISLAMIC');
-            expect(updateVal.startEra).toBeUndefined();
-            expect(updateVal.startDay).toBeUndefined();
-            expect(updateVal.startMonth).toBeUndefined();
-            expect(updateVal.startYear).toEqual(1441);
-            expect(updateVal.endEra).toBeUndefined();
-            expect(updateVal.endDay).toBeUndefined();
-            expect(updateVal.endMonth).toBeUndefined();
-            expect(updateVal.endYear).toEqual(1442);
-
-        });
-
-    });
-
-    describe('create a date value', () => {
-
-        let testHostComponent: TestHostCreateValueComponent;
-        let testHostFixture: ComponentFixture<TestHostCreateValueComponent>;
-        let loader: HarnessLoader;
-
-        let valueComponentDe: DebugElement;
-
-        beforeEach(() => {
-            testHostFixture = TestBed.createComponent(TestHostCreateValueComponent);
-            testHostComponent = testHostFixture.componentInstance;
-            loader = TestbedHarnessEnvironment.loader(testHostFixture);
-            testHostFixture.detectChanges();
-
-            expect(testHostComponent).toBeTruthy();
-            expect(testHostComponent.inputValueComponent).toBeTruthy();
-
-            const hostCompDe = testHostFixture.debugElement;
-
-            valueComponentDe = hostCompDe.query(By.directive(YetAnotherDateValueComponent));
-        });
-
-        it('should create a value', () => {
-
-            expect(testHostComponent.inputValueComponent.datePickerComponent.value).toEqual(null);
-
-            // simulate user input
-            const newKnoraDate = new KnoraDate('JULIAN', 'CE', 2019, 5, 13);
-
-            testHostComponent.inputValueComponent.datePickerComponent.value = newKnoraDate;
-            testHostComponent.inputValueComponent.datePickerComponent.handleInput();
-
-            testHostFixture.detectChanges();
-
-            expect(testHostComponent.inputValueComponent.mode).toEqual('create');
-
-            expect(testHostComponent.inputValueComponent.form.valid).toBeTruthy();
-
-            const newValue = testHostComponent.inputValueComponent.getNewValue();
-
-            expect(newValue instanceof CreateDateValue).toBeTruthy();
-
-            expect((newValue as CreateDateValue).calendar).toEqual('JULIAN');
-
-            expect((newValue as CreateDateValue).startDay).toEqual(13);
-            expect((newValue as CreateDateValue).endDay).toEqual(13);
-            expect((newValue as CreateDateValue).startMonth).toEqual(5);
-            expect((newValue as CreateDateValue).endMonth).toEqual(5);
-            expect((newValue as CreateDateValue).startYear).toEqual(2019);
-            expect((newValue as CreateDateValue).endYear).toEqual(2019);
-
-        });
-
-        it('should reset form after cancellation', async () => {
-
-            // simulate user input
-            const newKnoraDate = new KnoraDate('JULIAN', 'CE', 2019, 5, 13);
-
-            testHostComponent.inputValueComponent.datePickerComponent.value = newKnoraDate;
-            testHostComponent.inputValueComponent.datePickerComponent.handleInput();
-
-            testHostFixture.detectChanges();
-
-            const commentTextarea = await loader.getHarness(MatInputHarness);
-            await commentTextarea.setValue('created comment');
-
-            testHostFixture.detectChanges();
-
-            expect(testHostComponent.inputValueComponent.mode).toEqual('create');
-
-            expect(testHostComponent.inputValueComponent.form.valid).toBeTruthy();
-
-            testHostComponent.inputValueComponent.resetFormControl();
-
-            expect(testHostComponent.inputValueComponent.form.valid).toBeFalsy();
-
-            expect(testHostComponent.inputValueComponent.datePickerComponent.value).toEqual(null);
-
-            const comment = await commentTextarea.getValue();
-
-            expect(comment).toEqual('');
-
-        });
-
-    });
-
-    describe('create a date value no required value', () => {
-
-        let testHostComponent: TestHostCreateValueNoValueRequiredComponent;
-        let testHostFixture: ComponentFixture<TestHostCreateValueNoValueRequiredComponent>;
-
-        beforeEach(() => {
-            testHostFixture = TestBed.createComponent(TestHostCreateValueNoValueRequiredComponent);
-            testHostComponent = testHostFixture.componentInstance;
-            testHostFixture.detectChanges();
-
-            expect(testHostComponent).toBeTruthy();
-            expect(testHostComponent.inputValueComponent).toBeTruthy();
-        });
-
-        it('should not create an empty value', () => {
-            expect(testHostComponent.inputValueComponent.getNewValue()).toBe(false);
-            expect(testHostComponent.inputValueComponent.form.valid).toBe(true);
-        });
-
-        it('should propagate valueRequiredValidator to child component', () => {
-            expect(testHostComponent.inputValueComponent.valueRequiredValidator).toBe(false);
-        });
-
-    });
-});
diff --git a/src/app/workspace/resource/values/yet-another-date-value/yet-another-date-value.component.ts b/src/app/workspace/resource/values/yet-another-date-value/yet-another-date-value.component.ts
deleted file mode 100644
index eeee292860..0000000000
--- a/src/app/workspace/resource/values/yet-another-date-value/yet-another-date-value.component.ts
+++ /dev/null
@@ -1,188 +0,0 @@
-import { Component, Inject, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewChild } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
-import { CreateDateValue, KnoraDate, KnoraPeriod, ReadDateValue, UpdateDateValue } from '@dasch-swiss/dsp-js';
-import { Subscription } from 'rxjs';
-import { BaseValueDirective } from 'src/app/main/directive/base-value.directive';
-import { ValueErrorStateMatcher } from '../value-error-state-matcher';
-import { DatePickerComponent } from './date-picker/date-picker.component';
-
-// https://stackoverflow.com/questions/45661010/dynamic-nested-reactive-form-expressionchangedafterithasbeencheckederror
-const resolvedPromise = Promise.resolve(null);
-
-@Component({
-    selector: 'app-yet-another-date-value',
-    templateUrl: './yet-another-date-value.component.html',
-    styleUrls: ['./yet-another-date-value.component.scss']
-})
-export class YetAnotherDateValueComponent extends BaseValueDirective implements OnInit, OnChanges, OnDestroy {
-
-    @ViewChild('dateInput') datePickerComponent: DatePickerComponent;
-
-    @Input() displayValue?: ReadDateValue;
-
-    // @Input() displayOptions?: 'era' | 'calendar' | 'all';
-
-    @Input() ontologyDateFormat = 'dd.MM.YYYY';
-
-    // @Input() showHexCode = false;
-
-    valueFormControl: FormControl;
-    commentFormControl: FormControl;
-    form: FormGroup;
-    valueChangesSubscription: Subscription;
-    customValidators = [];
-    matcher = new ValueErrorStateMatcher();
-
-    constructor(@Inject(FormBuilder) private _fb: FormBuilder) {
-        super();
-    }
-
-    /**
-     * returns true if both dates are the same.
-     *
-     * @param date1 date for comparison with date2
-     * @param date2 date for comparison with date1
-     */
-    sameDate(date1: KnoraDate, date2: KnoraDate): boolean {
-        return (date1.calendar === date2.calendar && date1.year === date2.year && date1.month === date2.month && date1.day === date2.day && date1.era === date2.era);
-    }
-
-    standardValueComparisonFunc(initValue: KnoraDate | KnoraPeriod, curValue: KnoraDate | KnoraPeriod | null): boolean {
-        let sameValue: boolean;
-        if (initValue instanceof KnoraDate && curValue instanceof KnoraDate) {
-            sameValue = this.sameDate(initValue, curValue);
-        } else if (initValue instanceof KnoraPeriod && curValue instanceof KnoraPeriod) {
-            sameValue = this.sameDate(initValue.start, curValue.start) && this.sameDate(initValue.end, curValue.end);
-        } else {
-            // init value and current value have different types
-            sameValue = false;
-        }
-        return sameValue;
-    }
-
-    getInitValue(): KnoraDate | KnoraPeriod | null {
-        if (this.displayValue !== undefined) {
-            return this.displayValue.date;
-        } else {
-            return null;
-        }
-    }
-
-    ngOnInit() {
-
-        // initialize form control elements
-        this.valueFormControl = new FormControl(null);
-        this.commentFormControl = new FormControl(null);
-
-        // subscribe to any change on the comment and recheck validity
-        this.valueChangesSubscription = this.commentFormControl.valueChanges.subscribe(
-            data => {
-                this.valueFormControl.updateValueAndValidity();
-            }
-        );
-
-        this.form = this._fb.group({
-            value: this.valueFormControl,
-            comment: this.commentFormControl
-        });
-
-        this.resetFormControl();
-
-        resolvedPromise.then(() => {
-            // add form to the parent form group
-            this.addToParentFormGroup(this.formName, this.form);
-        });
-    }
-
-    ngOnChanges(changes: SimpleChanges): void {
-        this.resetFormControl();
-    }
-
-    // unsubscribe when the object is destroyed to prevent memory leaks
-    ngOnDestroy(): void {
-        this.unsubscribeFromValueChanges();
-
-        resolvedPromise.then(() => {
-            // remove form from the parent form group
-            this.removeFromParentFormGroup(this.formName);
-        });
-    }
-
-    /**
-     * given a value and a period or Date, populates the value.
-     *
-     * @param value the value to be populated.
-     * @param dateOrPeriod the date or period to read from.
-     */
-    populateValue(value: UpdateDateValue | CreateDateValue, dateOrPeriod: KnoraDate | KnoraPeriod) {
-
-        if (dateOrPeriod instanceof KnoraDate) {
-
-            value.calendar = dateOrPeriod.calendar;
-            value.startEra = dateOrPeriod.era !== 'noEra' ? dateOrPeriod.era : undefined;
-            value.startDay = dateOrPeriod.day;
-            value.startMonth = dateOrPeriod.month;
-            value.startYear = dateOrPeriod.year;
-
-            value.endEra = value.startEra;
-            value.endDay = value.startDay;
-            value.endMonth = value.startMonth;
-            value.endYear = value.startYear;
-
-        } else if (dateOrPeriod instanceof KnoraPeriod) {
-
-            value.calendar = dateOrPeriod.start.calendar;
-
-            value.startEra = dateOrPeriod.start.era !== 'noEra' ? dateOrPeriod.start.era : undefined;
-            value.startDay = dateOrPeriod.start.day;
-            value.startMonth = dateOrPeriod.start.month;
-            value.startYear = dateOrPeriod.start.year;
-
-            value.endEra = dateOrPeriod.end.era !== 'noEra' ? dateOrPeriod.end.era : undefined;
-            value.endDay = dateOrPeriod.end.day;
-            value.endMonth = dateOrPeriod.end.month;
-            value.endYear = dateOrPeriod.end.year;
-
-        }
-    }
-
-    getNewValue(): CreateDateValue | false {
-        if (this.mode !== 'create' || !this.form.valid || this.isEmptyVal()) {
-            return false;
-        }
-
-        const newDateValue = new CreateDateValue();
-
-        const dateOrPeriod = this.valueFormControl.value;
-
-        this.populateValue(newDateValue, dateOrPeriod);
-
-        if (this.commentFormControl.value !== null && this.commentFormControl.value !== '') {
-            newDateValue.valueHasComment = this.commentFormControl.value;
-        }
-
-        return newDateValue;
-    }
-
-    getUpdatedValue(): UpdateDateValue | false {
-        if (this.mode !== 'update' || !this.form.valid) {
-            return false;
-        }
-
-        const updatedDateValue = new UpdateDateValue();
-
-        updatedDateValue.id = this.displayValue.id;
-
-        const dateOrPeriod = this.valueFormControl.value;
-
-        this.populateValue(updatedDateValue, dateOrPeriod);
-
-        // add the submitted comment to updatedIntValue only if user has added a comment
-        if (this.commentFormControl.value !== null && this.commentFormControl.value !== '') {
-            updatedDateValue.valueHasComment = this.commentFormControl.value;
-        }
-
-        return updatedDateValue;
-    }
-
-}
diff --git a/src/app/workspace/search/advanced-search/resource-and-property-selection/search-select-property/specify-property-value/search-date-value/search-date-value.component.ts b/src/app/workspace/search/advanced-search/resource-and-property-selection/search-select-property/specify-property-value/search-date-value/search-date-value.component.ts
index aa6d26a783..f9e04de677 100644
--- a/src/app/workspace/search/advanced-search/resource-and-property-selection/search-select-property/specify-property-value/search-date-value/search-date-value.component.ts
+++ b/src/app/workspace/search/advanced-search/resource-and-property-selection/search-select-property/specify-property-value/search-date-value/search-date-value.component.ts
@@ -1,8 +1,6 @@
 import { Component, Inject, Input, OnDestroy, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Constants, KnoraDate } from '@dasch-swiss/dsp-js';
-import { JDNConvertibleCalendar } from 'jdnconvertiblecalendar';
-import { CalendarHeaderComponent } from 'src/app/workspace/resource/values/date-value/calendar-header/calendar-header.component';
 import { PropertyValue, Value, ValueLiteral } from '../operator';
 
 // https://stackoverflow.com/questions/45661010/dynamic-nested-reactive-form-expressionchangedafterithasbeencheckederror
@@ -22,9 +20,6 @@ export class SearchDateValueComponent implements OnInit, OnDestroy, PropertyValu
 
     form: FormGroup;
 
-    // custom header for the datepicker
-    // headerComponent = CalendarHeaderComponent;
-
     constructor(@Inject(FormBuilder) private _fb: FormBuilder) {
     }