在 Angular 4 中，如何在日期选择器中动态设置最小日期和最大日期？答案

【问题标题】：In Angular 4, how to dynamically set min date and max date in date picker?在 Angular 4 中，如何在日期选择器中动态设置最小日期和最大日期？
【发布时间】：2018-05-22 14:42:32
【问题描述】：

我试图显示禁用当前日期的过去日期，这意味着用户不应从日期选择器中选择过去的日期。

下面是我用来在 Datepicker 中设置最小日期的代码

组件.html

<input type="text" formControlName="eventStart" [(ngModel)]="event_start" class="form-control pull-right" 
  id="event_start" required placeholder='{{ "EVENT.FORM.START_DATE"  | translate }}'>

  <input type="text" formControlName="eventEnd" [(ngModel)]="event_end"  class="form-control pull-right" 
id="event_end" placeholder='{{ "EVENT.FORM.END_DATE"  | translate }}'>

组件.ts

this.datePicker = jQuery('#event_start').datepicker({
      autoclose: true,
      orientation: 'left bottom',
    });
this.datePicker = jQuery('#event_end').datepicker({   
          autoclose: true,
          orientation: 'left bottom',        
    });

【问题讨论】：

标签： html angular

【解决方案1】：

你设置了两次this.datePicker：

jQuery('#event_start')
jQuery('#event_end')

我建议你像这样重构你的代码：

const datePickerConfig = {
    autoclose: true,
    orientation: 'left bottom',
};

this.startDatePicker = document.querySelector('#event_start').datepicker(datePickerConfig);
this.endDatePicker = document.querySelector('#event_end').datepicker(datePickerConfig);

为了有效地帮助您，请说明您使用的是哪个日期选择器库。

【讨论】：

【解决方案2】：

您可以使用 Angular 引导程序中的 ngb-datepicker。
按以下方式修改您的 component.ts，

now: Date = new Date();
minDate: any;
maxDate: any;

//If you want to disable past dates from current date, you can set mindate to current date.

this.minDate = { year: this.now.getFullYear(), month: this.now.getMonth() + 1, day: this.now.getDate() };

//If you want to show upcoming 50 years in dropdown, you can set maxdate like,

this.maxDate = { year: this.now.getFullYear() + 50, month: 1, day: 1 };

在您的 component.html 中，

<input id="event" name="event" [(ngModel)]="model" (click)="event.toggle()" #event="ngbDatepicker" [min]="minDate" [max]="maxDate" ngbDatepicker>

【讨论】：

【解决方案3】：

感谢@kishoreaoe，我找到了前进的道路。

我正在使用 Angular 6 和 ng-Bootstrap。

我需要将 Min Date 设置为今天，Max-Date 将从今天开始 1 年。

datecomponent.component.ts

import {NgbDateStruct} from '@ng-bootstrap/ng-bootstrap';

最小日期逻辑

now: Date=new Date();

  minDate :NgbDateStruct = { year: this.now.getFullYear(), month: this.now.getMonth() + 1, day: this.now.getDate() };

最大日期逻辑

  maxDate :NgbDateStruct={year: this.now.getFullYear()+1, month: this.now.getMonth()+1, day: this.now.getDate()}

datecomponent.component.html

<form class="form-inline">
    <div class="form-group">
          <div class="input-group">
            <input class="form-control restricttextboxsize removeBorderright" placeholder="{{Initialdate | date:'dd/MM/yyyy'}}" name="dpStartDate"
              [(ngModel)]="modelStartDate" ngbDatepicker #dStartDate="ngbDatepicker" [minDate]="minDate" [maxDate]="maxDate">
            <div class="input-group-append dateborder">
              <img src={{calendarImageinstance.standardimage}} class="pqestartdate grayscale" (click)="dStartDate.toggle()" />
            </div>
          </div>
        </div>
      </form>

【讨论】：