Question

我已经使用ng-bootstrap库中的ngbDatepicker在Angular 8中创建了一个日期选择器。

我想通过单击左侧的工作日来选择整个星期。我知道我可以选择一个日期并从中获取星期，但我正在寻找更优雅的解决方案。

这有可能吗？

我的模板：

<div id="datepicker-container">
    <p>Pick a date:</p>
    <!-- Datepicker made using ng bootstrap library
    https://ng-bootstrap.github.io/#/components/datepicker/overview -->
    <ngb-datepicker
        (select)="onDateSelection($event)" 
        [showWeekNumbers]="true"
        [outsideDays]="outsideDays"
        [maxDate]="maxDate">
    </ngb-datepicker>
</div>

Answer 1

您可以使用日模板“播放”。根据范围选择的“天”模板，您可以使用样式

  .custom-day {
      text-align: center;
      padding: 0.185rem 0.25rem;
      display: inline-block;
      height: 2rem;
      width: 2rem;
    }
  .custom-day.range{
      background-color: rgb(2, 117, 216);
      color: white;
    }

和功能

  isInside(date: NgbDate) {
    return date.after(this.fromDate) && date.before(this.toDate);
  }

  isRange(date: NgbDate) {
    return date.equals(this.fromDate) || date.equals(this.toDate) || this.isInside(date);
  }

日期模板如下：

<ng-template #t let-date let-focused="focused">
  <span class="custom-day"
        [class.focused]="focused"
        [class.range]="isRange(date)"
        >
    {{ date.day }}
  </span>
</ng-template>

因此，您唯一需要做的就是在更改选择时计算fromDate和toDate

  onDateSelection(date:NgbDate)
  {
    let fromDate=new Date(date.year+'-'+date.month+'-'+date.day)
    let time=fromDate.getDay()?fromDate.getDay()-1:6
    fromDate=new Date(fromDate.getTime()-time*24*60*60*1000)
    this.fromDate=new NgbDate(fromDate.getFullYear(),fromDate.getMonth()+1,fromDate.getDate());
    const toDate=new Date(fromDate.getTime()+6*24*60*60*1000)
    this.toDate=new NgbDate(toDate.getFullYear(),toDate.getMonth()+1,toDate.getDate())
  }

好吧，我们需要其他的东西，当我们拥有toDate时，它们可以返回一周和一年。为此，我们使用了这两个辅助功能

  calculateWeek(date:any)
  {
    const time = date.getTime()+4*24*60*60*1000;
    const firstDay=new Date(date.getFullYear()+'-1-1')
    return Math.floor(Math.round((time - firstDay.getTime()) / 86400000) / 7) + 1;
  }
  calculateDate(week:number,year:number)
  {
    const firstDay=new Date(year+'-1-4')
    const date=new Date(firstDay.getTime()+(week-1)*7*24*60*60*1000)
    const selectDate=new NgbDate(date.getFullYear(),date.getMonth()+1,date.getDate())
    this.onDateSelection(selectDate)

  }

我们可以将所有内容封装在一个自定义表单控件中，以实现ControlValueAccessor中的组件，并在计算对onChange的toDate和fromDate调用之后

请参见stackblitz

中的示例

我可以使用ngbDatepicker选择整个星期吗？

1 个答案: