Angular binding for datetime input field min and max value

Question

I don't know if there is a way to bind variable values from .ts file to input value, min and max properties. I've tried many ways, but none seems to be working.

I have two-way biding to get the value from input field [(ngModel)]="transferPoint.arrivalTime, but I need to set min and max properties to certain values.

This is not working: min='{{flight.departureTime}}'

This is my html file

<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>

and here is my .ts file

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;
  }
);

}

}

riorudo · Accepted Answer · 2019-06-12 11:12:04Z

1

You can use property binding (see also 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">

answered Jun 12, 2019 at 11:12

riorudo

1,25711 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ak777 Over a year ago

Hi, when i use the below snippet in my code, the min and max values are not taking any effect at all. ``` <mat-form-field class="fixed-width-fields"> <mat-label>Date Range from</mat-label> <input matInput [min]="minDateFrom" [ngModel]="fromDateFilter | date:'yyyy-MM-ddTHH:mm'" (ngModelChange)="fromDateFilter = $event" type="datetime-local" [max]="fromDateFilter"> </mat-form-field> ``` my TS: ``` fromDateFilter = new Date(new Date().setDate(this.today.getDate() - 1)); minDateFrom = new Date(new Date().setMonth(this.fromDateFilter.getMonth() - 2)); ```

riorudo Over a year ago

Not sure, but I would double check the TS part to see if you get a valid date for the min and max values. Beside that, check out the official angular material documentation for date validation

jaime baylon · Accepted Answer · 2021-02-23 01:18:02Z

I ran into a similar problem trying to do a matInput type="datetime-local". When I debugged it it looks like what goes into the [min] directive needs to be formatted into a string it can understand.... Essentially pass it a string in this format:

YYYY-MM-DDTHH:MM

Perhaps not the most optimal, but in my case when I switched my data like this it works

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

where formatDate is:

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

Then I can use it in the directive:

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

Collectives™ on Stack Overflow

Angular binding for datetime input field min and max value

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related