如何在角度 2 中使用日期选择器弹出窗口

Question

我想在使用角度 2 的输入控件中使用日期选择器弹出窗口，当对输入控件进行模糊处理时，日期选择器弹出应该像引导日期选择器一样，我想在角度 2 中执行此操作，请建议我参考Angular 2 的日期选择器。

Answer 1

我根据ng2-bootstrap datepicker 创建了自己的日期选择器弹出窗口。

HTML

<my-datepicker [dateModel]="endDate" [label]="'Startdatum'" ></my-datepicker>

TypeScript 中的 Angular2-Component：

import {Component, Input, Output, EventEmitter} from '@angular/core';
import {DATEPICKER_DIRECTIVES} from 'ng2-bootstrap/components/datepicker';

@Component({
    selector: 'my-datepicker',
    directives: [DATEPICKER_DIRECTIVES],
    template: `
      <label>{{label}}</label>
      <input [(ngModel)]="dateModel" class="form-control"     (focus)="showPopup()" />
      <datepicker class="popup" *ngIf="showDatepicker" [(ngModel)]="dateModel" [showWeeks]="true" (ngModelChange)="hidePopup($event)" ></datepicker>
  `,
    styles: [`
    .popup {
      position: absolute;
      background-color: #fff;
      border-radius: 3px;
      border: 1px solid #ddd;
      height: 251px;
    }
  `],
})
export class IsdDatepickerComponent {
    @Input()
    dateModel: Date;
    @Input()
    label: string;
    @Output()
    dateModelChange: EventEmitter<string> = new EventEmitter();
    private showDatepicker: boolean = false;

    showPopup() {
        this.showDatepicker = true;
    }

    hidePopup(event) {
        this.showDatepicker = false;
        this.dateModel = event;
        this.dateModelChange.emit(event)
    }
}

Answer 2

看看这个日期选择器，它是高度可配置的，它唯一的依赖是时刻。
https://github.com/vlio20/ng2-date-picker

Answer 3

只需使用 selectionDone 代替 ngModelChange 事件。 我在我的代码中使用：

    import {Component, Input, Output, EventEmitter} from '@angular/core';
import {DATEPICKER_DIRECTIVES} from 'ng2-bootstrap/components/datepicker';

@Component({
    selector: 'my-datepicker',
    directives: [DATEPICKER_DIRECTIVES],
    template: `
      <label>{{label}}</label>
      <input [(ngModel)]="dateModel" class="form-control"     (focus)="showPopup()" />
      <datepicker class="popup" *ngIf="showDatepicker" [(ngModel)]="dateModel" [showWeeks]="true" (selectionDone)="hidePopup($event)" ></datepicker>
  `,
    styles: [`
    .popup {
      position: absolute;
      background-color: #fff;
      border-radius: 3px;
      border: 1px solid #ddd;
      height: 251px;
    }
  `],
})
export class IsdDatepickerComponent {
    @Input()
    dateModel: Date;
    @Input()
    label: string;
    @Output()
    dateModelChange: EventEmitter<string> = new EventEmitter();
    private showDatepicker: boolean = false;

    showPopup() {
        this.showDatepicker = true;
    }

    hidePopup(event) {
        this.showDatepicker = false;
        this.dateModel = event;
        this.dateModelChange.emit(event)
    }
}

Answer 4

基于 Bootstrap 4 的 Angular 2 有一个新的、出色的 datepicker 实现：https://ng-bootstrap.github.io/#/components/datepicker。

它是一个完全原生的小部件，具有表单集成和非常灵活的自定义选项。

Answer 5

这是我基于 Christophs 回答的实现。我正在使用两种方式绑定。组件将日期作为字符串 yyyy-mm-dd 发出以保存在服务器上。但它将组件内的日期显示为字符串 dd-mm-yyyy 。方便跨浏览器显示

 <datepicker-popup [(dateModel)]="serverDate"></datepicker-popup>

ts：

import {Component, Input, Output, EventEmitter, OnInit} from '@angular/core';
import {DatePickerComponent} from 'ng2-bootstrap/datepicker';

