Angular 7 - Show 'angular-bootstrap-datetimepicker' in input dropdown

Question

I want to use the Angular component within a dropdown connected to an input. It does have an input-directive, but I have not been able to figure out the code as it does not have an example for that.

There is good documentation for AngularJS (https://github.com/dalelotts/angularjs-bootstrap-datetimepicker#drop-down-component-with-associated-input-box) component, but not Angular (https://github.com/dalelotts/angular-bootstrap-datetimepicker)

I tried the following, but the picker does not even show:

<input  id="date" formControlName="date" name="date" class="form-control" dlDateTimeInput />

Ideally, would like to end up with this format:

<div class="input-group mb-3">
  <input id="date" formControlName="date" name="date" ...>
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
</div>

where clicking the button opens the picker, and shows the picked date in the input (like the AngularJS example)

Answer 1

You gotta add [dlDateTimeInputFilter]="dateInputFilter" to it

This is from the documentation:

<input id="date-input" type="text" class="form-control" aria-label="Date" required dlDateTimeInput [dlDateTimeInputFilter]="dateInputFilter" [(ngModel)]="enteredDate">

and make sure dlDateTimeInputFilter is imported in app.module

import { DlDateTimeDateModule, DlDateTimePickerModule, DlDateTimeInputModule } from 'angular-bootstrap-datetimepicker';

I'm still trying to figure this out too, since I got mine to show, but it's not letting me select a date.

Answer 2

The issue is with bootstrap 4, not the date picker. Be sure to include the bootstrap 4 javascript dependencies in your page.

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

Then try this code from https://stackblitz.com/github/dalelotts/angular-bootstrap-datetimepicker-demo - it works in the demo.

<div class="input-group">
    <input id="date-input" type="text" class="form-control" aria-label="Date" required
           dlDateTimeInput
           [dlDateTimeInputFilter]="dateInputFilter"
           [(ngModel)]="enteredDate">
    <div class="input-group-append">
      <button class="btn btn-outline-secondary dropdown-toggle date-dropdown" type="button" data-toggle="dropdown"
              aria-haspopup="true" aria-expanded="false"><i class="oi oi-calendar"></i></button>
      <div class="dropdown-menu" (click)="keepDropDownOpen($event)">
        <div style="width:360px;">
          <dl-date-time-picker [(ngModel)]="enteredDate" (change)="dateSelected($event)"
                               [selectFilter]="datePickerFilter"></dl-date-time-picker>
        </div>
      </div>
    </div>
    <div class="invalid-feedback">
      Please enter or choose a date and time after the current time.
    </div>
  </div>
</div>

Then the controller:

import {AfterViewInit, Component, ElementRef} from '@angular/core';
import {DateButton} from 'angular-bootstrap-datetimepicker';
import * as _moment from 'moment';
import {unitOfTime} from 'moment';

let moment = _moment;

if ('default' in _moment) {
  moment = _moment['default'];
}

declare var $: any;

@Component({
  selector: 'app-date-picker-input',
  templateUrl: './date-picker-input.component.html',
})
export class DatePickerInputComponent implements AfterViewInit {
  disablePastDates = true;
  enteredDate: Date;
  private _isPickerOpen = false;

  constructor(private _elementRef: ElementRef) {
  }

  ngAfterViewInit(): void {
    const dropdownToggle = $('[data-toggle="dropdown"]', this._elementRef.nativeElement);
    dropdownToggle.parent().on('show.bs.dropdown', () => {
      this._isPickerOpen = true;
    });
    dropdownToggle.parent().on('hide.bs.dropdown', () => {
      this._isPickerOpen = false;
    });
  }


  /**
   * This filter `disables` dates that are invalid for selection.
   *
   * It returns `false` if the date is invalid for selection; Otherwise, `true`.
   *
   * Filters use ES6 syntax so the `this` context is fixed to this component.
   *
   * @param value
   *  the numeric value of the user entered date.
   */

  dateInputFilter = (value: (number | null)) => {
    return this.disablePastDates
      ? value >= moment().valueOf()
      : true;
  }

  /**
   * This filter `disables` dates that are invalid for selection.
   *
   * It returns `false` if the date is invalid for selection; Otherwise, `true`.
   *
   * Filters use ES6 syntax so the `this` context is fixed to this component.
   *
   * @param dateButton
   *  the target datebutton.
   *
   * @param viewName
   *  the current view.
   */

  datePickerFilter = (dateButton: DateButton, viewName: string) => {
    return this.disablePastDates
      ? dateButton.value >= moment().startOf(viewName as unitOfTime.StartOf).valueOf()
      : true;
  }

  /**
   * Used to keep the Bootstrap drop-down open while clicking on the date/time picker.
   *
   * Without this, the dropdown will close whenever the user clicks,
   * @param event
   *  the DOM click event.
   */

  keepDropDownOpen(event: Event) {
    event.stopPropagation();
  }

  /**
   * Close the Date drop-down when date is selected.
   *
   * Do not `toggle` the drop-down unless a value is selected.
   *
   * ngModel handles actually setting the start date value.
   *
   * @param event
   *  the `DlDateTimePickerChange` event.
   */

  dateSelected(event) {
    console.log('_isDropdownVisible', this._isPickerOpen);
    if (this._isPickerOpen && event.value) {
      $('.date-dropdown').dropdown('toggle');
    }
  }
}

Full code here https://stackblitz.com/github/dalelotts/angular-bootstrap-datetimepicker-demo?file=src%2Fapp%2Fexamples%2Fdate-picker-input%2Fdate-picker-input.component.html