如何在自定义操作上打开和隐藏 ng-bootstrap 日期选择器？

Question

目前我正在使用：

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

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

我也想现在是否可以使用打字稿关闭组件代码中的日期选择器。

如果有人可以提供一个有效的 plunker 或代码片段，那就太好了。

我的实际实现：

<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 团队演示

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

感谢您的帮助！

更新：

可能的解决方案：

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

@ViewChild('datePickerInput') datePicker: NgbInputDatepicker;

this.datePicker.close();

Answer 1

你可以从你的 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 2

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

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

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

编辑：

因此你可以使用jQuery。 将 jQuery js 添加到您的 index.html 并在您的打字稿组件中使用 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" ...>

Answer 3

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

这是我解决它的方法。

我在 *.component.ts 文件中添加了对ViewChild输入的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();