@Component({
selector: 'datepicker-popup',
template: `
  <input type="text" [(ngModel)]="_dateModel" class="form-control" (click)="openPopup()">
  <datepicker class="popup"
      [hidden]="!showPopup"
      [(ngModel)]="dateModelObj"
      [showWeeks]="true"
      (ngModelChange)="closePopup($event)" >
  </datepicker>


 `,
    styles: [`
    .popup {
      position: absolute;
      background-color: #fff;
      border-radius: 3px;
      border: 1px solid #ddd;
      height: 251px;
    }
  `],
})
export class DatepickerPopupComponent implements OnInit{
    @Input() dateModel: string;
    @Output()  dateModelChange: EventEmitter<string> = new EventEmitter();
    showPopup: boolean = false;
    _dateModel: string;
    dateModelObj: any;

ngOnInit() {
    this.dateModelObj = new Date(this.dateModel)
}

openPopup() {
    this.showPopup = true;
}

closePopup(event) {
    this.showPopup = false;
    this._dateModel = this.DDMMYYYY(event);
    this.dateModelChange.emit(this.YYYYMMDD(event))
}

YYYYMMDD(date):string {
    if (!date) return null;
    return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
};

DDMMYYYY(date):string {
    if (!date) return null;
    return date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
};

}

Answer 6

试试这个， 前置要求ng2-bootstrap

在您的应用模块中导入日期选择器模块

import { DatepickerModule } from 'ng2-bootstrap';

应用日期选择器

<app-datepicker name="date" [(ngModel)]="driver.dateOfBirth" [placeholder]="'Date of Birth'" [dateFormat]="'dd-MM-yyyy'" ngDefaultControl required></app-datepicker>

datepicker.component.ts

import { Component, ViewChild, Input, Output, EventEmitter, ElementRef, Renderer } from '@angular/core';
import { DatePipe } from '@angular/common';

@Component({
    selector: 'app-datepicker',
    templateUrl: './datepicker.component.html',
    styleUrls: ['./datepicker.component.css']
})

    export class DatepickerComponent {
        public inputHeight: String;

        @ViewChild('tasknote') input: ElementRef;
        @Input()
        ngModel: String;
        @Input()
        label: string;
        @Input()
        dateFormat: string;
        @Input()
        placeholder: string;
        @Output()
        ngModelChange: EventEmitter<string> = new EventEmitter();

        private showDatepicker: boolean = false;

        constructor(public element: ElementRef) {
        }

        showPopup(element) {
            this.inputHeight = this.element.nativeElement.querySelector('input').getBoundingClientRect().height + 'px';
            this.showDatepicker = true;
        }

        hidePopup(event) {
            this.showDatepicker = false;
            if (event) {
                var date = new DatePipe('en-us').transform(event, this.dateFormat || 'dd/MM/yyyy');
                this.ngModel = date;
                this.ngModelChange.emit(date);
            }
        }
    }

datepicker.component.html

<div style="position: relative;">
    <label [ngClass]="{'hide': !label}">{{label}}</label>
    <input #tasknote name="date-picker" [(ngModel)]="ngModel" (focus)="showPopup($elem)" placeholder="{{placeholder}}" required/>
    <datepicker class="popup" [ngClass]="{'hide': !showDatepicker}" [(ngModel)]="date" [showWeeks]="true" (selectionDone)="hidePopup($event)"
        [ngStyle]="{'bottom': inputHeight}"></datepicker>
</div>

datepicker.component.css

.popup {
      position: absolute;
      background-color: #fff;
      border-radius: 3px;
      border: 1px solid #ddd;
      height: 251px;
      color: #000;
      right: 0px;
    }
.hide {
     display:none;
}

Answer 7

您可以使用提供日期选择器组件的 ng2-boostrap 项目：

<datepicker [(ngModel)]="date" showWeeks="true"></datepicker>

查看项目页面：

• https://github.com/valor-software/ng2-bootstrap

有关在 SystemJS 配置中配置 ng2-bootstrap（和 moment 库）的方法，请参阅此问题：

• integrate bootstrap module and ng2-select module to angular2 5min quickstart