Angular DateTime Picker

Hi @MDWebservices,

We do not have an example for this time with Date-Time picker. But you can get a similar example with open programmatically next picker when you close the first modal.

There you can find how to open programmatically picker

https://mdbootstrap.com/docs/angular/forms/date-picker/#open-hide

This same in time picker (API Tab)

https://mdbootstrap.com/docs/angular/forms/time-picker/#a-methods

The Datepicker has inputFocusBlur Output and then you can open timepicker component.

I propose to make something like this:

1. Add normal input to your HTML
2. Add hidden Datepicker component
3. Add hidden Timepicker component
4. Add event onClick to normal input and then open Datepicker
5. When you set the date then save value to a variable (or input value)
6. And then run inputFocusBlur or just run Timepicker remotely
7. When you set the time then add value to a variable (or to input value)
8. And then you have the same component

Please try something like my instruction and then tell me if everything works correctly.

Best, Konrad.

Hi @MDWebservices,

I just prepared this component to add it to the documentation. Can you test my code and tell me if you still have problem with the backdrop?

app.component.html

<div class="md-form mdb-date-time">
  <input
    (focus)="this.datePicker.openBtnClicked()"
    #input
    class="form-control date-time picker-opener"
    data-open="picker2"
    placeholder="Date and Time"
    type="text"
  />
  <mdb-date-picker
    (dateChanged)="onDateChange($event)"
    [options]="myDatePickerOptions"
    #datePicker
  ></mdb-date-picker>
  <mdb-time-picker
    (timeChanged)="onTimeChange($event)"
    [buttonLabel]="'Done'"
    [twelvehour]="false"
    #timePicker
  ></mdb-time-picker>
</div>

app.component.scss

.mdb-date-time {
  mdb-date-picker::ng-deep .mydp,
  mdb-time-picker::ng-deep .tp {
    &,
    input,
    .md-form {
      height: 0;
      width: 0;
    }
  }
}

app.component.ts

import { Component, ViewChild, ElementRef } from '@angular/core';
import { IMyOptions, MDBDatePickerComponent, ClockPickerComponent } from 'ng-uikit-pro-standard';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  @ViewChild('input', { static: true }) input: ElementRef;
  @ViewChild('datePicker', { static: true }) datePicker: MDBDatePickerComponent;
  @ViewChild('timePicker', { static: true }) timePicker: ClockPickerComponent;

  public myDatePickerOptions: IMyOptions = {
    // Your options
  };
  onDateChange = (event: { actualDateFormatted: string; }) => {
    this.input.nativeElement.value = event.actualDateFormatted; // set value to input
    this.datePicker.closeBtnClicked(); // close date picker
    this.timePicker.openBtnClicked(); // open time picker
  };

  onTimeChange = (event: string) => {
    this.input.nativeElement.value = `${this.input.nativeElement.value}, ${event}`; // set value to input
  };
}

Best, Konrad.