日期时间输入字段最小值和最大值的角度绑定答案

【问题标题】：Angular binding for datetime input field min and max value日期时间输入字段最小值和最大值的角度绑定
【发布时间】：2019-10-26 21:01:27
【问题描述】：

我不知道是否有办法将 .ts 文件中的变量值绑定到输入值、最小值和最大值属性。我尝试了很多方法，但似乎没有一个有效。

我有两种方式从输入字段 [(ngModel)]="transferPoint.arrivalTime 获取值，但我需要将 min 和 max 属性设置为某些值。

这不起作用：min='{{flight.departureTime}}'

这是我的 html 文件

<h1 mat-dialog-title>ADD NEW TRANSFER POINT</h1>
<div mat-dialog-content>


<mat-form-field>
<input type="datetime-local" id="arrival-time" name="arrival-time"  value="{{flight.departureTime}}" min="{{flight.departureTime}}"
  max="{{flight.arrivalTime}}" matInput [(ngModel)]="transferPoint.arrivalTime" placeholder="Arrival time">
</mat-form-field>
<br>
<mat-form-field>
<input type="datetime-local" id="departure-time" name="departure-time" value="2018-06-12T19:30" min="2018-06-07T00:00"
  max="2018-06-14T00:00" matInput [(ngModel)]="transferPoint.departureTime" placeholder="Departure time">
</mat-form-field>
 <br>
 <mat-form-field>
<input matInput [(ngModel)]="transferPoint.countryAndCity" placeholder="Country and City">
</mat-form-field>

</div>
<div mat-dialog-actions>
<button class="submitbtn" mat-raised-button (click)='addTransferPoint()'>ADD</button>
<button class="cancelbtn" mat-raised-button mat-dialog-close>CANCEL</button>

</div>

这是我的 .ts 文件

export class AddTransferPointComponent implements OnInit {

errorMessage: string;
flightId: any;
flight: FlightDTO;
transferPoint: TransferPointDTO = new TransferPointDTO();

constructor(@Inject(MAT_DIALOG_DATA) public data: any,
          public dialogRef: MatDialogRef<any>,
          private transferPointService: TransferService,
          private flightService: FlightService) { }

ngOnInit() {
  this.flightId = this.data.flight;
}

getFlight() {
 this.flightService.getFlight(this.flightId).subscribe(
  data => {
    this.flight = data;
  }
 )
}

addTransferPoint() {
this.transferPoint.flightId = this.flightId;
this.transferPointService.createTransferPoint(this.transferPoint).subscribe(
  data => {
    this.dialogRef.close();
    location.reload();
  },
  error => {
    console.log(error);
    this.errorMessage = error.error.message;
  }
);

}

}

【问题讨论】：

标签： html angular data-binding

【解决方案1】：

您可以使用属性绑定（另请参阅https://angular.io/guide/template-syntax）：

<input type="datetime-local" id="arrival-time" name="arrival-time"  [value]="flight.departureTime" [min]="flight.departureTime" [max]="flight.arrivalTime" matInput [(ngModel)]="transferPoint.arrivalTime" placeholder="Arrival time">

【讨论】：

嗨，当我在我的代码中使用下面的 sn-p 时，最小值和最大值根本没有任何效果。 ``` 日期范围 ``` 我的 TS : ``` fromDateFilter = new Date(new Date().setDate(this.today.getDate() - 1)); minDateFrom = new Date(new Date().setMonth(this.fromDateFilter.getMonth() - 2)); ```
不确定，但我会仔细检查 TS 部分，看看您是否获得了最小值和最大值的有效日期。除此之外，请查看official angular material documentation for date validation

【解决方案2】：

我在尝试执行 matInput type="datetime-local" 时遇到了类似的问题。当我调试它时，看起来 [min] 指令中的内容需要格式化为它可以理解的字符串......基本上以这种格式传递一个字符串：

YYYY-MM-DDTHH:MM

也许不是最理想的，但就我而言，当我像这样切换数据时它可以工作

var month = this.formatDate(min.getMonth() + 1);
var day = this.formatDate(min.getDate());
this.minDate = min.getFullYear() + "-" + month + "-" + day + "T00:00";

formatDate 在哪里：

private formatDate(nmbr: number): string {
    var date = nmbr + "";
    date = (date.length < 2) ? "0" + date : date;
    return date;
}

然后我可以在指令中使用它：

<input id="eventTime" matInput type="datetime-local" [min]="minDate"  name="eventTime">

【讨论】：