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

Posted 2023-03-06

【中文标题】如何在自定义操作中打开和隐藏 ng-bootstrap datepicker？

【英文标题】：How to open and hide ng-bootstrap datepicker on custom actions?

【发布时间】：2017-10-06 04:33:52

【问题描述】：

目前我正在使用：

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();

【问题讨论】：

您是否更改了 datepicker 的 autoclose 属性？ IE。 $.fn.datepicker.defaults.autoclose = true;

我在哪里可以做到这一点？我只使用打字稿没有 javascript

【参考方案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();

【参考方案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

【讨论】：

这很酷而且有效！你知道我是否可以观察组件中的变量并在 html 中切换日期选择器吗？就像我需要：布尔值，然后在 html 中需要？ picker.open() : picker.close();

【参考方案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" ...>

【讨论】：

这个解决方案的问题是我使用 （里面有切换）来打开日期选择器。我只能通过#datePickerInput 属性访问日期选择器

我喜欢这个解决方案，但我不知道如何设置 datepicker 的 id，因为我使用的是 而不是选择器

简单设置 :)

我设法将 jquery 添加到我的项目并使其正常工作，但是当我将切换功能添加到 时，输入字段消失了。所以 jquery 不知道有一个 datepicker