Question

我在循环中有两个日期选择器（开始日期和结束日期）。我想在尝试打开enddate时关闭startdate datepickers，反之亦然。我尝试过对输入（#start，＃close）

的不同引用

  <div class="input-group" *ngIf="item.id =='startDate'">
  <input class="form-control" placeholder="{{item.placeholder}}"
         name="dp" [(ngModel)]="item.dateModel" ngbDatepicker #start="ngbDatepicker">
  <button class="input-group-addon" (click)="start.toggle();end.close()" type="button">
    <img src="img/calendar-icon.svg" style="width: 1.2rem; height: 1rem; cursor: pointer;"/>
  </button>
</div>
  <div class="input-group" *ngIf="item.id =='endDate'">
  <input class="form-control" placeholder="{{item.placeholder}}"
         name="dp" [(ngModel)]="item.dateModel" ngbDatepicker #end="ngbDatepicker">
  <button class="input-group-addon" (click)="end.toggle();start.close()" type="button">

    <img src="img/calendar-icon.svg" style="width: 1.2rem; height: 1rem; cursor: pointer;"/>
  </button>
</div>

如果我从输入组中移除* ngIf并将其提供给其父级，则它可以正常工作，但它们都具有相同的日期。注意：目前我无法更改输入数据模型。以下是嘲笑我的用例http://plnkr.co/edit/ukbt33q7e1uyNNbPh2cN?p=preview

的plunker

Answer 1

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.repository.CrudRepository;
@Repository
 public class JdbcUserDao implements IUserDao {

  @Autowired
  DataSource dataSource;

而不是在点击时使用切换方法，调用startDateToggle / endDateToggle并使用其referance关闭另一个datepicker

<div  class="tmo-floating-label filterItem"  *ngIf="item.id=='startDate'">
        <div class="input-group" >
          <input   type="text" class="form-control" name="startDate" readonly [(ngModel)]="filterItem.dateModel"  ngbDatepicker #startDate="ngbDatepicker" (ngModelChange)="onChange(filterItem)" placeholder="{{filterItem.placeholder}}">
          <button class=" input-group-addon btn btn-primary" (click)="startDateToggle();"><i class="fa fa-calendar" aria-hidden="true"></i></button>
        </div>
      </div>
      <div  class="tmo-floating-label filterItem" *ngIf="item.id=='endDate'">
        <div class="input-group">
          <input   type="text" class="form-control" name="endDate" readonly [(ngModel)]="filterItem.dateModel"  ngbDatepicker #endDate="ngbDatepicker" (ngModelChange)="onChange(filterItem)" placeholder="{{filterItem.placeholder}}">
          <button class=" input-group-addon btn btn-primary" (click)="endDateToggle();"><i class="fa fa-calendar" aria-hidden="true"></i></button>
        </div>
      </div>

当他们在循环ng-bootstrap中时关闭datepicker

1 个答案: