Date validation logic within PrimeNg's

Question

I am trying to set a min and max date within PrimeNG's . I would like for the "FROM DATE" input to not be older than 2 weeks from today's date. And the "TO DATE" input to not be more than 1 year away from today's date.

Here are my date fields.

<p-calendar [showIcon]="true"  [minDate]="minDate" [readonlyInput]="true" placeholder="From Date" id="setter" ></p-calendar>

<p-calendar [showIcon]="true"   [maxDate]="maxDate" [readonlyInput]="true"placeholder="To Date" id="setter"></p-calendar>

This is in my logic in the .ts file

ngOnInit() {
    
    let today = new Date();
    let month = today.getMonth();
    let year = today.getFullYear();
    let prevMonth = (month === 0) ? 11 : month -1;
    let nextMonth = (month === 11) ? 0 : month + 4;
    this.minDate = new Date();
    this.maxDate = new Date();
    this.minDate.setMonth(prevMonth);
    this.maxDate.setMonth(nextMonth);
    
  }

View of primeNG calender

score 4 · Accepted Answer · answered Aug 26 '19 at 18:15

4

From the requirements you stated, you would need one [maxDate] attribute on each date/time control. Have one variable that sets the max for From Date to nothing greater than two weeks from now:

this.fromDateMax = new Date(Date.now() + 12096e5);

And another variable to set the max date of To Date to one year from now:

this.toDateMax = new Date(new Date().setFullYear(new Date().getFullYear() + 1));

Both of these in the ngOnInit() will set the appropriate limits as you stated.

Here is stackblitz for reference and the two SO answers I used to get the date limits:

answered Aug 26 '19 at 18:15

Milo

3,365
9
30
44

Thanks @Milo that was very useful in helping me get going. – confusedntired Aug 26 '19 at 19:04
I am trying to add on to this code, how can I do a calculation of total dates between the start and end date. Say for ex, that the total days is 20 days in between. If it is more than 25 days, I can have a popup textbox stating that it is too many days. – confusedntired Sep 17 '19 at 12:02
@yabs check [this question](https://stackoverflow.com/questions/3224834/get-difference-between-2-dates-in-javascript) – Milo Sep 17 '19 at 12:26
Thanks Milo, Im still rather stuck. should i create 2 new variables and then subtract them and return the absolute value of the sum ? – confusedntired Sep 17 '19 at 12:45
1

@yabs I suppose, since you would want to isolate to the `mm/dd/yyyy` format. – Milo Sep 17 '19 at 12:58

score 0 · Answer 2 · answered Aug 26 '19 at 19:04

Only had to make a small chane to my nhOnit(). It looks like this now and it works exactly how I needed it to.

ngOnInit() {

    let today = new Date();
    let month = today.getMonth();
    let year = today.getFullYear();
    let nextMonth = (month === 11) ? 0 : month + 4;
    this.minDate = new Date(Date.now() - 12096e5);
    this.maxDate = new Date(new Date().setFullYear(new Date().getFullYear() + 1));
    this.maxDate.setMonth(nextMonth);

  }

Date validation logic within PrimeNg's

2 Answers2