在 ngb-datepicker 中设置日历的开始日期

Question

我正在使用 Angular 7 构建的应用程序。我需要在我的应用程序中显示日历。 为了显示日历，我正在使用角度 ng-bootstrap 控件 - ngb-datepicker

现在我的要求是，我想设置日历的开始日期。 例如，如果用户去任何一个月，日历应该从我提供的日期开始。

例如四月份我想要下面的视图：

click here to see image

请忽略日期的颜色。

我还希望星期天是一周的开始日期，因为我使用的是 firstDayOfWeek 属性。

代码链接：

Click here

Answer 1

对于初学者来说，使用@wentjun 描述的内容并在模板中添加（导航）事件。

据我了解，您的业务逻辑非常具体，您需要在导航到特定月份时设置特定日期。

因此，您需要某种映射来做到这一点。

nagigate 事件将为您提供this 类型的数据，其中包括：next : { year: number; month: number; }

您将使用月份编号进行映射。

制作一个月的枚举，以便我们制作一些美观且可读的东西：

enum MonthList{
  January = 1,
  February,
  March,
  April,
  May,
  June,
  July,
  August,
  September,
  October,
  November,
  December
}

现在进行映射：

const DATES_MAP = {
  [MonthList.January]: 20,
  [MonthList.February]: 14,
  [MonthList.March]: 24,
  [MonthList.April]: 5,
  [MonthList.May]: 6,
  [MonthList.June]: 7,
  [MonthList.July]: 8,
  [MonthList.August]: 12,
  [MonthList.September]: 13,
  [MonthList.October]: 14,
  [MonthList.November]: 3,
  [MonthList.December]: 3,
}

现在，再次像 @wentjun 描述的那样，您将利用来自事件的数据并以这样的方法设置所需的日期：

onNavigate(event) {
  this.selected = {
    year:event.next.year,
    month: event.next.month,
    day:DATES_MAP[event.next.month]
  }
}

我还为您添加了禁用每月特定日期的选项。

你可以检查所有这些here

Answer 2

datepicker 的选项可以使用 datepicker-options 属性作为 JSON 传递

   dateOptions = {     
  startingDay: 0
 };

Answer 3

这可以通过使用navigate 事件来完成，如ngbootstrap datepicker API documentation 中所述（滚动到输出）。

我假设你在这里使用的是 ngModel(template-driven, two way binding)。

在 component.html 中，您将包含 navigate 事件绑定，并将其绑定到 onNavigate() 方法，每当用户导航到不同的月份或年份时都会触发该方法。

<ngb-datepicker #dp [(ngModel)]="selected" (navigate)="onNavigate($event)"></ngb-datepicker>

在您的 component.ts 上，我们将定义 onNavigate() 方法的逻辑。 event 的接口定义为such，但在这种情况下，我们只对event.next 感兴趣，因为这为我们提供了用户导航到的目标月份和年份。从那里，我们将重新定义我们的模型selected，并为其提供年、月和selectedDay（这是您定义的开始日期！）。在此示例中，我们假设开始日期为 1，这将导致当用户在日期选择器上导航到任何年份或月份时选择该月的第一天。

onNavigate(event) {
  //console.log(event)
  const targetMonth = event.next.month;
  const targetYear = event.next.year;
  const selectedDay = 1;
  this.selected = {
    year:targetYear,
    month: targetMonth,
    day:selectedDay
  }
}

我已经在here 上做了一个演示。