Question

我一直在阅读有关翻译的内容，并且我试图确定这是否是我需要的，以便制作一个可以放在任何地方的弹出式选择器服务。

因为ngx-bootstrap还不支持模态日期选择器，所以我自己做了。我在整个应用程序中有多个日期选择器，甚至在同一页面上有几个，所以我希望它尽可能模块化。

我从标准日期输入开始：

<input 
    type="date" 
    class="form-control" 
    (click)="pickDate($event, '#requestDate')" />

目前，我的日期选择器位于页面中（绝对位置，因此它的行为类似于弹出窗口）：

<datepicker 
    id="requestDate" 
    name="requestDate" 
    [(ngModel)]="incident.absence.requestDate" 
    required></datepicker>

...但我希望我的服务可以根据需要生成。

到目前为止的方法：

pickDate(e, popupId) {
    e.preventDefault();
    var popupCtrl = this.elementRef.nativeElement.querySelector(popupId);
    popupCtrl.style.display= 'block';
}

输入和日期选择器之间会进行大量的通信，来回传递init和修改日期。据推测，simple transclusion还不够。

如何在我的页面上生成控件的服务工作？

（或者我在这里重新发明轮子？）

Answer 1

虽然你可以为datepicker编写自己的包装器，听起来比你需要的工作更多。听起来你已经在使用ngx-bootstrap了，所以如果你真的想要一个自定义日期选择器，我只需将日期选择器放在它们提供的下拉列表或工具提示控件中。

实际上，我会使用primeng中的datepicker：https://www.primefaces.org/primeng/#/calendar

使用多个ui框架（primeng和ngx-bootstrap）并不重要，因为大多数膨胀应该在你的prod构建中被淘汰。

角度2 - 制作模块化的日期选择器组件

1 个答案: