1
Answer

DatePicker not appearing

Ramco Ramco

Ramco Ramco
Jun 27
348
1

Hi

 DatePicker not allowing to pick date. It is not appearing. It is also giving error - MatDatepicker can only be associated with a single input.

<form [formGroup]="form" ngSubmit="Save()"> 
    <div mat-dialog-content class="content">
        <div class="row">
            <mat-form-field>
                <mat-label>Choose a date</mat-label>
                <input matInput [matDatepicker]="picker" formControlName="dob">
                <mat-hint>MM/DD/YYYY</mat-hint>
                <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
                <mat-datepicker #picker></mat-datepicker>
            </mat-form-field>
            <mat-form-field>
                <mat-label>Choose a date</mat-label>
                <input matInput [matDatepicker]="picker1" appDateComparison="dob" formControlName="doj">
                <mat-hint>MM/DD/YYYY</mat-hint>
                <mat-datepicker-toggle matIconSuffix [for]="picker1"></mat-datepicker-toggle>
                <mat-datepicker #picker1></mat-datepicker>
                <!-- <div *ngIf="form.get('doj').hasError('dateComparison')">
                    <small>Date of joining must be after date of birth.</small>
                </div> -->
            </mat-form-field>
        </div>
    </div>
    <div mat-dialog-actions class="action">
        <button mat-raised-button color="warning">Cancel</button>
        <button mat-raised-button color="primary" (click)="OnSave()">Save</button>
    </div>
</form> 
constructor(private _fb : FormBuilder){
    this.form = this._fb.group({
      dob: ['', Validators.required],
      doj: ['', Validators.required]
    })
  }

Thanks

Answers (1)
Next Recommended Forum