代码之家 › 专栏 › 技术社区 › Zaw Than oo

如何在angular4/typescript中以编程方式打开ng datetime选取器的选取对话框?

typescript angular

1

Zaw Than oo · 技术社区 · 7 年前

我想以编程方式打开ng日期时间(owl日期时间)选取器对话框?

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

    .....   
}

1 回复 | 直到 7 年前

1

P.S. 7 年前

模拟 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);
}

下面是一个将 输入 以编程方式(您只需替换 focus() 具有 click() 事件(如果需要): https://stackblitz.com/edit/angular-1xz9zv?file=src%2Fapp%2Fapp.component.ts