Hi Bartosz, Thank you for your reply. Another issue is, once you set the date using keyboard and try to tab to next control on the form, it does not allow.
Best regards

Dear @Neetam Limbu

Below is an example of how to use timePicker with validators:

TS:

import { ClockPickerComponent } from 'yourpath';

  @ViewChild('timePicker', { static: true }) timePicker: ClockPickerComponent;
   darkClock: any;
   onClear() {
     this.timePicker.clearTimeInput();
     this.darkClock = null;
   }

HTML:

 <div class="row">
    <div class="col-md-12 mx-auto my-5">
      <div class="container">
        <div class="row">
          <div class="col-md-6 mx-auto my-5">
            <mdb-time-picker
              #timePicker
              [buttonLabel]="'Done'"
              [twelvehour]="false"
              [darktheme]="true"
              [placeholder]="'Selected time'"
              [label]="'Dark version, 24hours'"
              [(ngModel)]="darkClock"
              #model="ngModel"
              required
            ></mdb-time-picker>
          </div>
          <div class="col-md-6 mx-auto my-5">
            <div *ngIf="model">
              <mdb-error *ngIf="model.errors?.required"
                >Input invalid</mdb-error
              >
              <mdb-success *ngIf="!model.errors">Input valid</mdb-success>
            </div>
          </div>
        </div>
      </div>
    </div>
    <button mdbBtn (click)="onClear()">clear</button>
  </div>

You're right about that - the time picker does not pop up when it gets focus (on tab),

We will try to fix it as soon as possible.

Best, Bartosz.

Dear @Neetam Limbu

Below is an example of how to use Date Picker with required validation:

<div class="container">
  <div class="row">
    <div class="col-md-6 mx-auto my-5">
      <form [formGroup]="datePickerForm">
        <mdb-date-picker
          name="mydate"
          [options]="myDatePickerOptions"
          [placeholder]="'Selected date'"
          formControlName="datePickerControl"
          required
        ></mdb-date-picker>
      </form>
    </div>
    <div class="col-md-6 mx-auto my-5">
      <mdb-error *ngIf="input.invalid && (input.dirty || input.touched)">Input invalid</mdb-error>
      <mdb-success *ngIf="input.valid && (input.dirty || input.touched)">Input valid</mdb-success>
    </div>
  </div>
</div>

TS:

 public myDatePickerOptions: IMyOptions = {
    // Your options
  };

  datePickerForm: FormGroup;

  ngOnInit() {
    const selectedDate = { date: { year: 2019, month: 5, day: 8 } };
    this.datePickerForm = new FormGroup({
      datePickerControl: new FormControl(selectedDate, Validators.required),
    });
  }
  get input() {
    return this.datePickerForm.get('datePickerControl');
  }

In my example - date picker pops up on tab key, could you give the case when it does not pops up?

Best, Bartosz.