Question

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

现在我的要求是，我想设置日历的开始日期。例如，如果用户去了某个月份，则日历应从我提供的日期开始。

例如，对于四月的月份，我想查看以下视图：

click here to see image

请忽略日期的颜色。

我还希望星期日是星期几的开始，因为我正在使用firstDayOfWeek属性。

代码链接：

Click here

Answer 1

这可以通过利用ngbootstrap datepicker API documentation（滚动到输出）上说明的navigate事件来完成。

我假设您在这里使用的是ngModel（模板驱动，双向绑定）。

在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进行了演示。

Answer 2

对于初学者来说，请遵循@ 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 3

可以使用datepicker-options属性将日期选择器的选项作为JSON传递

   dateOptions = {     
  startingDay: 0
 };

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

3 个答案: