ng-bootstrap Datepicker：有没有办法一次 select 多个日期？

Question

我需要一个日历小部件，因为我在当前项目中使用 Bootstrap 4 和 ng-bootstrap，我想知道 ng- boostrap 小部件以某种方式支持日期的多选。

我已经尝试过 wijmo 日历的多选，但没有成功。否则，你能给我推荐一个具有此功能的日期选择器小部件吗？

Answer 1

是的，ng-bootstrap datepicker支持范围选择。您需要在 NgbDateStruct 和 JavaScript Date 对象之间进行手动转换。

Answer 2

这可以帮助

<p>This datepicker uses a custom template to display days.</p>

<ngb-datepicker
  [showWeekNumbers]="true"
  [dayTemplate]="customDay"
  (dateSelect)="selectOne($event)"
></ngb-datepicker>

<ng-template
  #customDay
  let-date
  let-currentMonth="currentMonth"
  let-selected="selected"
  let-disabled="disabled"
  let-focused="focused"
>
  <span
    class="custom-day"
    [class.focused]="focused"
    [class.bg-primary]="isSelected(date)"
    >{{ date.day }}</span
  >
</ng-template>
<div *ngIf="modelList.length>0">
  <h1>Selected dates:</h1>
  <pre>{{modelList| json}} </pre>
</div>

TypeScript

import { Component } from '@angular/core';
import {
  NgbCalendar,
  NgbDate,
  NgbDateStruct,
} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'ngbd-datepicker-customday',
  templateUrl: './datepicker-customday.html',
  styles: [
    `
    .custom-day {
      text-align: center;
      padding: 0.185rem 0.25rem;
      border-radius: 0.25rem;
      display: inline-block;
      width: 2rem;
    }
    .custom-day:hover, .custom-day.focused {
      background-color: #e6e6e6;
    }
    .bg-primary {
      border-radius: 1rem;
    }
  `,
  ],
})
export class NgbdDatepickerCustomday {
  model: NgbDateStruct;
  modelList: Array<NgbDateStruct> = [];

  constructor(private calendar: NgbCalendar) {}


  isSelected = (date: NgbDate) => {
    return this.modelList.indexOf(date) >= 0;
  };
  selectOne(date) {
    if (this.modelList.indexOf(date) >= 0) {
      this.modelList = this.modelList.filter(function (ele) {
        return ele != date;
      });
    } else {
      this.modelList.push(date);
    }
    console.log(this.modelList);
  }
}

Demo stackblitz

ng-bootstrap Datepicker：有没有办法一次 select 多个日期？

ng-bootstrap Datepicker: Is there a way to select more than one date at once?

datepicker

ng-bootstrap

TypeScript