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>

类型脚本

.....

@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

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

1 个答案: