Установить дату начала календаря в ngb-datepicker

Question

Я работаю в приложении, построенном на angular 7. Мне нужно показать календарь в моем приложении. Для отображения календаря я использую угловое управление ng-bootstrap - ngb-datepicker

Теперь мое требование - я хочу установить дату начала для календаря. Например, если пользователь переходит на любой месяц, календарь должен начинаться с даты, которую я предоставляю.

Например, за апрель месяц, я хочу посмотреть ниже:

нажмите здесь, чтобы увидеть изображение

Пожалуйста, игнорируйте цвета дат.

Кроме того, я хочу, чтобы воскресенье было днем ​​недели, для этого я использую свойство firstDayOfWeek.

Кодовая ссылка:

Нажмите здесь

Answer 1

Это можно сделать, используя событие navigate, как описано в документации по API ngbootstrap datepicker (прокрутка до Выходы).

Я предполагаю, что вы используете ngModel(управляемый шаблоном, двухстороннее связывание) здесь.

В component.html вы включите привязку события navigate и привяжите ее к методу onNavigate(), который будет запускаться всякий раз, когдапользователь переходит к другому месяцу или году.

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

И на вашем component.ts мы определим логику для метода onNavigate().Интерфейс для event определяется как , например , но для этого случая нас интересует только 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
  }
}

Я сделал демо за здесь .

Answer 2

Начнем с того, что @ wentjun описал, и добавьте (навигацию) событие в свой шаблон.

Из того, что я понимаю, бизнес-логика очень специфична, и вам необходимо установить конкретныедаты при переходе к определенным месяцам.

Поэтому для этого вам нужно какое-то отображение.

Событие nagigate предоставит вам этот вид данных средидругое: 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]
  }
}

Я также добавил вам возможность отключать определенные дни в месяце.

И вы можете проверить все это здесь

Answer 3

Опции для datepicker могут быть переданы как JSON с помощью атрибута datepicker-options

   dateOptions = {     
  startingDay: 0
 };