angular - 如何在 Angular4/TypeScript 中以编程方式打开 ng-datetime-picker 的选择对话框？

Question

我想以编程方式打开 ng 日期时间 (owl-date-time) 选择器对话框？

date-time-picker - “将选取器作为对话框打开”部分。

html

<mat-select  [(ngModel)]="createAnnounceReq.sendStatus" formControlName="sendStatus" (change)="onChange_Status($event.value)">
    <mat-option *ngFor="let item of sendStatusList; let i = index;" [value]="item.value">
        {{ item.label }}

        //dropdown is like
        - Today (Now)
        - 1week a head
        - 3 months a head
        - pick specific date

    </mat-option>
</mat-select>

<input [owlDateTimeTrigger]="dt5" [owlDateTime]="dt5" readonly>
<owl-date-time [pickerMode]="'dialog'" #dt5></owl-date-time>    

typescript

.....

@Component({
  selector: 'app-announce-send',
  templateUrl: './announce-send.component.html',
  styleUrls: ['./announce-send.component.css'], 
  providers : [AnnourceService]
})
export class AnnounceSendComponent implements OnInit {  
    .....

    onChange_Status(value) {
        if(value == something) {
            // here how to open picker dialog programmatically
        }
    }

    .....   
}

Answer 1

要以编程方式模拟 click 事件，您可以向 input 元素添加标识符，然后在组件内访问它，如下所示:

HTML

<input #target [owlDateTimeTrigger]="dt5" [owlDateTime]="dt5" readonly>

组件

@ViewChild('target') target: ElementRef;

ngAfterViewInit() {
  /* Simulate click event every 5 seconds */
  setInterval(() => this.target.nativeElement.click(), 5000);
}

这是一个以编程方式聚焦input的实例(如果需要，您可以将focus()替换为click()事件): https://stackblitz.com/edit/angular-1xz9zv?file=src%2Fapp%2Fapp.component.ts