首页 文章

如何在编辑按钮单击时分别打开datePicker并在每一行上设置日期

提问于
浏览 次
0

我有一个表，每一行我在每行都有dateTimePicker . 我在每一行都有一个编辑按钮 . 我想像“在编辑按钮上单击dateTimePicker应为该特定行打开” . 我使用的是angular2或更多 . 下面是我的HTML代码 .

<table class="table">
      <thead>
        <tr>

          <th (click)="sort('name')">Name
            <span class="glyphicon sort-icon" *ngIf="key =='name'" [ngClass]="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
          </th>

          <th (click)="sort('genre')">Start Date &amp; Time
            <span class="glyphicon sort-icon" *ngIf="key =='genre'" [ngClass]="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
          </th>

        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of data | let i = index">
          <td>{{data.name}}</td>

          <td><input placeholder="Date Time:"
            [(ngModel)]="dateTime"
            [owlDateTimeTrigger]="dt" [owlDateTime]="dt">
     <owl-date-time #dt></owl-date-time>
          </td>

          <td class="editButton" (click)='editAction()'>
              <mat-icon style="vertical-align: middle">edit</mat-icon> Edit 
          </td>


        </tr>
      </tbody>

    </table>

我正在使用https://www.npmjs.com/package/ng-pick-datetime这个datetimepicker .

这是我的ts文件代码 .

data = [
        { 
          "name": "name1"
        },
        { 

          "name": "name2"
        },
        {

          "name": "name3"
        }


  editAction(){
          //on edit button click
          }
angular typescript datetimepicker bootstrap-table

1 回答

  • 0

    看起来你可能正在使用旧版本的Angular，因为我不相信你的*ngFor="let data of data | let i = index" syntax is valid for Angular v7（当前版本） . 如果您使用的是旧版本的Angular，那么您可能也在使用旧版本的 ng-pick-datetime ，在这种情况下谁知道当前文档的有效性 . 但 ng-pick-datetime 的当前文档（旨在与Angular v7一起使用）outlines how to do your exact request .

    看起来你应该将 [owlDateTimeTrigger]="dt" 指令移动到你想要触发日期时间选择器的元素 . 在您的情况下，编辑按钮 .

    <td>
  <input placeholder="Date Time:" [(ngModel)]="dateTime" [owlDateTime]="dt">
  <owl-date-time #dt></owl-date-time>
</td>

<td class="editButton" [owlDateTimeTrigger]="dt">
  <mat-icon style="vertical-align: middle">edit</mat-icon> Edit 
</td>
    回复于

相关问题