ng2-datepicker 如何从打字稿代码更改日期？答案

【问题标题】：ng2-datepicker how to change the date from typescript code?ng2-datepicker 如何从打字稿代码更改日期？
【发布时间】：2017-10-02 10:56:31
【问题描述】：

我在我的 Angular 应用程序中使用 ng2-datepicker，我想从打字稿文件中更新日期。

在html模板中：

<ng2-datepicker [options]="optionsForMenuDate" [(ngModel)]="selectedDate" name="selectedDate"></ng2-datepicker>

它绑定到一个矩对象，所以我试图像这样更新它（我在角度解决方案中包含了矩）：

this.selectedDate = this.moment(date);

我想将日期设置为的 js Date 对象的日期在哪里。这只是将组件设置为 null，即使 this.selectedDate 也不为 null。

console.log(this.selectedDate); // logs a moment object

关于如何实现这一目标的任何想法？

【问题讨论】：

标签： angularjs datepicker ng2-datepicker

【解决方案1】：

我遇到了同样的问题，我通过以下方式解决了问题。

你的代码的问题在下面一行，

[(ngModel)]="selectedDate"

这里，属性“selectedDate”应该是“DateModel”类型，而不是时刻对象。 DateModel 定义在，

import {DateModel} from "ng2-datepicker";

并且它具有以下属性，

export declare class DateModel {
    day: string;
    month: string;
    year: string;
    formatted: string;
    momentObj: moment.Moment;
    constructor(obj?: IDateModel);
}

现在您需要设置 momentObj 和 formatted 属性以使其正常工作。

这里是示例代码，

let dateModel:DateModel = new DateModel();
let momentObj = moment('05-11-1986', "MM-DD-YYYY");
dateModel.momentObj = momentObj;
dateModel.formatted = momentObj.format();
this.selectedDate = dateModel;

【讨论】：

这是一个有趣的解决方案，我会为此投赞成票并暂时使用它。我将选择更清洁的解决方案。我将您的解决方案更改为： dateModel.formatted = momentObj._i;因为我发现这样的显示效果更好。如果选定的日期在当前月份，则在首次打开日期选择器时不会显示选定的日期。非常感谢
其实我找到了 dateModel.formatted = momentObj.format("MM-DD-YYYY");工作得最好

【解决方案2】：

您可以使用 setStartDate 进行更新，test.ts 文件如下所示

import { Component, ViewChild, OnInit, ElementRef } from '@angular/core';
import { DaterangePickerComponent } from 'ng2-daterangepicker';

@Component({
  selector: 'test',
  templateUrl: './test.html',
  styleUrls: ['./test.css']
})
export class TestComponent implements OnInit {

 // @ViewChild(DaterangePickerComponent) this line is very important
  @ViewChild(DaterangePickerComponent)
  private picker: DaterangePickerComponent;

  constructor() { }

  ngOnInit() {}

  ngAfterViewInit(){

    // get previous day for start date
    let startDate = new Date();
    startDate.setDate(startDate.getDate() - 1);

    // get next day for start date
    let endDate = new Date();
    endDate.setDate(endDate.getDate() + 1);

    this.picker.datePicker.setStartDate(startDate);
    this.picker.datePicker.setEndDate(endDate);

  }

}

html 是这样的

<input type="text" class="form-control form-control2"  name="daterangeInput" daterangepicker [options]="options" />

【讨论】：