使用Angular和ng-bootstrap设置默认的占位符日期

Question

我正在尝试为日期选择器设置一个占位符日期（现在），但是无法解决该问题。

请帮忙。

import {Component} from '@angular/core';
import { NgbDateCustomParserFormatter} from 'dateformat';

@Component({
  selector: 'ngbd-datepicker-popup',
  templateUrl: './datepicker-popup.html',

   valuedate = new Date();

})


export class NgbdDatepickerPopup {
  model = {year: 2017, month: 8, day: 8};
}

<div class="input-group">
  <input type="text" ngbDatepicker placeholder="{{model}}" class="form-control" #d="ngbDatepicker" [(ngModel)]="model" />
  <button (click)="d.toggle()">Toggle</button>

</div>

Answer 1

所以这里有几件事：

A）“ AngularJS”通常是指Angular 1.x，这显然是您在此处使用的Angular 2+

B）从您试图将valuedate放置在Component装饰器内而不是作为类定义内的属性的事实来看，我想说您需要了解很多有关Angular的知识，然后再尝试构建自己的组件来做这个。 有几个组件库将为您提供日期选择器，包括Angular Material和Kendo 。

C）双花括号语法用于插值，实际上是插入文本。 如果您确实需要在此处滚动自己的组件，则可能需要执行以下操作（注意：使用momentjs库）：

 <input type="text" ngbDatepicker placeholder="placeholder" class="form-control" [(ngModel)]="valuedate" /> 

 import {Component} from '@angular/core'; import { NgbDateCustomParserFormatter} from 'dateformat'; import * as moment from 'moment-mini'; @Component({ selector: 'ngbd-datepicker-popup', templateUrl: './datepicker-popup.html', }) export class NgbdDatepickerPopup { valuedate = new Date(); placeholder: string = moment().format('MM/DD/YYYY'); } 

D）您的代码还有其他问题。 您需要为ngModel实现ControlValueAccessor接口，以便在这样的自定义组件中工作。

Answer 2

为占位符创建格式：

present : Date  = new Date();
model           = 
{
    year : this.present.getFullYear(), 
    month: this.present.getMonth()+1, 
    day  : this.present.getDate()
};

placeHolderText = this.model.year + '-' + this.model.month + '-' + this.model.day;

然后

<input type="text" ngbDatepicker placeholder="placeHolderText" ...