Binding ngModel to ion-datetime button would cause unable to prase problem

Question

I am tring to apply a ion-datetime-button in my page. In order to allow users to edit time, I want to use ngModel like this:

<ion-item>
    <ion-label>Sleep Start at</ion-label>
    <ion-datetime-button datetime="startTime"></ion-datetime-button>
    <ion-modal [keepContentsMounted]="true">
      <ng-template>
        <ion-datetime
          id="startTime"
          [(ngModel)]="startTime">
        </ion-datetime>
      </ng-template>
    </ion-modal>
  </ion-item>

However, this would cause the page be not able to prase the date. My TS file is like this:

import { Component, OnInit } from '@angular/core';
import { SleepService } from '../services/sleep.service';
import { OvernightSleepData } from '../data/overnight-sleep-data';
import { AlertController } from '@ionic/angular';

@Component({
  selector: 'app-overnight-sleep',
  templateUrl: './overnight-sleep.page.html',
  styleUrls: ['./overnight-sleep.page.scss'],
})
export class OvernightSleepPage implements OnInit {
  startTime: Date= new Date();
    // endtime: Date = new Date();
  
  constructor(public sleepService:SleepService,
    private alertController: AlertController) { }

  ngOnInit() {
    console.log("overnight-sleep page")
  }
...

How should I fix this problem?

I also tried to bind ngModel to ion-modal:

<ion-item>
    <ion-label>Sleep Start at</ion-label>
    <ion-datetime-button datetime="startTime"></ion-datetime-button>
    <ion-modal [keepContentsMounted]="true" [(ngModel)]="startTime">
      <ng-template>
        <ion-datetime
          id="startTime">
        </ion-datetime>
      </ng-template>
    </ion-modal>
  </ion-item>

The time can normally show on screen but ngModel is not really working 'cause the startTime is not really changed.