使用 matDatePicker 进行时间处理

Question

我有处理日期+时间的组件：[https://stackblitz.com/edit/stackblitz-starters-b3wdcj]

当我在输入中手动更改年/月/日（而不是在选择器中）时，会触发一些事件（dateInput、ngModelChange）。但是当我在 matInput 中手动更改小时/分钟（只需更改 12 -> 13）时，什么也没有发生。 是否可以以某种方式处理时间变化？

我不想在选择器中处理/设置时间，但需要处理 matInput 中的时间更改。

非常感谢您的任何建议。 T.

Answer 1

It seems like you're trying to capture changes in the time component of a date-time input using Angular Material. While the (ngModelChange) event fires when the date part is modified manually, it doesn't seem to react to changes in the time (hours/minutes) part of the input field.
            
To address this, you can indeed use the (input) event to capture changes in the input field, including changes in the time part. You've correctly added (input)="onModelChange2($event)" to your input element to listen for such changes.
            
Here's an example of how you can handle the validity component in stackblitz:
            <code>
         <input
            matInput
            name="dateTimeInput"
            [(ngModel)]="validityDate"
            required
            (input)="onModelChange2($event)"
            (ngModelChange)="onModelChange($event)"
            (change)="onChange($event)"
            (dateInput)="dateInput($event)"
            (dateChange)="dateChange($event)"
            (focusout)="onFocusout($event)"
            (hoursChanged)="onHoursChanged($event)"
            [matDatepicker]="datePicker"
          />
        </code>
    
In this example, onModelChange2(event: any) method is triggered whenever there is any change in the input field, including changes in the time part. Inside this method, you can extract the updated date-time value from the input field, convert it to a Date object, and perform any necessary actions based on the updated time.