html - Logica de validare a datelor în cadrul <pcalender> din PrimeNg

Încerc să setez o dată minimă și maximă în cadrul PrimeNG. Aș dori ca câmpul "DATA DE LA" să nu fie mai vechi de 2 săptămâni de la data de azi. Și câmpul "DATA PÂNĂ LA" să nu fie la mai mult de 1 an de la data de azi.

Iată câmpurile mele de date.

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

Acesta este în logica mea din fișierul .ts

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

Vizualizare a calendarului primeNG

Răspuns #1

Din cerințele pe care le-ați menționat, veți avea nevoie de un atribut [maxDate] pe fiecare control de dată/oră. Aveți o variabilă care setează maximul pentru Data De La la nimic mai mare de două săptămâni de acum:

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

Și o altă variabilă pentru a seta data maximă a câmpului 'Până la' la un an de acum:

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

Ambele acestea din ngOnInit() vor seta limitele corespunzătoare așa cum ați menționat.

Iată stackblitz pentru referință și cele două răspunsuri de pe SO pe care le-am folosit pentru a obține limitele de date:

1. Javascript Data Plus 2 Săptămâni (14 zile)
2. Adaugă un an la data de astăzi

Răspunsul #2

A trebuit doar să fac o mică schimbare la nhOnit(). Arată așa acum și funcționează exact așa cum aveam nevoie.

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

  }