Question

我想在连接到输入的下拉菜单中使用Angular组件。它确实有一个输入指令，但是由于其中没有示例，我无法弄清楚代码。

关于AngularJS（https://github.com/dalelotts/angularjs-bootstrap-datetimepicker#drop-down-component-with-associated-input-box）组件的文档不错，但没有Angular（https://github.com/dalelotts/angular-bootstrap-datetimepicker）的文档

我尝试了以下操作，但选择器甚至没有显示：

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

理想情况下，希望使用以下格式：

<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>

单击按钮将打开选择器，并在输入中显示选择的日期（例如AngularJS示例）

Answer 1

您必须在其中添加[dlDateTimeInputFilter]="dateInputFilter"

这来自文档：

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

并确保将dlDateTimeInputFilter导入了app.module

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

我也想找出答案，因为我有幸可以参加，但这并不是让我选择一个日期。

Answer 2

问题在于引导程序4，而不是日期选择器。确保在页面中包含bootstrap 4 javascript依赖项。

<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/popper.js@1.16.0/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>

然后尝试使用https://stackblitz.com/github/dalelotts/angular-bootstrap-datetimepicker-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>

然后是控制器：

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');
    }
  }
}

此处的完整代码https://stackblitz.com/github/dalelotts/angular-bootstrap-datetimepicker-demo?file=src%2Fapp%2Fexamples%2Fdate-picker-input%2Fdate-picker-input.component.html

Angular 7-在输入下拉列表中显示“ angular-bootstrap-datetimepicker”

2 个答案: