使用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" ...