Question

我正在使用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];
  }
}

是否有更好的角度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"
  }

Answer 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.
}

Answer 2

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

Answer 3

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

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

修改

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

希望它有所帮助！

Additional Source

PrimeNG日历 - 无法停用日期或日期

3 个答案: