首页 文章

ng2-datepicker如何从typescript代码更改日期？

提问于
浏览 次
2

我在我的角应用程序中使用ng2-datepicker，我想从typescript文件更新日期 .

在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

2 回答

  • 1

    我遇到了同样的问题，我按照以下方式开始工作 .

    你的代码的问题在于以下行，

    [(ngModel)]="selectedDate"

    这里，属性'selectedDate'应该是'DateModel'类型，而不是moment对象 . 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;
    回复于
  • 0

    您可以使用 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" />
    回复于

相关问题