Topic: Angular DateTime Picker

MDWebservices priority asked 4 years ago


I can see you have a date time picker for jQuery which is exactly what we are looking for withing the angular version, but i cant see this anywhere in your documentation other than with jQuery. Do you have an angular version of this component? Or have a work around to get the date and time input to work within one input or input group?

Many Thanks

Konrad Stępień staff answered 4 years ago

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?


<div class="md-form mdb-date-time">
    class="form-control date-time picker-opener"
    placeholder="Date and Time"


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


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

  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.

Konrad Stępień staff answered 4 years ago

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

This same in time picker (API Tab)

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.

MDWebservices priority commented 4 years ago

Hi @MDWebservices
Thanks for the response, what you suggested worked a treat, the only think i have been unable to get working is we want to disable the backdrop from closing both the date and time pickers. We tried the ususal modal config settings ([config]="{backdrop: 'static', keyboard: false}") which works for modals but not for theses. Do you have any ideas about how we can disable this from happening? Many Thanks Louis

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: 8.8.1
  • Device: PC
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes