6

こんにちは、ng-bootstrap datepicker を調査しています。デモ コードを確認したところ、アプリケーションで動作させることができました。

ただし、複数の datepicker 入力タグを追加した場合、機能するのは 1 つだけです。以下は私が作成したコードです。#d を #d1 と #d2 に変更しようとすると (toggle() 部分も変更します)、ページからエラーが吐き出されます。

<div class="input-group">
    <input class="form-control" placeholder="yyyy-mm-dd" name="dp" [(ngModel)]="newItem.EndTime"  ngbDatepicker #d="ngbDatepicker" required>
    <div class="input-group-addon" (click)="d.toggle()" >
        <i class="fa fa-calendar" aria-hidden="true"></i>
    </div>
</div>

<div class="input-group">
    <input class="form-control" placeholder="yyyy-mm-dd" name="dp" [(ngModel)]="newItem.StartTime"  ngbDatepicker #d="ngbDatepicker" required>
    <div class="input-group-addon" (click)="d.toggle()" >
        <i class="fa fa-calendar" aria-hidden="true"></i>
    </div>
</div>

また、コンポーネントでラップしようとしたところ、さまざまなプロパティに対して複数の日付ピッカー インスタンスを使用できるようになりました。ただし、値を親コンポーネントに戻していないようです。

new.campaign.html

<div class="row col-md-12 col-lg-12">
    <div class="col-md-4 col-lg-4">
        <label for="campaignStartTime">Start Time</label>
        <datepicker-popup [(model)]="newItem.StartTime" (modelChange)="updateDate($event)" [required]="true" id="campaignStartTime"></datepicker-popup>
    </div>
</div>

datepicker-popup.component.ts

import {Component, Input, Output, EventEmitter} from '@angular/core';
    @Component({
selector: 'datepicker-popup',
templateUrl: 'app/campaign/datepicker-popup.html'
    })
    export class DatepickerPopupComponent {
    @Input()
    model:any;
    @Input()
    id:string;
    @Input()
    required:boolean=false;
    @Output()
    modelChange: EventEmitter<any> = new EventEmitter();

    constructor(){    }
    updateModel(){
    let date = this.model;
    date = '12/22/2016'
    this.modelChange.emit(date);
    }
    }

datepicker-popup.html

<div class="input-group">
    <input class="form-control" placeholder="yyyy-mm-dd" name="dp [(ngModel)]="model"  (change)="updateModel()" ngbDatepicker #d="ngbDatepicker" required>
    <div class="input-group-addon" (click)="d.toggle()" >
        <i class="fa fa-calendar" aria-hidden="true"></i>
    </div>
</div>

誰かが問題を解決するために正しい方向に私を向けることができますか?

4

1 に答える 1

12

#d を #d1 と #d2 に変更しようとしましたが (toggle() の部分も変更しました)、ページがエラーを吐き出しました。

これは正しいアプローチであるため、アプリケーションに固有の何かが発生している必要があります。実用的なコード スニペット:

 <div class="input-group">
        <input class="form-control" placeholder="yyyy-mm-dd" name="dp1" [(ngModel)]="newItem.EndTime"  ngbDatepicker #d1="ngbDatepicker" required>
        <div class="input-group-addon" (click)="d1.toggle()" >
            <i class="fa fa-calendar" aria-hidden="true"></i>
        </div>
    </div>

    <div class="input-group">
        <input class="form-control" placeholder="yyyy-mm-dd" name="dp2" [(ngModel)]="newItem.StartTime"  ngbDatepicker #d2="ngbDatepicker" required>
        <div class="input-group-addon" (click)="d2.toggle()" >
            <i class="fa fa-calendar" aria-hidden="true"></i>
        </div>
    </div>

plunkr での実際の例: https://plnkr.co/edit/ZC3dOX9anbbNUMPEEd5W?p=preview

入力名が一意であること、およびディレクティブ インスタンス (など)#d1を指す一意の変数名を使用していることを確認します。それでも問題が発生する場合は、リンクしたプランカーで再現し、 https://github.com/ng-bootstrap/ng-bootstrap#d2で問題を開きます

于 2016-09-23T06:58:42.130 に答える