0

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?

Antikhippe
  • 6,316
  • 2
  • 28
  • 43
Sasha Shpota
  • 9,436
  • 14
  • 75
  • 148

1 Answers1

1

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.

Joe
  • 6,773
  • 2
  • 47
  • 81
  • Thank you. The solution works only sometimes. I have a feeling that the check that verifies the ability of selection is performed in parallel with event handling and this causes the problem, but I'm not sure. I'm debuging and trying out to understand what's going on. Another strange thing is that it works every time while switching from December to January next year and I can't get why. – Sasha Shpota Nov 06 '17 at 16:28
  • Are you sure it's being fired (a console out in the function being called on the right month)? I did worry it only fired when the month changed as the user selected it. – Joe Nov 07 '17 at 09:30
  • Yes, it is. Although I didn't use `console.log`. I used brake point in debugger - every time I changed month using a button it did entered the code with correct month. – Sasha Shpota Nov 07 '17 at 10:25
  • Only other way I can think of to do it is maybe disable click events, and style to look disabled, in the css of the day class (except the first element) using something like `pointer-events: none;` – Joe Nov 08 '17 at 13:54