Fixing last breaking changes

src/app/app.module.ts

@@ -2,7 +2,7 @@ import { HTTP_INTERCEPTORS, HttpClientModule } from "@angular/common/http";
 import { APP_INITIALIZER, NgModule } from "@angular/core";
 import { MatButtonModule } from "@angular/material/button";
 import { MatCardModule } from "@angular/material/card";
-import { MatRippleModule } from "@angular/material/core";
+import { MatNativeDateModule, MatRippleModule } from "@angular/material/core";
 import { MatIconModule } from "@angular/material/icon";
 import { MatMenuModule } from "@angular/material/menu";
 import { MatProgressBarModule } from "@angular/material/progress-bar";
@@ -49,6 +49,7 @@ import { MatBadgeModule } from "@angular/material/badge";
 import { StartupService } from "./services/startup.service";
 import { LongPressDirective } from "./misc/long-press.directive";
 import { DatetimeInterceptorService } from "./services/datetime-interceptor.service";
+import { MatDatepickerModule } from "@angular/material/datepicker";
 
 
 @NgModule({
@@ -103,7 +104,9 @@ import { DatetimeInterceptorService } from "./services/datetime-interceptor.serv
 		MatExpansionModule,
 		InfiniteScrollModule,
 		MatBadgeModule,
-		HammerModule
+		HammerModule,
+		MatDatepickerModule,
+		MatNativeDateModule
 	],
 	bootstrap: [AppComponent],
 	exports: [

src/app/pages/metadata-edit/metadata-edit.component.html

@@ -30,13 +30,15 @@
                 </mat-form-field>
 
 	            <mat-form-field class="w-25 pr-3">
-                    <mat-label>Start Year</mat-label>
+		            <mat-label>Air period</mat-label>
-                    <input matInput [(ngModel)]="this.show.startYear" name="startYear" type="number" [max]="this.show.endYear"/>
+		            <mat-date-range-input [rangePicker]="picker">
-                </mat-form-field>
+			            <input matStartDate placeholder="Start date" name="startAir" [(ngModel)]="this.show.startAir">
-                <mat-form-field class="w-25 pr-3">
+			            <input matEndDate placeholder="End date" name="endAir" [(ngModel)]="this.show.endAir">
-                    <mat-label>End Year</mat-label>
+		            </mat-date-range-input>
-                    <input matInput [(ngModel)]="this.show.endYear" name="endYear" type="number" [min]="this.show.startYear"/>
+		            <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+		            <mat-date-range-picker #picker></mat-date-range-picker>
 	            </mat-form-field>
+
                 <mat-form-field class="w-50">
                     <mat-label>Status</mat-label>
                     <mat-select>

src/app/pages/show-details/show-details.component.html

@@ -10,8 +10,7 @@
 		<div class="main col">
 			<div class="info">
 				<h1 class="title">{{this.show.title}}</h1>
-				<h2 class="date" *ngIf="show.endYear && show.startYear != show.endYear; else elseBlock">{{show.startYear}} - {{show.endYear}}</h2>
+				<h2 class="date" *ngIf="getDate(show)">{{getDate(show)}}</h2>
-				<ng-template #elseBlock><h2 class="date">{{show.startYear}}</h2></ng-template>
 			</div>
 			<div class="buttons">
 				<button mat-mini-fab matTooltipPosition="above" matTooltip="Play" class="mr-3" (click)="playClicked()">

src/app/pages/show-details/show-details.component.ts

@@ -3,7 +3,7 @@ import { MatSnackBar } from "@angular/material/snack-bar";
 import { DomSanitizer, SafeStyle, Title } from "@angular/platform-browser";
 import { ActivatedRoute, Router } from "@angular/router";
 import { Episode } from "../../models/resources/episode";
-import { Show } from "../../models/resources/show";
+import { Show, ShowRole } from "../../models/resources/show";
 import { MatDialog } from "@angular/material/dialog";
 import { TrailerDialogComponent } from "../trailer-dialog/trailer-dialog.component";
 import { MetadataEditComponent } from "../metadata-edit/metadata-edit.component";
@@ -12,6 +12,9 @@ import { EpisodeService, PeopleService, SeasonService } from "../../services/api
 import { Page } from "../../models/page";
 import { People } from "../../models/resources/people";
 import { HttpClient } from "@angular/common/http";
+import { LibraryItem } from "../../models/resources/library-item";
+import { Collection } from "../../models/resources/collection";
+import { ItemsUtils } from "../../misc/items-utils";
 
 @Component({
 	selector: "app-show-details",
@@ -173,4 +176,9 @@ export class ShowDetailsComponent implements AfterViewInit, OnDestroy
 			});
 		});
 	}
+
+	getDate(item: LibraryItem | Show | ShowRole | Collection): string
+	{
+		return ItemsUtils.getDate(item);
+	}
 }