nuevo date-picker
This commit is contained in:
Dani Herrero
parent
139579e78f
commit
17186c4035
|
|
@ -20,6 +20,7 @@ import './drop-down/drop-down';
|
|||
import './column-header/column-header';
|
||||
import './grid-header/grid-header';
|
||||
import './multi-check/multi-check';
|
||||
import './datePicker/datePicker';
|
||||
|
||||
export {NAME as BUTTON, directive as ButtonDirective} from './button/button';
|
||||
export {NAME as BUTTON_MDL, factory as buttonMdl} from './button/button.mdl';
|
||||
|
|
@ -37,8 +38,8 @@ export {NAME as SUBMIT, directive as SubmitDirective} from './submit/submit';
|
|||
export {NAME as SUBMIT_MDL, factory as submitMdl} from './submit/submit.mdl';
|
||||
export {NAME as COMBO, directive as ComboDirective} from './combo/combo';
|
||||
export {NAME as COMBO_MDL, factory as comboMdl} from './combo/combo.mdl';
|
||||
export {NAME as DATE_PICKER, directive as DatePickerDirective} from './date-picker/date-picker';
|
||||
export {NAME as DATE_PICKER_MDL, factory as datePickerMdl} from './date-picker/date-picker.mdl';
|
||||
/* export {NAME as DATE_PICKER, directive as DatePickerDirective} from './date-picker/date-picker';
|
||||
export {NAME as DATE_PICKER_MDL, factory as datePickerMdl} from './date-picker/date-picker.mdl';*/
|
||||
export {NAME as CARD, directive as CardDirective} from './card/card';
|
||||
export {NAME as CARD_MDL, factory as cardMdl} from './card/card.mdl';
|
||||
export {NAME as SWITCH, directive as SwitchDirective} from './switch/switch';
|
||||
|
|
|
|||
|
|
@ -26,8 +26,8 @@ export function directive(resolve, normalizer, $translate) {
|
|||
if (!initOptions.locale)
|
||||
initOptions.locale = $translate.use();
|
||||
|
||||
if (!initOptions.dateFormat && initOptions.locale === 'es')
|
||||
initOptions.dateFormat = 'd-m-Y';
|
||||
/*if (!initOptions.dateFormat && initOptions.locale === 'es')
|
||||
initOptions.dateFormat = 'd-m-Y';*/
|
||||
|
||||
if (!input.matches('input'))
|
||||
input = input.querySelector('input');
|
||||
|
|
|
|||
|
|
@ -0,0 +1,21 @@
|
|||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||
<input
|
||||
class="mdl-textfield__input"
|
||||
type="text"
|
||||
name="{{::$ctrl.name}}"
|
||||
ng-model="$ctrl.modelView"
|
||||
ng-disabled="{{!$ctrl.enabled}}"
|
||||
rule="{{::$ctrl.rule}}"/>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="mdl-chip__action ng-hide"
|
||||
tabindex="-1"
|
||||
translate-attr="{title: 'Clear'}"
|
||||
ng-show="$ctrl.modelView"
|
||||
ng-click="$ctrl.onClear()"
|
||||
>
|
||||
<i class="material-icons">clear</i>
|
||||
</button>
|
||||
<label class="mdl-textfield__label" translate>{{::$ctrl.label}}</label>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,162 @@
|
|||
import {module} from '../module';
|
||||
import Component from '../lib/component';
|
||||
import Flatpickr from 'vendor/src/flatpickr';
|
||||
import './style.scss';
|
||||
|
||||
// equivalences to format date between flatpicker and angularjs
|
||||
export const fromatEquivalence = {
|
||||
d: 'dd', // Day of the month, 2 digits with leading zeros (01 to 31)
|
||||
j: 'd', // Day of the month without leading zeros (1 to 31)
|
||||
m: 'MM', // Month in year, padded (01-12)
|
||||
n: 'M', // Month in year (1-12)
|
||||
y: 'yy', // A two digit representation of a year (00-99)
|
||||
Y: 'yyyy', // A full numeric representation of a year, 4 digits (1999 or 2003)
|
||||
H: 'HH', // Hour in AM/PM, padded (01-12)
|
||||
h: 'H', // Hour in AM/PM, (1-12)
|
||||
i: 'mm', // Minutes (00 to 59)
|
||||
s: 'ss' // Seconds (00 to 59)
|
||||
};
|
||||
|
||||
class DatePicker extends Component {
|
||||
constructor($element, $translate, $filter) {
|
||||
super($element);
|
||||
this.input = $element[0].querySelector('input');
|
||||
this.$translate = $translate;
|
||||
this.$filter = $filter;
|
||||
this.enabled = true;
|
||||
this._modelView = '';
|
||||
this._model = undefined;
|
||||
}
|
||||
|
||||
get model() {
|
||||
return this._model;
|
||||
}
|
||||
|
||||
set model(value) {
|
||||
this._model = value;
|
||||
if (value && !this.modelView) {
|
||||
let format = this._formatFlat2Angular(this.iniOpts.dateFormat || 'Y-m-d');
|
||||
this.modelView = this.$filter('date')(value, format);
|
||||
}
|
||||
}
|
||||
|
||||
get modelView() {
|
||||
return this._modelView;
|
||||
}
|
||||
set modelView(value) {
|
||||
this._modelView = value;
|
||||
this._setModel(value);
|
||||
this.mdlUpdate(value);
|
||||
}
|
||||
onClear() {
|
||||
this.modelView = null;
|
||||
}
|
||||
mdlUpdate() {
|
||||
let mdlField = this.element.firstChild.MaterialTextfield;
|
||||
if (mdlField)
|
||||
mdlField.updateClasses_();
|
||||
}
|
||||
|
||||
_formatFlat2Angular(string) { // change string Flatpickr format to angular format (d-m-Y -> dd-MM-yyyy)
|
||||
let aux = string.split(/[.,/ :-]/);
|
||||
let parts = [];
|
||||
aux.forEach(
|
||||
val => {
|
||||
parts.push(fromatEquivalence[val]);
|
||||
}
|
||||
);
|
||||
if (string.indexOf(' ') !== -1) { // datetime format
|
||||
let dates = parts.slice(0, 3).join('-');
|
||||
let hours = parts.slice(3, parts.length).join(':');
|
||||
return `${dates} ${hours}`.trim();
|
||||
} else if (string.indexOf(':') !== -1) { // only time format
|
||||
return parts.join(':');
|
||||
} else { // only date format
|
||||
return parts.join('-');
|
||||
}
|
||||
}
|
||||
|
||||
_setModel(value) {
|
||||
if (!value) {
|
||||
this.model = undefined;
|
||||
} else if (!this.iniOpts.dateFormat || (this.iniOpts.dateFormat && this.iniOpts.dateFormat.startsWith('Y-m-d'))) {
|
||||
this.model = value;
|
||||
} else {
|
||||
let formats = this.iniOpts.dateFormat.split(/[.,/ :-]/);
|
||||
let aux = value.split(/[.,/ :-]/);
|
||||
let date = {};
|
||||
formats.forEach(
|
||||
(k, i) => {
|
||||
if (k.toLowerCase() === 'y') {
|
||||
date.year = aux[i];
|
||||
} else if (k === 'm' || k === 'n') {
|
||||
date.month = aux[i];
|
||||
} else if (k === 'd' || k === 'j') {
|
||||
date.day = aux[i];
|
||||
} else if (k.toLowerCase() === 'h') {
|
||||
date.hour = aux[i];
|
||||
} else if (k === 'i') {
|
||||
date.minutes = aux[i];
|
||||
} else if (k === 's') {
|
||||
date.seccons = aux[i];
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
let dateStr = '';
|
||||
let hourStr = '';
|
||||
|
||||
if (date.year && date.month && date.day) {
|
||||
dateStr = `${date.year}-${date.month}-${date.day}`;
|
||||
}
|
||||
if (date.hour) {
|
||||
hourStr = date.hour;
|
||||
if (date.minutes) {
|
||||
hourStr += ':' + date.minutes;
|
||||
} else {
|
||||
hourStr += ':00';
|
||||
}
|
||||
if (date.seccons) {
|
||||
hourStr += ':' + date.seccons;
|
||||
} else {
|
||||
hourStr += ':00';
|
||||
}
|
||||
}
|
||||
let dateForModel = `${dateStr} ${hourStr}`.trim();
|
||||
if (this.model !== dateForModel)
|
||||
this.model = dateForModel;
|
||||
}
|
||||
}
|
||||
|
||||
$onInit() {
|
||||
if (!this.iniOpts)
|
||||
this.iniOpts = {};
|
||||
|
||||
if (!this.iniOpts.locale)
|
||||
this.iniOpts.locale = this.$translate.use();
|
||||
|
||||
if (!this.iniOpts.dateFormat && this.iniOpts.locale === 'es')
|
||||
this.iniOpts.dateFormat = 'd-m-Y';
|
||||
|
||||
if (this.input)
|
||||
this.vp = new Flatpickr(this.input, this.iniOpts);
|
||||
}
|
||||
$onDestroy() {
|
||||
if (this.vp)
|
||||
this.vp.destroy();
|
||||
}
|
||||
}
|
||||
DatePicker.$inject = ['$element', '$translate', '$filter'];
|
||||
|
||||
module.component('vnDatePicker', {
|
||||
template: require('./datePicker.html'),
|
||||
bindings: {
|
||||
model: '=',
|
||||
label: '@?',
|
||||
name: '@?',
|
||||
enabled: '<?',
|
||||
rule: '<?',
|
||||
iniOpts: '<?'
|
||||
},
|
||||
controller: DatePicker
|
||||
});
|
||||
|
|
@ -92,7 +92,7 @@ export default class ProductionIndex {
|
|||
delete this.child;
|
||||
}
|
||||
searchTickets(filter) {
|
||||
this.filter = Object.assign({}, filter || {}, this.filter);
|
||||
this.filter = Object.assign({}, this.filter, filter || {});
|
||||
|
||||
let filters = Object.assign({}, {
|
||||
where: this.filter
|
||||
|
|
|
|||
Loading…
Reference in New Issue