html 在Angular 4中,如何在日期选择器中动态设置最小日期和最大日期?

thtygnil  于 2023-03-11  发布在  Angular
关注(0)|答案(3)|浏览(154)

我试图显示禁用过去的日期从当前日期,这意味着用户不应该选择过去的日期从日期选择器。
下面是我用来在日期选择器中设置最小日期的代码
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',        
    });
ctehm74n

ctehm74n1#

this.datePicker设置两次:

  1. jQuery('#event_start')
  2. 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);

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

4jb9z9bj

4jb9z9bj2#

您可以从Angular Bootstrap 中使用ngb-datepicker。
按以下方式修改组件.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>
tyu7yeag

tyu7yeag3#

多亏了@ kishoreae,我找到了前进的道路。
我正在使用Angular 6和ng-Bootstrap。
我要求将最小日期设置为今天,最大日期将为从今天起1年。

日期组件.组件.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()}

日期组件.组件.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>

相关问题