Могу ли я выбрать целую неделю с помощью ngbDatepicker? - PullRequest
Новая
       48

Могу ли я выбрать целую неделю с помощью ngbDatepicker?

0 голосов
/ 01 ноября 2019

Я сделал DatePicker в Angular 8, используя ngbDatepicker из библиотеки ng-bootstrap.

Я хочу выбрать целую неделю, щелкнув по рабочим дням слева. Я знаю, что могу выбрать дату и получить неделю из этого, но я ищу более элегантное решение.

Возможно ли это каким-то образом?

Мой шаблон: 

<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>

1 Ответ

0 голосов
/ 01 ноября 2019

Вы можете «играть», используя дневной шаблон. Основываясь на шаблоне выбора дня, вы можете использовать стили 

  .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>

Итак,единственное, что вам нужно, это когда изменение select, вычисление 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, и после вычисления вызовов toDate и fromDate для onChange

см. пример в stackblitz

...