각진 재료 날짜에 대한 기본값 설정 각진 5가 있는 피커

각진 재료 날짜에 대한 기본값 설정 각진 5가 있는 피커

저는 각진 소재의 달력 보기를 사용하고 있습니다.기본값을 설정하고 싶은데 값이 표시되지 않습니다.

<mat-form-field class="mr-sm-24" fxFlex (click)="open()" >
   <input matInput [picker]="picker" placeholder="Date"
                  autocomplete="off"
                  name="date" 
                  formControlName="date">
   <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker  [startAt]="startDatePicker" #picker></mat-datepicker>
</mat-form-field>

이것은 내가 기본값으로 설정하고 싶은 값을 가진 내 .js 코드입니다.

var date = this.datepipe.transform((new Date().getTime()) - 3888000000, 'dd/MM/yyyy'); 

this.form = this.formBuilder.group({
        dataInicial: [data_inicial],
                   ...

이건 나한테 효과가 있어요!

HTML-

<mat-form-field>
    <input matInput [matDatepicker]="picker1" placeholder="From Date" [formControl]="date1">
    <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
    <mat-datepicker  #picker1></mat-datepicker>
</mat-form-field>

TS-

date1 = new FormControl(new Date())

다음과 같이 날짜 개체를 startAt 변경에 제공해야 합니다.

.ts에서:

date = new Date((new Date().getTime() - 3888000000));

HTML에서:

<mat-datepicker  [startAt]="date" #picker></mat-datepicker>

작업 데모: https://stackblitz.com/edit/angular-n9yojx

양식Control 정의 및 입력에 사용할 수 있습니다.

html 입니다.

<mat-form-field class="mr-sm-24" fxFlex (click)="open()" >
    <input [matDatepicker]="picker" matInput placeholder="Date" autocomplete="off" name="date" formControlName="date" [(ngModel)]="date.value">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
          <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

여기 TS에서 Control을 선언합니다.

date: FormControl;
this.date = new FormControl(new Date(<you can provide you date input field if you getting date from other sources>))

양식 컨트롤러 그룹에서 다음과 같이 기본 날짜를 사용할 수 있습니다.

 birthdayCtrl: ['1999-01-31']

아래는 Angular 10, Angular Material 10 및 Reactive 형태의 작업 코드입니다.

구성 요소.ts

      this.youForm= this._formBuilder.group({


        StartDate: [new Date(), Validators.required],

      });

component.html에 변경 사항 없음

  <mat-form-field appearance="outline">
            <input matInput [matDatepicker]="StartDate" placeholder="Start date *" 
              formControlName="StartDate">
            <mat-label>Start Date *</mat-label>
            <mat-datepicker-toggle matSuffix [for]="StartDate"></mat-datepicker-toggle>
            <mat-datepicker #StartDate></mat-datepicker>
          </mat-form-field>

템플릿 기반 접근 방식을 사용하는 솔루션은 다음과 같습니다.

 selectedDate = new Date();

<input class="form-control"
                     matInput
                     [matDatepicker]="dp3"
                     [min]="today"
                     [max]="max"
                     disabled
                     [(ngModel)]="selectedDate"
                     (ngModelChange)="dateUpdated()"
                     name="currentDate"
                   />
                   <mat-datepicker-toggle
                     matSuffix
                     [for]="dp3"
                   ></mat-datepicker-toggle>
                   <mat-datepicker #dp3 disabled="false"></mat-datepicker> ```

당신의 .vms----

     <mat-form-field style="width:150px;"  color="accent">
            <mat-label>Choose From Date</mat-label>
            <input  class="example-events" matInput [matDatepicker]="picker1"  [ngModel]="dateF" >
            <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
            <mat-datepicker #picker1 ></mat-datepicker>
     </mat-form-field>

당신의 .ts에----

dateF:any=new Date();

여기 제 대답이 있습니다.

당신의 .html에.

<mat-form-field class="mr-sm-24" fxFlex (click)="open()" >
    <input [matDatepicker]="picker" matInput placeholder="Date" autocomplete="off" name="date" formControlName="date">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
          <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

당신의 .ts에

this.form = this.formBuilder.group({
   date: new FormControl(new Date()), // Current Date
               ...
});

현재 날짜가 기본 날짜로 설정됩니다.

언급URL : https://stackoverflow.com/questions/52799604/set-default-value-for-angular-material-datepicker-with-angular-5