在开始之前,我正在使用Angular2 rc4与typescript.如果你想知道,我不能升级,所以我必须在rc4的限制内使这项工作.另外我还是一个ng2的noob,所以还是把我的头脑围绕着“发布候选人”的概念和所有的变化.
对于值访问器进行了相当多的研究后,我决定专门为< input type = date />以避免在组件中要求单独的mule属性,只是将日期转换为输入的字符串.
我发现了this gist,这似乎做了很多我想做的事情.
使用它作为一个开始,几乎结束点,我想出了这一点:
- import { Directive,ElementRef,Renderer,forwardRef } from "@angular/core";
- import { ControlValueAccessor,NG_VALUE_ACCESSOR } from "@angular/forms";
- import { isBlank,isDate } from "@angular/forms/src/facade/lang";
- import moment from "moment";
- export const DATE_VALUE_ACCESSOR: any = {
- provide: NG_VALUE_ACCESSOR,useExisting: forwardRef(() => DateValueAccessor),multi: true
- };
- @Directive({
- selector:
- "input[type=date][formControlName],input[type=date][formControl],input[type=date][ngModel]",host: {
- "(change)": "onChange($event.target.value)","(input)": "onChange($event.target.value)","(blur)": "onTouched()"
- },providers: [DATE_VALUE_ACCESSOR]
- })
- export class DateValueAccessor implements ControlValueAccessor {
- onChange = (_: any) => {
- // we don't need to do anything here
- };
- onTouched = () => {
- // we don't need to do anything here
- };
- constructor(
- private _renderer: Renderer,private _elementRef: ElementRef) {
- }
- writeValue(value: any): void {
- var normalizedValue: string = isBlank(value) ? "" : (isDate(value) ? moment(value).format("YYYY-MM-DD") : "");
- this._renderer.setElementProperty(this._elementRef.nativeElement,"value",normalizedValue);
- }
- registerOnChange(fn: (_: any) => void): void {
- this.onChange = (value: string) => {
- var date: moment.Moment = moment(value,"YYYY-MM-DD");
- var newValue: Date = date.isValid() ? date.toDate() : undefined;
- fn(newValue);
- };
- }
- registerOnTouched(fn: () => void): void {
- this.onTouched = fn;
- }
- }
我觉得我几乎在那里,但不完全相同!
更新当表单首次加载时,一切都是hunky dory,但是当我尝试选择一个新的日期时,浏览器会抱怨格式. /更新
我在devtools中可以看到的错误是:
The specified value “Fri Sep 09 2016 00:00:00 GMT+0100 (GMT Summer Time)” does not conform to the required format,“yyyy-MM-dd”.
我烧了一点时间调整代码并移动了一些东西.我也试图从onChange(as can be seen in this plnkr)里面调用writeValue,但是我仍然看到错误…
有没有人这样做?在我错过的代码中有什么明显的东西吗?
诚然,使用更高版本的Angular(2.1.0),但更改应该适用,您可以看到模型正确绑定到您的格式化的字符串,这里是一个Plunker:
https://plnkr.co/edit/8U0o0m49646tMH0kr1Mx?p=preview
您代码的唯一更改是:
- registerOnChange(fn: (_: any) => void): void {
- this.onChange = fn;
- }
这不是显示文本的不同,据我所知,绑定到输入type =“date”作为元素,不能被覆盖.快速搜索需要我到Is there any way to change input type=”date” format?这似乎回覆了这个说法.