angular - 将日期范围添加到 NgbInputDatepicker 输入字段

Question

我正在使用 Angular 5.2 和 ngbootstrap 1.1。该库有几个不同的日期选择器选项，一个用作组件，另一个用作指令。

我正在使用指令。以下是指向如何使用模板设置 ngbootstrap 指令的示例的链接。

directive example

选择了两个日期时，弹出窗口在输入内添加了一个日期。

在我最初的方法中，我试图设置

[(ngModel)]=model 

和

 this.model = `${this.fromDate} / ${this.toDate}`;

但是，我在设置模型后意识到了这一点。在 ngbootstrap 的日期选择器模块 提供的另一个组件中检查了日期。

private _fromDateStruct(date: NgbDateStruct): NgbDate {
  const ngbDate = date ? new NgbDate(date.year, date.month, date.day) : null;
  return this._calendar.isValid(ngbDate) ? ngbDate : null;
}

link to component code

此外，上面的私有(private)方法使得无法扩展类和覆盖检查

class DateInputDirective extends NgbInputDatepicker 

我挖得更深了一点，希望能换个服务。 NgbDateAdapter 服务返回对象，如果不准确则返回 null。我的字符串日期范围无法通过。

NgBootstrap API

fromModel(date: NgbDateStruct): NgbDateStruct {
  return (date && date.year && date.month && date.day) ? {year: date.year, month: date.month, day: date.day} : null;

此外，我还利用了 Angular 的 useClass 并添加了一个字符串条件。

{
    provide: NgbDateAdapter,
    useClass: NgbStringAdapter
},

但是，NgbDatePickerInput 类在此类完成之前覆盖了该行为。

不确定我是否遗漏了一些非常简单的东西，或者是否是多次使用 extends 或 useClass 的问题。但我肯定正在寻找对此的一些见解。 stackblitz 链接不是我的实际代码，但它很好地代表了我开始的内容。如果有什么地方写不清楚，请随时与我们联系。谢谢!

Answer 1

可以使用 ElementRef 和 ViewChild 设置输入值。

我的意思是不将 ViewChild 与指令/组件 ( NgbInputDatepicker ) 一起使用，因为指令中元素的所有访问器都是私有(private)的，我不知道如何更改从那里输入，除非在 _writeModelValue 方法中 (line 363) , writeValue 调用它，但它只更新一个日期。

所以步骤是:

• 通过使用 ElementRef 和 ViewChild 获得输入元素，
• 和Renderer2 用于设置它的值(就像指令那样)
• 并使用 NgbDateParserFormatter 格式化模型日期
• 您只需要在选择日期时执行此操作，因此在 onDateSelection
方法中

这是主要代码，我将添加一些注释:

HTML:

<input
     #myRangeInput
    class="form-control" 
    placeholder="mm/dd/yyyy"
    name="dp" 
    [(ngModel)]="model" 
    ngbDatepicker 
    [dayTemplate]="t"
    [autoClose]="false"
    [displayMonths]="2"
    [maxDate]="maxDate"
    [minDate]="minDate"
>
    <ng-template #t let-date="date" let-focused="focused">
        <span class="custom-day"
            [class.range]="isFrom(date) || isTo(date) || isInside(date) || isHovered(date)"
            [class.faded]="isHovered(date) || isInside(date)"
            (click)="onDateSelection(date)"
            (mouseenter)="hoveredDate = date"
            (mouseleave)="hoveredDate = null"
            >
        {{ date.day }}
        </span>
    </ng-template>

typescript :

import {Component, ViewChild, OnInit, ElementRef, Renderer2} from '@angular/core';
import {
    NgbDatepicker, 
    NgbInputDatepicker, 
    NgbDateStruct, 
    NgbCalendar, 
    NgbDateAdapter,
    NgbDateParserFormatter} from '@ng-bootstrap/ng-bootstrap';
...
export class NgbdDatepickerPopup implements OnInit{
  ...
 @ViewChild('myRangeInput') myRangeInput: ElementRef;
 constructor(element: ElementRef, private renderer: Renderer2, private _parserFormatter: NgbDateParserFormatter) { }
 onDateSelection(date: NgbDateStruct) {
        let parsed = ''; // initializing with empty string
        if (!this.fromDate && !this.toDate) {
            this.fromDate = date;
        } else if (this.fromDate && !this.toDate && after(date, this.fromDate)) {
            this.toDate = date;
            this.input.close();
        } else {
            this.toDate = null;
            this.fromDate = date;
        }
        if(this.fromDate) {
          // if fromDate is set: add the first date
          parsed += this._parserFormatter.format(this.fromDate);
        }
        if(this.toDate) {
          // if toDate is set: add the second date with separator
          parsed += ' - ' + this._parserFormatter.format(this.toDate);
        }
        // here we update the input value with the new parsed value
        this.renderer.setProperty(this.myRangeInput.nativeElement, 'value', parsed);
    }

这是工作演示:https://stackblitz.com/edit/angular-skbpc8-maun8a