如何在自定义操作中打开和隐藏 ng-bootstrap datepicker？

Question

目前我正在使用：

• ng-bootstrap 1.0.0-alpha.24
• 角度/核心 4.0.0
• 引导程序 4.0.0-alpha.6

我想问是否有人知道如何自动关闭日期选择器 当焦点丢失或另一个日期选择器打开时。

如果可以使用打字稿关闭组件代码中的日期选择器，我现在也想这样做。

如果有人能提供一个可以工作的 plunker 或代码 sn-p，那就太好了。

我的实际实现：

<div class="input-group">
    <input class="rect-border full-width"
           placeholder="YYMMDD"
           [(ngModel)]="selectedDate"
           ngbDatepicker
           #datePickerInput="ngbDatepicker"
           (keydown.arrowup)="incrementDate()"
           (keydown.arrowdown)="decrementDate()"
           (ngModelChange)="validate('modelChanged')"
           (blur)="validate(null)"
           [disabled]="disabled"
           [ngClass]="{'input-required': required, 'normal-color': valid, 'picker-disabled': disabled}">

    <div class="input-group-addon rect-border"
         (click)="disabled ? true : datePickerInput.toggle()"
         [ngClass]="{'picker-button-disabled': disabled}">
        <img src="assets/img/calendar-icon.svg" class="datpickerToggle"/>
    </div>
</div>

Plunker：ng-bootstrap team demo

我已经搜索了很长时间，我对 Angular 和这些东西也很陌生。

感谢您的帮助！

更新：

可能的解决方案：

提供了很多好的解决方案。 我自己也发现我可以使用 NgbInputDatepicker 类 关闭 datePicker（我一直使用 NgbDatepicker，所以它不起作用）。

@ViewChild('datePickerInput') datePicker: NgbInputDatepicker;

this.datePicker.close();

Answer 1

我一直在寻找此问题的解决方案，但在日期选择器被包装在自定义组件中并且必须公开父组件可以调用以切换日期选择器的函数的情况下。提供的答案很好，适用于大多数用例，但不适用于我的，因为我不想添加 jQuery 依赖项，并且无法从 HTML 调用切换。

我是这样解决的。

我在 *.component.ts 文件中添加了对 datepicker 输入的 ViewChild 引用

  @ViewChild('d', {static: true}) d;

与 HTML 文件中的日期选择器标识符匹配

<input (dateSelect)="dateSelected($event)" class="form-control" (focus)='d.toggle()' placeholder="yyyy-mm-dd" name="d"
  [ngModelOptions]="{standalone: true}" [(ngModel)]="date" ngbDatepicker #d="ngbDatepicker">

并在组件公开的方法中调用toggle 函数

toggle() {
  this.d.toggle();
}

这样，另一个组件可以调用该组件公开的toggle() 函数来切换日期选择器，如下所示：

在 HTML 中

<app-custom-datepicker #date></app-custom-date-picker>

在 .ts 文件中

@ViewChild('date', {static: true}) date;
.
.
.
this.date.toggle();

Answer 2

您可以从 html 本身打开和关闭日期选择器

例如：

<div class="input-group">
    <input class="rect-border full-width"
           placeholder="YYMMDD"
           [(ngModel)]="selectedDate"
           ngbDatepicker
           #datePickerInput="ngbDatepicker"
           (keydown.arrowup)="incrementDate()"
           (keydown.arrowdown)="decrementDate()"
           (ngModelChange)="validate('modelChanged')"
           (blur)="validate(null)"
           [disabled]="disabled"
           [ngClass]="{'input-required': required, 'normal-color': valid, 'picker-disabled': disabled}">

    <div class="input-group-addon rect-border"
         (click)="disabled ? true : datePickerInput.toggle()"
         [ngClass]="{'picker-button-disabled': disabled}">
        <img src="assets/img/calendar-icon.svg" class="datpickerToggle"/>
    </div>
</div>

<div (click)="datePickerInput.open()"></div>

<span (click)="datePickerInput.close()"></span>

还有很多你可以在你的 html 中使用的函数。有些是close()、isOpen()、manualDateChange()、open()、toggle()、validate() 等。你可以在这个 plunkr 中引用它http://plnkr.co/edit/G1b6fFrtVZwEz4lsou8n?p=preview

Answer 3

在打字稿中，您可以简单地定义一个变量datepickerVisibility，然后在您的模板中使用 *ngIf 来显示或隐藏您的日期选择器组件。这是一个演示代码：

模板：<datepicker *ngIf="datepickerVisibility" [ngModel]="date"> </datepicker>

组件：private datepickerVisibility: boolean = false; // Show the datepicker showDatepicker() { this.datepickerVisibility = true; }

编辑：

因此你可以使用 jQuery。将 jQuery js 添加到您的 index.html 中，并在您的 typescript 组件中使用 jQuery，如下所示：

declare let jQuery: any;

@Component({
    moduleId: module.id,
    selector: 'test',
    templateUrl: 'template.html',
    styleUrls: ['test.css'],
})
export class TestComponent {
   constructor() {}

    public toggleDatepicker() {
        jQuery("#datepicker01").toggle();
   }
 }

在您的模板文件中，只需将 id datepicker01 添加到您的 datepicker div

<div id="datepicker01" ...>