Question

我在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行代码）而且我的表单有十几个日期！

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

Answer 1

我不知道它是否可以帮到你

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 2

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

我认为，目前您最好的选择是将详细代码提取到实用程序函数，并在需要转换时调用它（如其中一条注释中所示）。

Answer 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}，并将当前对象中的相应属性映射到ngbDatepicker对象，然后调用{{1}并使用适当的格式传入新创建的对象。

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

将日期分配给ngbDatepicker的简短方法

3 个答案: