Question

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

以下是我用于在Datepicker中设置分钟日期的代码

Component.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 }}'>

Component.ts

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

Answer 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);

为了有效地帮助您，请告诉您正在使用哪个日期选择器库。

Answer 2

您可以使用角度引导程序中的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>

Answer 3

感谢@kishoreaoe，我有了前进的路。

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

我要求将“最小日期”设置为今天，“最大日期”是从今天起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>

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

3 个答案: