CODEWITHSUNDEEP
angulardatepickerprimengprimeng-calendar
Sasha Shpota
Sasha Shpota

Reputation: 10310

Allow selecting only first day of month in PrimeNG calendar

I have angular application that uses PrimeNG calendar component.

I need to add a restriction to select only first date of each month.

The component has feature of disabling certain dates by setting disabledDates property, or certain days of the week (disabledDays). But I haven't found anything that will disable days of the month.

Does anyone have an idea of how to implement this?

Upvotes: 0

Views: 3196

Answers (1)

Joe
Joe

Reputation: 7004

Alright. You could use the disabledDates functionality, but clearly it's not going to be feasible to put in every day of the month, so I'd recommend you put in a month's worth of disabled dates, then hook into the onMonthChange event to update your disabled dates when the user views another month:

<p-calendar [disabledDates]="invalidDates" (onMonthChange)="updateDisabledDates($event)">

With something like:

public disabledDates: Date[] = [];

function updateDisabledDates(event) {
  const daysInMonth = new Date(event.year, event.month, 0).getDate();
  disabledDates = []
  for (let i = 2; i < daysInMonth; i++) {
    console.log(i)
    disabledDates.push(new Date(event.year, event.month, i));
  }
}

Not tested it.

Upvotes: 1

Related Questions