Last active
March 22, 2021 02:24
-
-
Save zzpmaster/1ffee87139b1037b2b2199e26513c3dd to your computer and use it in GitHub Desktop.
input输入年月日时,自动转换为yyyy年MM月dd日,提交时yyyy-MM-dd格式
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { | |
Directive, | |
ElementRef, | |
forwardRef, | |
HostListener, | |
OnInit, | |
Renderer2 | |
} from '@angular/core'; | |
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; | |
import * as moment from 'moment'; | |
/** | |
* DateMaskDirective | |
* | |
* @export | |
* @class NumberMaskDirective | |
*/ | |
@Directive({ | |
// tslint:disable-next-line: directive-selector | |
selector: 'input[dateMask]', | |
exportAs: 'dateMask', | |
providers: [ | |
{ | |
provide: NG_VALUE_ACCESSOR, | |
useExisting: forwardRef(() => DateMaskDirective), | |
multi: true | |
} | |
] | |
}) | |
export class DateMaskDirective implements OnInit, ControlValueAccessor { | |
constructor(private elementRef: ElementRef, private renderer: Renderer2) {} | |
private element: HTMLInputElement; | |
private displayFormat = 'YYYY年MM月DD日'; | |
private editFormat = 'YYYYMMDD'; | |
private format = 'YYYY-MM-DD'; | |
public _onTouched = () => {}; | |
public _onChange = (_: any) => {}; | |
/** | |
* init directive | |
*/ | |
public ngOnInit(): void { | |
this.element = this.elementRef.nativeElement; | |
} | |
/** | |
* onFocus | |
* | |
* @param {string} value | |
* @memberof NumberMaskDirective | |
*/ | |
@HostListener('focus', ['$event.target.value']) | |
public onFocus(value: string): void { | |
const date = moment(value, this.displayFormat, true); | |
if (date.isValid()) { | |
this.element.value = this.removeFormat(value, this.displayFormat); | |
} else { | |
this.element.value = value; | |
} | |
} | |
/** | |
* onBlur | |
* | |
* @param {string} value | |
* @memberof NumberMaskDirective | |
*/ | |
@HostListener('blur', ['$event.target.value']) | |
public onBlur(value: string): void { | |
this.setValue(value); | |
} | |
/** | |
* change | |
*/ | |
@HostListener('input', ['$event.target.value']) | |
public onChange(value: string): void { | |
this.setValue(value); | |
} | |
/** | |
* setting value | |
* @param value | |
*/ | |
private setValue(value: string): void { | |
const date = moment(value, this.editFormat, true); | |
if (!date.isValid()) { | |
this.element.value = value; | |
this._onChange(value); | |
this._onTouched(); | |
return; | |
} | |
this.element.value = moment(value, this.editFormat).format( | |
this.displayFormat | |
); | |
this._onChange(moment(value, this.editFormat).format(this.format)); | |
this._onTouched(); | |
} | |
/** | |
* implements ControlValueAccessor | |
* @param value | |
*/ | |
public writeValue(value: any): void { | |
if (value === null || value === '') { | |
this.element.value = ''; | |
return; | |
} | |
const date = moment(value, this.format, true); | |
if (date.isValid()) { | |
this.element.value = moment(value).format(this.displayFormat); | |
} else { | |
this.element.value = value; | |
} | |
} | |
/** | |
* implements ControlValueAccessor | |
* @param fn | |
*/ | |
public registerOnChange(fn: (value: any) => any): void { | |
this._onChange = fn; | |
} | |
/** | |
* implements ControlValueAccessor | |
* @param fn | |
*/ | |
public registerOnTouched(fn: () => any): void { | |
this._onTouched = fn; | |
} | |
/** | |
* remove format | |
* | |
* @param {string} target | |
* @memberof TelNoMaskDirective | |
*/ | |
private removeFormat(target: string, format: string): string { | |
return moment(target, format).format(this.editFormat); | |
} | |
/** | |
* implements isDisabled | |
* @param isDisabled | |
*/ | |
public setDisabledState(isDisabled: boolean): void { | |
this.renderer.setProperty(this.element, 'disabled', isDisabled); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
input输入年月日时,自动转换为yyyy年MM月dd日,提交时yyyy-MM-dd格式