Question

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

请帮助。

          <div class="list-item-content text-center">
            This should be vertically centered if there is room
          </div>
        </div>

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};
}

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

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

2 个答案: