Html 如何通过图标触发器打开owl ng日期选择器

现在我正在使用owl ng datepicker-如图（）所示。但它在输入字段单击时打开。我希望它被打开日期选择器图标点击我的输入框

下面是同样的html代码

 <input id="fromDate" 
            name="fromDate" 
            type="text"
            placeholder="From Date" 
            class="form-control"
            tooltip="From Date"
            delay="500" 
            triggers=""
            #fromDateToolTip="bs-tooltip"
            (mouseenter)="fromDateToolTip.show()"
            (mouseleave)="fromDateToolTip.hide()"
            [(ngModel)]="fromDatePicker"
            [owlDateTime]="dt1" 
            [owlDateTimeTrigger]="dt1"
            readonly="readonly"
            (ngModelChange)="dateFilter()"
            (keydown.backspace)="clear()">
        <owl-date-time
            [pickerType]="'calendar'"
            [startAt]="startAtFromDate" 
            [showSecondsTimer]="true"
            (afterPickerClosed)="setFromDateSelected($event,dt1)" 
            (afterPickerOpen)="fromDatePickerOpen()"
             #dt1>
        </owl-date-time>

您可以使用该属性。 与此触发器关联的日期时间选择器

试试这个：

<input id="fromDate" placeholder="From Date" ... [owlDateTime]="dt1 [owlDateTimeTrigger]="dt1">

<span [owlDateTimeTrigger]="dt1"><i class="fa fa-calendar"></i></span>

<owl-date-time [pickerType]="'calendar'" [startAt]="startAtFromDate [showSecondsTimer]="true" (afterPickerClosed)="setFromDateSelected($event,dt1)" (afterPickerOpen)="fromDatePickerOpen()" #dt1></owl-date-time>

---

从输入字段中删除

[owlDateTimeTrigger]=“dt2”

，并将其放置在图标字段的某个位置

<div class="example-wrapper">
    <h2>Trigger Picker by a Icon</h2>
    <label class="example-input-wrapper">
        Date Time
        <input placeholder="Date Time:" [(ngModel)]="dateTime" [owlDateTime]="dt2">
        <span class="example-trigger" [owlDateTimeTrigger]="dt2">
            <i class="fas fa-calendar-alt"></i>
        </span>
        <owl-date-time #dt2></owl-date-time>
    </label>

    <h4>Value From Picker: {{dateTime}}</h4>
</div>

通过图标触发选择器
日期时间
来自选择器的值：{{dateTime}

您能提供有关代码的信息吗？就像html和ts？@LeandroMatilla一样，我也添加了相同的代码。