首页 文章

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

提问于
浏览 次
6

目前我正在使用：

  • ng-bootstrap 1.0.0-alpha.24

  • angular / core 4.0.0

  • bootstrap 4.0.0-alpha.6

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

此外，如果可以使用typescript关闭组件代码中的datepicker，我现在也想要 .

如果有人可以提供有效的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 team demo

我已经搜索了很长时间，我对角度和这些东西也很新 .

谢谢您的帮助！

更新：

可能的方法：

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

@ViewChild('datePickerInput') datePicker: NgbInputDatepicker;

this.datePicker.close();
css angular bootstrap-4 ng-bootstrap

2 回答

  • 9

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

    回复于
  • 2

    在打字稿中你可以简单地定义一个变量 datepickerVisibility 然后在你的模板中使用* ngIf来显示或隐藏你的datepicker组件 . 这是一个演示代码：

    模板： <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" ...>

    回复于

相关问题