pruebas con date-picker y material

This commit is contained in:
Dani Herrero 2017-07-12 14:32:15 +02:00
parent 5e41f573f5
commit f2c0dd3ab7
2 changed files with 19 additions and 14 deletions

View File

@ -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>

View File

@ -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'),