Topic: Angular DateTime Picker

MDWebservices free asked 2 years ago


Hi,

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?

https://mdbootstrap.com/docs/jquery/forms/time-picker/#date-time-picker

Many Thanks


Konrad Stępień staff answered 2 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?

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.


Konrad Stępień staff answered 2 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

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.


MDWebservices free commented 2 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.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

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