From 17186c40352c2a7b8d341a3485b4ffa19a20b84c Mon Sep 17 00:00:00 2001 From: Dani Herrero Date: Wed, 12 Jul 2017 13:32:25 +0200 Subject: [PATCH] nuevo date-picker --- client/core/src/components.js | 5 +- client/core/src/date-picker/date-picker.js | 4 +- client/core/src/datePicker/datePicker.html | 21 +++ client/core/src/datePicker/datePicker.js | 162 +++++++++++++++++++++ client/production/src/index/index.js | 2 +- 5 files changed, 189 insertions(+), 5 deletions(-) create mode 100644 client/core/src/datePicker/datePicker.html create mode 100644 client/core/src/datePicker/datePicker.js diff --git a/client/core/src/components.js b/client/core/src/components.js index 5694ae8f7..04e5d7287 100644 --- a/client/core/src/components.js +++ b/client/core/src/components.js @@ -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'; diff --git a/client/core/src/date-picker/date-picker.js b/client/core/src/date-picker/date-picker.js index f0a829df4..dd714b0c4 100644 --- a/client/core/src/date-picker/date-picker.js +++ b/client/core/src/date-picker/date-picker.js @@ -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'); diff --git a/client/core/src/datePicker/datePicker.html b/client/core/src/datePicker/datePicker.html new file mode 100644 index 000000000..2730009c3 --- /dev/null +++ b/client/core/src/datePicker/datePicker.html @@ -0,0 +1,21 @@ +
+ + + + +
\ No newline at end of file diff --git a/client/core/src/datePicker/datePicker.js b/client/core/src/datePicker/datePicker.js new file mode 100644 index 000000000..7bd3d2098 --- /dev/null +++ b/client/core/src/datePicker/datePicker.js @@ -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: '