Use native datepicker instead of angular-datetime-picker

package.json

@@ -18,7 +18,6 @@
     "@angular/platform-browser": "^18.2.0",
     "@angular/platform-browser-dynamic": "^18.2.0",
     "@angular/router": "^18.2.0",
-    "@danielmoncada/angular-datetime-picker": "^18.1.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.10"

src/components/main/main.component.html

@@ -2,11 +2,11 @@
   <fieldset class="flex space-around">
     <legend>Playstyle</legend>
     <label>
-      <input type="radio" value="SP" [formControl]="playstyle">
+      <input name="playstyle" type="radio" value="SP" [formControl]="playstyle">
       SP
     </label>
     <label>
-      <input type="radio" value="DP" [formControl]="playstyle">
+      <input name="playstyle" type="radio" value="DP" [formControl]="playstyle">
       DP
     </label>
   </fieldset>
@@ -51,8 +51,7 @@
         </label>
         <label class="grow">
           Time
-          <input [owlDateTime]="dt1" [owlDateTimeTrigger]="dt1" formControlName="time" placeholder="Date Time">
-          <owl-date-time #dt1></owl-date-time>
+          <input formControlName="time" type="datetime-local">
         </label>
         <label class="grow">
           Flare (optional)

src/components/main/main.component.ts

@@ -5,15 +5,12 @@ import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/
 import {Chart} from "../../model/Chart";
 import {Score, TachiImport} from "../../model/TachiImport";
 import {pairwise, startWith} from "rxjs";
-import {OwlDateTimeModule, OwlNativeDateTimeModule} from "@danielmoncada/angular-datetime-picker";
 
 @Component({
   selector: 'app-main',
   standalone: true,
   imports: [
     ReactiveFormsModule,
-    OwlDateTimeModule,
-    OwlNativeDateTimeModule
   ],
   templateUrl: './main.component.html',
   styleUrl: './main.component.css',
@@ -36,7 +33,7 @@ export class MainComponent {
     score: new FormControl(0, {nonNullable: true, validators: Validators.required}),
     lamp: new FormControl("CLEAR", Validators.required),
     flare: new FormControl(),
-    time: new FormControl(new Date()),
+    time: new FormControl(new Date().toISOString().slice(0, 16)),
     judgements: new FormGroup({
       marvelous: new FormControl(),
       perfect: new FormControl(),
@@ -85,7 +82,7 @@ export class MainComponent {
     this.group.reset({
       lamp: "CLEAR",
       score: 0,
-      time: new Date()
+      time: new Date().toISOString().slice(0, 16)
     });
     this.selectedSong = undefined;
     this.selectedSongCharts = undefined;
@@ -109,7 +106,7 @@ export class MainComponent {
   addScore() {
     let score: Score = {
       lamp: this.group.controls.lamp.value!,
-      timeAchieved: this.group.controls.time.value!.getTime(),
+      timeAchieved: new Date(this.group.controls.time.value!).getTime(),
       matchType: "inGameID",
       identifier: "" + this.selectedSong?.id!,
       difficulty: this.group.controls.difficulty.value!,

src/styles.css

@@ -1,24 +1,2 @@
 /* You can add global styles to this file, and also import other style files */
-@import "@danielmoncada/angular-datetime-picker/assets/style/picker.min.css";
 
-.owl-dt-container{
-  background: var(--light-default);
-}
-
-.owl-dt-calendar-table {
-  display: table;
-}
-
-.owl-dt-calendar-table, .owl-dt-calendar-header, .owl-dt-control, .owl-dt-weekday, .owl-dt-calendar-cell {
-  color: var(--default) !important;
-}
-
-.owl-dt-weekday, .owl-dt-calendar-cell {
-  border: none;
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.owl-dt-calendar-table-divider {
-  border: none;
-}