-1

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

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

在我的组件模板中：

<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"
  }
4

3 回答 3

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.
}
于 2017-07-04T00:01:39.773 回答
0

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

于 2018-08-21T13:11:16.323 回答
-1

根据文档，您似乎可以禁用特定的日期和/或日期，如下所示：

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

编辑

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

希望能帮助到你！

附加来源

于 2017-07-03T22:17:53.797 回答