Angular: Validate a date input based on the selection of another date input

Question

I have two input fields: InvoiceDate and InvoiceDueDate. I need to validate the InvoiceDueDate such that it starts 30 days after the selected InvoiceDate.

Currently, I have the InvoiceDueDate validated to not less than the InvoiceDate by binding it to [min]="invoice.invoiceDate"

 <div class="col-sm-2">
                    <label>Invoice Date</label><br>
                    <input type="date" [disabled]="true" name="invoicedate" class="form-control readOnly-date" [(ngModel)]="invoice.invoiceDate" *ngIf="!invoice.financialPeriodId">
                    <input type="date" name="invoicedate" min="{{startDate | date: 'yyyy-MM-dd'}}" max="{{endDate | date: 'yyyy-MM-dd'}}" class="form-control" [(ngModel)]="invoice.invoiceDate" *ngIf="invoice.financialPeriodId">
                </div>

                <div class="col-sm-2">
                    <label>Due Date</label><br>
                    <input type="date" name="dueDate" class="form-control readOnly-date" [(ngModel)]="invoice.invoiceDueDate" *ngIf="!invoice.invoiceDate">
                    <input type="date" name="dueDate" [min]="invoice.invoiceDate" class="form-control" [(ngModel)]="invoice.invoiceDueDate">
                </div>

The InvoiceDueDate should be set to 30 days from the date selected on InvoiceDate. example: if (InvoiceDate is 01-10-2019) then InvoiceDueDate should be 02-11-2019

Mohamed Ali RACHID · Accepted Answer · 2019-10-10 10:29:26Z

3

public minDate: newDat();

minDate = this.invoice.invoiceDate.setDate(this.invoice.invoiceDate.getDate() + 30);

and in your HTML you can use [min]="minDate"

hope this helps you!

edited Oct 10, 2019 at 10:29

Mohamed Ali RACHID

3,31713 silver badges22 bronze badges

answered Oct 10, 2019 at 10:28

Hiras Haris

4981 gold badge4 silver badges18 bronze badges

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

Collectives™ on Stack Overflow

Angular: Validate a date input based on the selection of another date input

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related