Question

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

我正在使用该指令。下面是一个如何使用模板设置ngbootstrap指令的示例链接。

当选择两个日期时，弹出窗口会在输入中添加一个日期。

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

[(ngModel)]=model

和

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

然而，我在设定模型后意识到。日期是在 ngbootstrap的datepicker模块提供的另一个组件内部检查的。

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

上面的私有方法也无法扩展类并覆盖检查

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;

}

此外，我利用了角度 useClass 并将一个字符串条件化了一下。

{
    provide: NgbDateAdapter,
    useClass: NgbStringAdapter
},

但是，NgbDatePickerInput类在此类最终确定之前覆盖了该行为。

不确定我是否遗漏了一些非常简单的东西或者是否需要使用extends或useClass几次。但我肯定希望对此有所了解。 stackblitz链接不是我的实际代码，但它很好地代表了我的开始。如果事情不清楚，请随时联系。谢谢！

Answer 1

使用ElementRef和ViewChild来设置输入值是可行的。

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

步骤如下：

通过使用writeValue和ElementRef来包含输入元素，
和ViewChild用于设置其值（类似于指令do）
并使用Renderer2设置模型日期格式
您只需要在选择日期后执行此操作，因此在方法NgbDateParserFormatter

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

HTML：

onDateSelection

TYPESCRIPT：

<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>

这是有效的演示：https://stackblitz.com/edit/angular-skbpc8-maun8a

Answer 2

上面的答案是正确的，如果我具有所需的声誉，我会对此发表评论，但是由于我不能，这是一小段CSS，您可以将其添加到styles.css中以完成功能。

<parent1 /> ------> <theChild />
<parent2 /> ------>

这将使min / maxDate或markDisabled日期的禁用看上去褪色且无法选择。

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

2 个答案: