@nbxx/nb-input
Version:
Angular - nbinput
183 lines • 6 kB
JavaScript
import { Component, EventEmitter, forwardRef, Input, Output } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import * as moment from 'moment';
import { NbFieldType } from './nbinput.entity';
export class NbinputDateComponent {
constructor() {
this.FieldType = NbFieldType;
this.config = {
format: 'YYYY-MM-DD',
monthFormat: 'YYYY-MM',
timeFormat: 'HH:mm:ss',
datetimeFormat: 'YYYY-MM-DDTHH:mm:ss',
showMultipleYearsNavigation: true,
locale: moment.locale('zh-cn'),
};
this.calType = {
'date': 'day',
'datetime': 'daytime',
'time': 'time',
'month': 'month',
};
this.formats = {
date: 'YYYY-MM-DD',
month: 'YYYY-MM',
time: 'HH:mm:ss',
datetime: 'YYYY-MM-DD HH:mm:ss'
};
this.onTouchedCallback = () => { };
this.onChangeCallback = (_) => { };
this._raw = null;
this._data = null;
this.placeholder = '点击选择时间';
this._type = NbFieldType.Date;
this.readonly = false;
this.outFormat = 'YYYY-MM-DDTHH:mm:ss.SSSZ';
this.onChange = new EventEmitter();
}
getFormat() {
if (this.format && (typeof this.format == 'string') && this.format.trim().length > 0) {
return this.format.trim();
}
switch (this._type) {
case NbFieldType.Datetime: {
return 'yyyy-MM-dd HH:mm:ss';
}
case NbFieldType.Date: {
return 'yyyy-MM-dd';
}
case NbFieldType.Time: {
return 'HH:mm:ss';
}
case NbFieldType.Month: {
return 'yyyy-MM';
}
}
}
set data(val) {
if (val) {
const obj = moment(val);
if (obj.isValid()) {
this._data = obj.format(this.formats[this.type]);
this._raw = obj;
return;
}
}
this._raw = null;
this._data = null;
}
get data() {
return this._raw && (typeof this._raw.format == 'function') ? this._raw.format(this.outFormat) : null;
}
get value() {
return this.data;
}
;
set value(v) {
this.data = v;
if (this._data != v) {
this.onChangeCallback(this.data);
}
}
onBlur() {
this.onTouchedCallback();
}
set type(tp) {
this._type = tp;
switch (tp) {
case NbFieldType.Time: {
this.config = {
format: 'HH:mm:ss',
locale: moment.locale('zh-cn'),
};
break;
}
case NbFieldType.Month: {
this.config = {
format: 'YYYY-MM',
showMultipleYearsNavigation: true,
locale: moment.locale('zh-cn'),
};
break;
}
case NbFieldType.Datetime: {
this.config = {
format: 'YYYY-MM-DD HH:mm:ss',
showMultipleYearsNavigation: true,
locale: moment.locale('zh-cn'),
};
break;
}
default:
this.config = {
format: 'YYYY-MM-DD',
showMultipleYearsNavigation: true,
locale: moment.locale('zh-cn'),
};
}
}
get type() {
return this._type;
}
// private outFormat = null;
registerOnChange(fn) { this.onChangeCallback = fn; }
registerOnTouched(fn) { this.onTouchedCallback = fn; }
setDisabledState(isDisabled) { this.disabled = isDisabled; }
writeValue(obj) {
this.data = obj;
}
changed(evt) {
if (evt) {
// this.data = this.setDateFormat(evt);
this._raw = evt;
this.onChange.emit(evt.format(this.outFormat));
this.onChangeCallback(evt.format(this.outFormat));
}
else {
this._raw = null;
this.onChange.emit(null);
this.onChangeCallback(null);
}
}
}
NbinputDateComponent.decorators = [
{ type: Component, args: [{
selector: 'nbinput-date',
template: `
<ng-container *ngIf="readonly;else ELSEBLOCK">
<span>{{_data?(_data | date:getFormat()):'-'}}</span>
</ng-container>
<ng-template #ELSEBLOCK>
<input (onChange)="changed($event)"
class="form-control"
[ngClass]="calType[type]"
theme="dp-material"
[mode]="calType[type]"
[placeholder]="placeholder"
[(ngModel)]="_data"
[dpDayPicker]="config"
[disabled]="disabled" />
</ng-template>
`,
styles: [`
[data-hidden="true"]{display:none !important}input.day,input.time{min-width:110px}input.daytime,input.month{min-width:160px}:host /deep/ dp-date-picker{display:inherit}
`],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => NbinputDateComponent),
multi: true
}
]
},] },
];
NbinputDateComponent.propDecorators = {
format: [{ type: Input }],
data: [{ type: Input }],
disabled: [{ type: Input }],
placeholder: [{ type: Input }],
type: [{ type: Input }],
readonly: [{ type: Input }],
onChange: [{ type: Output }]
};
//# sourceMappingURL=nbinput-date.component.js.map