如何将日期弹出窗口设置为以下文本字段

时间:2017-09-11 17:19:37

标签: javascript jquery twitter-bootstrap angular

我正在以角度4创建日期字段,因为当我点击日期字段时,日期弹出窗口必须位于日期字段下方。

这是我的代码

 <div class="col-3">
  <div class="form-group calenderForm calenderForm1">
   <label for="templateName">REPAIR DATE (FROM)</label>
     <owl-date-time name="repairDateFrom"
       [(ngModel)]="repairDateFrom" 
       [max]="max"
       [type]="'calendar'"
       [dateFormat]="'YYYY-MM-DD'"
       [placeHolder]="'YYYY-MM-DD'"
       ></owl-date-time>
       <div class="error-message-block"></div>
     <input type="hidden" name="repairDateFrom" id = "repairDateFrom" 
     value="{{repairDateFrom | date: 'yyyy-MM-dd'}}" 
    (click)="closeDatePopUp()"/>
   </div>
  </div>

我是否必须使用ngModel函数或者我必须在picker插件组件中编写以实现结果。 请帮助我,我怎样才能实现它。

1 个答案:

答案 0 :(得分:1)

最简单的想法是安装 ng2-popover 。 Popover用于使用引导程序的角度应用程序,但如果您不想在没有引导程序的情况下使用它 - 只需创建自己的css类。 Popover不依赖于jquery。

如果您使用为Angular驱动的bootstrap 4,您可以开箱即用。 Quick and easy popovers

<input type="input"  placement="bottom"
        ngbPopover="Popover text." popoverTitle="Popover on bottom">

enter image description here