将日期分配给 ngbDatepicker 的快捷方式

Question

我在我的 Angular 2 网络应用程序中使用反应式表单，但在将日期分配给 ngbDatepicker (ngbootstrap 1 alpha 6) 时遇到了问题。我的对象有一个日期对象，例如：

var myObject = {date: new Date(1, 9, 2016)};

在我的反应形式中，它配置如下：

input.form-control(name='date', ngbDatepicker, #date="ngbDatepicker", placeholder='jj.mm.aaaa', formControlName='date', type="text")

然后我像这样修补表格：

this.form.patchValue({myObject: myObject});

问题是ngbDatepicker采用以下结构的日期：

{day: DD, month: MM, year: YYYY}

我找到了一个解决方法：

this.form.controls.myObject.controls.date.valueChanges
        .map((value) => {
            if(value) {
                if (typeof value.getMonth === 'function') {
                    this.form.controls.myObject.patchValue({
                        date: {
                            day: value.getUTCDay(),
                            month: value.getUTCMonth(),
                            year: value.getUTCFullYear()
                        }
                    });
                }
            }
            return value;
        })
        .subscribe((value) => {

        });

一切都按预期工作（只要对表单进行修补，日期就会更新）但是它太冗长了（18 行代码）而且我的表单有十几个日期！

所以我的问题是我可以用更短的解决方案获得相同的结果吗？

Answer 1

@ncohen 我们也填补了痛苦，请参阅：https://github.com/ng-bootstrap/ng-bootstrap/issues/754。目前没有完美的解决方案，最终需要来自 Angular 本身，以 AngularJS 已知的解析器/格式化程序的形式。 Angular 存储库中已经有 2 个问题将您的用例作为功能请求进行跟踪：

我认为目前您最好的选择是将冗长的代码提取到一个实用函数中，并在需要转换时调用它（如评论之一所建议的那样）。

Answer 2

不知道对你有没有帮助

ng-bootstrap: 1
angular: 2
bootstrap: 4

ngOnInit() {
const now = new Date();
const since = moment().subtract(14,'d').toDate();

this.model.fechaHasta = {year: now.getFullYear(), month: now.getMonth() + 1, day: now.getDate()};
this.model.fechaDesde = {year: since.getFullYear(), month: since.getMonth() + 1, day: since.getDate()};
}

HTML

<div class="input-group">
    <input class="form-control" placeholder="yyyy-mm-dd"
                name="fechaHasta" [(ngModel)]="model.fechaHasta" ngbDatepicker #d10="ngbDatepicker">

    <div class="input-group-addon" (click)="d10.toggle()">
       <img src="../../shared/img/calendar-icon.png" style="width: 1.2rem; height: 1rem; cursor: pointer;"/>
    </div>
</div>

Answer 3

我刚刚在寻找同一问题的解决方案时发现了您的问题。我所做的是利用 momentjs，它是一个 date/time 操作库 (http://momentjs.com)，我正在通过 momentjs 操作来自数据库的日期，然后将它们修补到表单中并初始化 ngbDatepicker。

this.START_DATE 是数据库中的值，它以字符串形式出现 START_DATE : "2017-08-27"

var _savedStartDate = moment(this.START_DATE).toObject();

var _savedStartDateObject = {day:0,month:0,year:0};

    _savedStartDateObject.day = _savedStartDate.date;
    _savedStartDateObject.month = _savedStartDate.months;
    _savedStartDateObject.year = _savedStartDate.years;

this.form.patchValue({
  START_DATE: _savedStartDateObject
})

这比需要的更冗长，您可以在一行中创建对象并分配属性，但这更具可读性。

基本上通过将日期作为字符串传递给 moment() 函数来创建时刻日期对象，然后对结果调用 toObject 函数，它会为您提供如下对象：{years: 2017, months: 7, date: 27, hours: 0, minutes: 0, seconds: 0, milliseconds: 0}

然后创建一个空对象，格式为ngbDatepicker wants to see it {day:0,month:0,year:0}，并将moment对象的合适属性映射到ngbDatepicker对象中，然后调用this.formpatchValue 并以适当的格式传入新创建的对象。

相关的 momentjs 文档在这里 http://momentjs.com/docs/#/displaying/as-object/

将日期分配给 ngbDatepicker 的快捷方式

Short way to assign date to ngbDatepicker

angular

ng-bootstrap