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

【问题标题】：Setting a default placeholder date using Angular and ng-bootstrap使用 Angular 和 ng-bootstrap 设置默认占位符日期
【发布时间】：2018-08-10 19:38:08
【问题描述】：

我正在尝试为日期选择器设置一个占位符日期（现在），但不知道该怎么做。

请帮忙。

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>

【问题讨论】：

标签： javascript html angular ng-bootstrap

【解决方案1】：

这里有几件事：

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

B) 从您尝试将 valuedate 放置在 Component 装饰器中而不是作为类定义中的属性这一事实来看，我想说在想要解决构建自己的问题之前，您需要了解很多关于 Angular 的知识组件来做到这一点。有几个组件库可以为您提供日期选择器，包括 Angular Material 和 Kendo。

C) 双花括号语法用于插值，本质上是插入文本。如果你真的需要在这里滚动你自己的组件，这样的事情可能会起作用（注意：使用 momentjs 库）：

&lt;input type="text" ngbDatepicker placeholder="placeholder" class="form-control"  [(ngModel)]="valuedate" /&gt;

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 接口才能在这样的自定义组件中工作。

【讨论】：

OP 在我看到将 AngularJS 更新为 Angular 后编辑了他的问题，忽略 A。

【解决方案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" ...

【讨论】：