15

我在我的 Angular 2 webapp 中使用响应式表单，并且在将日期分配给 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行代码）而且我的表格有十几个日期！

所以我的问题是我能用更短的解决方案达到同样的结果吗？

4

3 回答 3

11

不知道能不能帮到你

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>
于 2017-04-04T18:14:05.663 回答
3

我刚刚在寻找解决同一问题的方法时发现了您的问题。我所做的是利用momentjs，它是一个日期/时间操作库（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然后以想看的格式创建一个空对象{day:0,month:0,year:0}，并将moment对象的相应属性映射到该ngbDatepicker对象中，然后调用this.formpatchValue并传入新创建的具有相应格式的对象。

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

于 2017-08-21T06:33:42.777 回答
2

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

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

于 2016-10-02T16:52:46.473 回答