Angular 2 ng-bootstrap日期选择器弹出窗口

Question

Angular 2 ng-bootstrap日期选择器弹出窗口

6

你好，我正在调查 ng-bootstrap 日期选择器。我查看了演示代码，并成功地将其应用到我的应用程序中。

但是，如果我添加了多个日期选择器输入标签，只有一个会起作用。以下是我创建的代码。我尝试将 #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>

我也尝试将其包装在一个组件中，这使我可以为不同的属性拥有多个日期选择器实例。然而，似乎无法将值传递回父组件。

新建活动.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>

有人能指点我解决这个问题的正确方向吗？

- Chuck

你能在Angular2中使用https://github.com/valor-software/ng2-bootstrap吗？ - Harry Ninh

据我所知，ng2-bootstrap不支持在弹出窗口中使用日期选择器，而用户特别要求https://ng-bootstrap.github.io，因此您的评论并没有帮助。 - pkozlowski.opensource

@pkozlowski.opensource 我在我的当前项目中使用ng2-bootstrap来处理所有日期字段，所以我知道它支持弹出式日期选择器。而且因为他正在寻找ng-bootstrap解决方案，所以我没有将其发布为答案。 - Harry Ninh

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- pkozlowski.opensource · Accepted Answer

我试图将#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>

在 plunker 上查看实时示例：https://plnkr.co/edit/ZC3dOX9anbbNUMPEEd5W?p=preview

确保您具有唯一的输入名称，并且您使用指向指令实例的唯一变量名称（例如#d1，#d2等）。如果您仍然面临问题，请在我提供的 plunker 中重新创建它并在https://github.com/ng-bootstrap/ng-bootstrap中打开问题。