ngx-daterangepicker-material 右侧添加日历图标答案

【问题标题】：ngx-daterangepicker-material add calendar icon in the rightngx-daterangepicker-material 右侧添加日历图标
【发布时间】：2018-08-09 11:13:51
【问题描述】：

我正在使用 ngx-daterangepicker-material 作为日期范围选择器。它工作正常，但需要添加图标和文本框。单击该图标后，日历应打开。我正在努力寻找解决方案。

是否有任何默认属性可以向用户显示图标以打开日历？

【问题讨论】：

标签： angular ngx-bootstrap

【解决方案1】：

我遇到了同样的问题，这是对我有用的解决方案：
HTML：

<input
        #dateRangePicker
        id="calendar-input"
        class="date-range-picker"
        type="text"
        ngxDaterangepickerMd
        [(ngModel)]="dateRangeSelected"
        [showCustomRangeLabel]="true"
        [showWeekNumbers]="false"
        [ranges]="dateRangeRanges"
        [linkedCalendars]="true"
        [showClearButton]="true"
        [locale]="{format: 'MMM DD, YYYY'}"
        [showDropdowns]="true"
        [showRangeLabelOnInput]="false"
        [minDate]="dateRangeMinDate"
        [maxDate]="dateRangeMaxDate"
        (change)="onDateRangeChanged()"
        placeholder="Select please... "/>
<label for="calendar-input" class="date-range-picker-icon fa fa-calendar"></label>

css:

 .date-range-picker-icon {
  margin-left: -25px;
  z-index: 1;
}

【讨论】：

【解决方案2】：

您必须使用 (click)="open()" 的处理程序在元素上添加 class="ngx-daterangepicker-action"

并将其添加到组件中

import { DaterangepickerDirective } from 'ngx-daterangepicker-material';
@ViewChild(DaterangepickerDirective) picker: DaterangepickerDirective;
open() {
    this.picker.open();
  }

【讨论】：

【解决方案3】：

试试这个...

ts 文件

 ...
    @ViewChild(DaterangepickerDirective, { static: false }) pickerDirective: DaterangepickerDirective;
  ...
  ...
  openDatepicker() {
    this.pickerDirective.open();
  }

html文件！

<button class="btn btn-primary ngx-daterangepicker-action" (click)="openDatepicker()">
      Open
    </button>

【讨论】：