PrimeNG Calendar - can't disable days or dates

Question

I am using Angular 2 and trying to get a PrimeNG calendar datepicker to allow me to disable specific days (holidays) as well as weekends.

Their documentation says I should be able to do both and gives an example which I've tried to implement. However, no dates ever get disabled!

In my component template:

<p-calendar [(ngModel)]="requestedShipDate" name="requestedShipDate" 
                      [disabledDates]="restrictedShipDates" [disabledDays]="[0,6]"></p-calendar>

In my component class (with some sample initialization code that I cannot get to work):

export class OrdersNewComponent implements OnInit {
  requestedShipDate: Date;
  restrictedShipDates: Array<Date>;

  ngOnInit() {
    let today = new Date();
    let invalidDate = new Date();
    invalidDate.setDate(today.getDate() - 1);
    this.restrictedShipDates = [today,invalidDate];
  }
}

Is there not a better angular 2 calendar datepicker out there that allows disabling specific dates? (not just minDate and maxDate)? This is the only one I've found with this feature and it of course doesn't work for me!

And in case it is a issue with some incompatabile packages or something, here are the dependencies from my project.json:

"dependencies": {
"@angular/common": "2.4.2",
"@angular/compiler": "2.4.2",
"@angular/core": "2.4.2",
"@angular/flex-layout": "2.0.0-beta.3",
"@angular/forms": "2.4.2",
"@angular/http": "2.4.2",
"@angular/material": "2.0.0-beta.2",
"@angular/platform-browser": "2.4.2",
"@angular/platform-browser-dynamic": "2.4.2",
"@angular/router": "3.4.2",
"angular2-select": "1.0.0-alpha.12",
"core-js": "2.4.1",
"hammerjs": "2.0.8",
"jsrsasign": "6.1.1",
"jwt-decode": "2.1.0",
"lodash": "4.16.4",
"material-design-lite": "1.2.1",
"moment": "2.15.1",
"ng2-pagination": "0.5.1",
"ng2-translate": "4.0.0",
"normalize.css": "4.2.0",
"primeng": "1.1.4",
"rxjs": "5.0.3",
"ts-helpers": "1.1.1",
"xmljson": "0.2.0",
"zone.js": "0.7.4"
},
  "devDependencies": {
    "@angular/compiler-cli": "2.4.2",
    "@types/jasmine": "2.5.38",
    "@types/lodash": "4.14.37",
    "@types/node": "6.0.42",
    "angular-cli": "1.0.0-beta.25.5",
    "angular2-perfect-scrollbar": "^2.0.6",
    "codelyzer": "^2.0.0-beta.4",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "2.0.0",
    "karma-cli": "1.0.1",
    "karma-jasmine": "1.0.2",
    "karma-remap-istanbul": "0.2.1",
    "protractor": "4.0.13",
    "ts-node": "1.2.1",
    "tslint": "4.3.0",
    "typescript": "2.0.10"
  }

score 1 · Answer 1 · answered Jul 04 '17 at 00:01

You could look into Angular Material instead of PrimeNG.

You could use it's date validation to filter through the dates you don't want to allow. A function return value of true would indicate a valid date.

This would definitely be a lot more work than using PrimeNG, but if their datepicker doesn't do what you want, you gotta compromise.

So for this, you could have something like

filterUnwantedDates = (date: Date) => {
  return !listOfDates.contains(date) // or something along those lines. 
  // look into lodash / underscore to help with this.
}

score 0 · Answer 2 · answered Aug 21 '18 at 13:11

0

Your code is correct and it should absolutely work with "primeng": "^6.0.2". Try using primeng 6.0.2 and see if the error still appears. disabledates will disable today and yesterday and disabledays will disable day 0(Sunday) and day 6(Saturday).

answered Aug 21 '18 at 13:11

Trupti J

512
1
4
16

cosinepenguin · Answer 3 · 2017-07-03T22:21:05.610

-1

According to the documentation, it appears you can disable specific dates and/or days like so:

<p-calendar [(ngModel)]="dateValue" [disabledDates]="invalidDates" [disabledDays]="[0,6}" readonlyInput="readonlyInput">></p-calendar>

EDIT

Reread the question. My bad! Although is your formatting correct, or is the documentation wrong? Your disabledDays is formatted like this: [disabledDays]="[0,6]", and theirs is like this: [disabledDays]="[0,6}". Yours makes sense reflexively, but could that be a possible error?

Hope it helps!

Additional Source

edited Jul 03 '17 at 22:21

answered Jul 03 '17 at 22:17

cosinepenguin

1,545
1
12
21

This is basically the code i've given in my question. Aka the code that is not working for me. :( – default_noob_network Jul 03 '17 at 22:19
Sorry! I confused myself by looking at other similar SO questions/answers! Speaking of, you might find some help here: https://stackoverflow.com/questions/40082224/angular-2-datepicker-component-that-enables-to-disable-specific-dates They have good suggestions of other Angular2 services. Good luck! – cosinepenguin Jul 03 '17 at 22:22

PrimeNG Calendar - can't disable days or dates

3 Answers3