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

Question

目前我正在使用：

ng-bootstrap 1.0.0-alpha.24
angular/core 4.0.0
bootstrap 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>

笨蛋：ng-bootstrap team demo

我找了很久，对angular这些东西也很陌生

感谢您的帮助！

更新：

可能的解决方案：

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

@ViewChild('datePickerInput') datePicker: NgbInputDatepicker;

this.datePicker.close();

Answer 1

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

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

组件：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 添加到您的日期选择器 div

<div id="datepicker01" ...>

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

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

我是这样解决的。

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

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

How to open and hide ng-bootstrap datepicker on custom actions?

css

bootstrap-4

ng-bootstrap

angular