diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 4c021a6f..abbe9f46 100644
--- a/src/app/app.module.ts
+++ b/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: [
diff --git a/src/app/pages/metadata-edit/metadata-edit.component.html b/src/app/pages/metadata-edit/metadata-edit.component.html
index 6fbe5ed1..f17b6b1f 100644
--- a/src/app/pages/metadata-edit/metadata-edit.component.html
+++ b/src/app/pages/metadata-edit/metadata-edit.component.html
@@ -28,15 +28,17 @@
                     <mat-label>Overview</mat-label>
                     <textarea matInput [(ngModel)]="this.show.overview" name="overview"></textarea>
                 </mat-form-field>
-        
-                <mat-form-field class="w-25 pr-3">
-                    <mat-label>Start Year</mat-label>
-                    <input matInput [(ngModel)]="this.show.startYear" name="startYear" type="number" [max]="this.show.endYear"/>
-                </mat-form-field>
-                <mat-form-field class="w-25 pr-3">
-                    <mat-label>End Year</mat-label>
-                    <input matInput [(ngModel)]="this.show.endYear" name="endYear" type="number" [min]="this.show.startYear"/>
-                </mat-form-field>
+
+	            <mat-form-field class="w-25 pr-3">
+		            <mat-label>Air period</mat-label>
+		            <mat-date-range-input [rangePicker]="picker">
+			            <input matStartDate placeholder="Start date" name="startAir" [(ngModel)]="this.show.startAir">
+			            <input matEndDate placeholder="End date" name="endAir" [(ngModel)]="this.show.endAir">
+		            </mat-date-range-input>
+		            <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>
@@ -45,7 +47,7 @@
                         <mat-option value="Planned">Planned</mat-option>
                     </mat-select>
                 </mat-form-field>
-                
+
                 <mat-form-field class="w-100">
                     <mat-label>Genres</mat-label>
                     <mat-chip-list #genreList>
@@ -66,12 +68,12 @@
                         </mat-autocomplete>
                     </mat-chip-list>
                 </mat-form-field>
-        
+
                 <mat-form-field class="w-100">
                     <mat-label>Trailer</mat-label>
                     <input matInput [(ngModel)]="this.show.trailerUrl" name="trailer">
                 </mat-form-field>
-        
+
                 <mat-form-field class="w-100">
                     <mat-label>Studio</mat-label>
                     <input matInput [value]="this.show.studio?.name"
diff --git a/src/app/pages/show-details/show-details.component.html b/src/app/pages/show-details/show-details.component.html
index e7e55fd4..49633de7 100644
--- a/src/app/pages/show-details/show-details.component.html
+++ b/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>
-				<ng-template #elseBlock><h2 class="date">{{show.startYear}}</h2></ng-template>
+				<h2 class="date" *ngIf="getDate(show)">{{getDate(show)}}</h2>
 			</div>
 			<div class="buttons">
 				<button mat-mini-fab matTooltipPosition="above" matTooltip="Play" class="mr-3" (click)="playClicked()">
diff --git a/src/app/pages/show-details/show-details.component.ts b/src/app/pages/show-details/show-details.component.ts
index 9c07e1a2..7b2f42b3 100644
--- a/src/app/pages/show-details/show-details.component.ts
+++ b/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);
+	}
 }