pruebas con date-picker y material
This commit is contained in:
parent
5e41f573f5
commit
f2c0dd3ab7
|
@ -1,12 +1,10 @@
|
||||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||||
<input
|
<input type="text"
|
||||||
class="mdl-textfield__input"
|
class="mdl-textfield__input"
|
||||||
type="text"
|
|
||||||
name="{{::$ctrl.name}}"
|
name="{{::$ctrl.name}}"
|
||||||
ng-model="$ctrl.modelView"
|
ng-model="$ctrl.modelView"
|
||||||
ng-disabled="{{!$ctrl.enabled}}"
|
ng-disabled="{{!$ctrl.enabled}}"
|
||||||
rule="{{::$ctrl.rule}}"/>
|
rule="{{::$ctrl.rule}}"/>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
class="mdl-chip__action ng-hide"
|
class="mdl-chip__action ng-hide"
|
||||||
|
@ -17,5 +15,5 @@
|
||||||
>
|
>
|
||||||
<i class="material-icons">clear</i>
|
<i class="material-icons">clear</i>
|
||||||
</button>
|
</button>
|
||||||
<label class="mdl-textfield__label" translate>{{::$ctrl.label}}</label>
|
<label class="mdl-textfield__label">{{::$ctrl.label | translate}}</label>
|
||||||
</div>
|
</div>
|
|
@ -18,11 +18,12 @@ export const fromatEquivalence = {
|
||||||
};
|
};
|
||||||
|
|
||||||
class DatePicker extends Component {
|
class DatePicker extends Component {
|
||||||
constructor($element, $translate, $filter) {
|
constructor($element, $translate, $filter, $timeout) {
|
||||||
super($element);
|
super($element);
|
||||||
this.input = $element[0].querySelector('input');
|
this.input = $element[0].querySelector('input');
|
||||||
this.$translate = $translate;
|
this.$translate = $translate;
|
||||||
this.$filter = $filter;
|
this.$filter = $filter;
|
||||||
|
this.$timeout = $timeout;
|
||||||
this.enabled = true;
|
this.enabled = true;
|
||||||
this._modelView = '';
|
this._modelView = '';
|
||||||
this._model = undefined;
|
this._model = undefined;
|
||||||
|
@ -45,11 +46,16 @@ class DatePicker extends Component {
|
||||||
}
|
}
|
||||||
set modelView(value) {
|
set modelView(value) {
|
||||||
this._modelView = value;
|
this._modelView = value;
|
||||||
|
this.input.value = value;
|
||||||
this._setModel(value);
|
this._setModel(value);
|
||||||
this.mdlUpdate(value);
|
this.$timeout(
|
||||||
|
() => {
|
||||||
|
this.mdlUpdate();
|
||||||
|
}
|
||||||
|
);
|
||||||
}
|
}
|
||||||
onClear() {
|
onClear() {
|
||||||
this.modelView = null;
|
this.modelView = '';
|
||||||
}
|
}
|
||||||
mdlUpdate() {
|
mdlUpdate() {
|
||||||
let mdlField = this.element.firstChild.MaterialTextfield;
|
let mdlField = this.element.firstChild.MaterialTextfield;
|
||||||
|
@ -77,10 +83,11 @@ class DatePicker extends Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
_setModel(value) {
|
_setModel(value) {
|
||||||
|
let model;
|
||||||
if (!value) {
|
if (!value) {
|
||||||
this.model = undefined;
|
model = undefined;
|
||||||
} else if (!this.iniOpts.dateFormat || (this.iniOpts.dateFormat && this.iniOpts.dateFormat.startsWith('Y-m-d'))) {
|
} else if (!this.iniOpts.dateFormat || (this.iniOpts.dateFormat && this.iniOpts.dateFormat.startsWith('Y-m-d'))) {
|
||||||
this.model = value;
|
model = value;
|
||||||
} else {
|
} else {
|
||||||
let formats = this.iniOpts.dateFormat.split(/[.,/ :-]/);
|
let formats = this.iniOpts.dateFormat.split(/[.,/ :-]/);
|
||||||
let aux = value.split(/[.,/ :-]/);
|
let aux = value.split(/[.,/ :-]/);
|
||||||
|
@ -122,10 +129,10 @@ class DatePicker extends Component {
|
||||||
hourStr += ':00';
|
hourStr += ':00';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
let dateForModel = `${dateStr} ${hourStr}`.trim();
|
model = `${dateStr} ${hourStr}`.trim();
|
||||||
if (this.model !== dateForModel)
|
|
||||||
this.model = dateForModel;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
return model;
|
||||||
}
|
}
|
||||||
|
|
||||||
$onInit() {
|
$onInit() {
|
||||||
|
@ -146,7 +153,7 @@ class DatePicker extends Component {
|
||||||
this.vp.destroy();
|
this.vp.destroy();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
DatePicker.$inject = ['$element', '$translate', '$filter'];
|
DatePicker.$inject = ['$element', '$translate', '$filter', '$timeout'];
|
||||||
|
|
||||||
module.component('vnDatePicker', {
|
module.component('vnDatePicker', {
|
||||||
template: require('./datePicker.html'),
|
template: require('./datePicker.html'),
|
||||||
|
|
Loading…
Reference in New Issue