[英]Setting a default placeholder date using Angular and ng-bootstrap
I am trying to set a placeholder date (now) for a datepicker, however can't work out how to do it. 我正在尝试为日期选择器设置一个占位符日期(现在),但是无法解决该问题。
Please help. 请帮忙。
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>
So a couple of things here: 所以这里有几件事:
A) "AngularJS" generally refers to Angular 1.x, and this is clearly Angular 2+ you're working with here A)“ AngularJS”通常是指Angular 1.x,这显然是您在此处使用的Angular 2+
B) Judging by the fact that you are trying to place valuedate inside of your Component decorator instead of as a property inside your class definition, I'd say you need to learn a lot about Angular before wanting to tackle building your own component to do this. B)从您试图将valuedate放置在Component装饰器内而不是作为类定义内的属性的事实来看,我想说您需要了解很多有关Angular的知识,然后再尝试构建自己的组件来做这个。 There are several component libraries that will give you a datepicker including Angular Material and Kendo .
有几个组件库将为您提供日期选择器,包括Angular Material和Kendo 。
C) The double curly brace syntax is for interpolation, which essentially inserts text. C)双花括号语法用于插值,实际上是插入文本。 If you really are needing to roll your own component here, something like this might work (note: uses the momentjs library):
如果您确实需要在此处滚动自己的组件,则可能需要执行以下操作(注意:使用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) There are some other issues with your code. D)您的代码还有其他问题。 You need to implement the ControlValueAccessor interface for ngModel to work in a custom component like that.
您需要为ngModel实现ControlValueAccessor接口,以便在这样的自定义组件中工作。
Create a format for your placeholder: 为占位符创建格式:
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;
Then 然后
<input type="text" ngbDatepicker placeholder="placeHolderText" ...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.