Topic: Angular Date and Time picker Reactive forms required validation

Neetam Limbu free asked 5 years ago


Hi all, I have been trying to fix Date and Time picker required validation. I cannot get hold of touched and required validation event callback. Also, I would like the control to pop up when it gets focus in case of user hitting tab key, but for some reason, I can't seem to accomplish these simple interactivity and accessibility features. If the control needs customization for this, is there any documentation link? I have been working around this issue for a long time, any help is appreciated. With regards, Neetam Limbu


Neetam Limbu free answered 5 years ago


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


Bartosz Termena staff commented 5 years ago

Dear @Neetam Limbu

Yes, you are right, all bugs in the date picker and the time picker will be resolved as soon as possible.

Best, Bartosz.


Bartosz Termena staff answered 5 years ago


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.


Bartosz Termena staff answered 5 years ago


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.


Neetam Limbu free commented 5 years ago

Hi Bartosz, It doesn't work the same way with timepicker control. Please advice Best regards, Neetam Limbu



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.1.1
  • Device: Laptop, mobile
  • Browser: Chrome, Edge, Firefox
  • OS: Windows, Linux, MacOS
  • Provided sample code: No
  • Provided link: No