PrimeNG 日历 - 无法禁用日期或日期答案

【问题标题】：PrimeNG Calendar - can't disable days or datesPrimeNG 日历 - 无法禁用日期或日期
【发布时间】：2017-07-03 22:12:21
【问题描述】：

我正在使用 Angular 2 并尝试获取 PrimeNG 日历日期选择器，以允许我禁用特定日期（节假日）以及周末。

他们的documentation 说我应该能够同时做到这两点，并举了一个我试图实现的例子。但是，没有任何日期被禁用！

在我的组件模板中：

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

在我的组件类中（带有一些我无法工作的示例初始化代码）：

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

难道没有更好的 Angular 2 日历日期选择器允许禁用特定日期吗？（不只是 minDate 和 maxDate）？这是我发现的唯一一个具有此功能的功能，它当然不适合我！

如果是某些不兼容的包或其他问题，这里是我的 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"
  }

【问题讨论】：

标签： angular datepicker primeng primeng-calendar

【解决方案1】：

您可以查看 Angular Material 而不是 PrimeNG。

您可以使用它的日期验证来过滤您不想允许的日期。 true 的函数返回值表示有效日期。

这肯定会比使用 PrimeNG 做更多的工作，但如果他们的日期选择器不能满足您的要求，您就必须妥协。

所以对于这个，你可以有类似的东西

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

【讨论】：

【解决方案2】：

您的代码是正确的，它绝对应该适用于“primeng”：“^6.0.2”。尝试使用primeng 6.0.2，看看错误是否仍然出现。 disabledates 将在今天和昨天禁用，并且 disabledays 将禁用第 0 天（星期日）和第 6 天（星期六）。

【讨论】：

【解决方案3】：

根据documentation，您似乎可以像这样禁用特定日期和/或日期：

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

编辑

重读问题。我的错！尽管您的格式正确，还是文档错误？您的 disabledDays 格式如下：[disabledDays]="[0,6]"，而他们的格式如下：[disabledDays]="[0,6}"。你的反身是有道理的，但这可能是一个错误吗？

希望对你有帮助！

Additional Source

【讨论】：

这基本上是我在问题中给出的代码。也就是不适合我的代码。 :(
对不起！我通过查看其他类似的 SO 问题/答案让自己感到困惑！说到这里，您可能会在这里找到一些帮助：stackoverflow.com/questions/40082224/… 他们对其他 Angular2 服务有很好的建议。祝你好运！