Как открыть сову даты с помощью пиктограммы

Question

Прямо сейчас я использую сову DatePicker - как показано на рисунке (https://daniel-projects.firebaseapp.com/owlng/date-time-picker). Но он открывается по щелчку поля ввода. Я хочу, чтобы он открывался при щелчке по значку даты в моем поле ввода.

вот код 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>

Answer 1

удалить [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>

Answer 2

Вы можете использовать свойство owlDateTimeTrigger . Выбор времени и даты, с которым связан этот триггер.

Попробуйте с этим:

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