pui9-components 1.17.3 → 2.0.7

package/src/components/PuiDateField.vue

@@ -6,91 +6,84 @@
 				<v-flex xs12>
 					<label v-if="getLabel === '$nbsp;'">&nbsp;</label>
 					<label v-else :class="getLabelRequiredClass">{{ getLabel }}</label>
-					<v-tooltip top v-if="showTooltip">
-						<template v-slot:activator="{ on, attrs }">
-							<v-icon class="info-tooltip" size="14" v-bind="attrs" v-on="on">fas fa-info-circle info-tooltip</v-icon>
-						</template>
-						<span>
-							<span v-if="this.description !== ''">
-								{{ this.description }}
-								<hr v-if="this.infoTooltipMessages.length > 0" />
-							</span>
-							<ul>
-								<li v-for="(message, index) in this.infoTooltipMessages" :key="index">{{ message }}</li>
-							</ul>
-						</span>
-					</v-tooltip>
+					<pui-form-tooltip v-bind="{ tooltipDescription, tooltipIcon }" v-if="showTooltip" ref="tooltip"></pui-form-tooltip>
 				</v-flex>
 			</v-layout>
 			<v-layout>
 				<v-flex xs12>
 					<v-layout>
-						<v-flex :xs8="showTime" :xs12="!showTime">
+						<v-flex :xs7="showTime" :xs12="!showTime">
 							<!-- use attach on v-menu but it does not working at the moment... -->
 							<!-- :attach="`#${attach !== null ? attach : defaultId}`" -->
 							<v-menu
 								:close-on-content-click="false"
-								v-model="modelMenu"
+								v-model="dateMenuModel"
 								:nudge-right="40"
 								transition="scale-transition"
 								offset-y
 								min-width="290px"
 								:disabled="disabled"
+								:key="refresher"
 								><template v-slot:activator="{ on, attrs }">
 									<v-text-field
+										:ref="`dateField${attach !== null ? attach : defaultId}`"
 										:id="`${attach !== null ? attach : defaultId}`"
 										v-on="on"
 										v-bind="attrs"
-										v-model="internalDateModel"
-										:class="getEditedClass"
+										v-model="internalDateFieldModel"
+										:class="getEditedDateClass"
 										:rules="getDateRules"
 										append-icon="far fa-calendar-day"
+										clearable
 										solo
 										outlined
 										flat
 										:readonly="disableTextInput"
 										:disabled="disabled"
-										:mask="getMask"
-										:error="internalError"
-										:error-messages="internalErrorMessage"
-										@input="updateDateField"
-										@blur="checkDateSizeEqual6AndReplace"
-										@click:append="modelMenu = true"
+										:mask="getDateMask"
+										:error="internalDateError"
+										:error-messages="internalDateErrorMessage"
 										:placeholder="getDatePlaceholder"
+										@input="updateDateFieldModel"
+										@click:append="dateMenuModel = true"
+										@click:clear="internalDatePickerModel = null"
+										@focus="allValidations()"
 									></v-text-field>
 								</template>
 								<v-date-picker
-									v-model="internalPickerModel"
+									v-model="internalDatePickerModel"
 									:first-day-of-week="1"
 									:locale="getLocale"
 									v-bind="allProps"
 									:disabled="disabled"
-									:min="minValue"
-									:max="maxValue"
+									:min="minDateValue"
+									:max="maxDateValue"
 									color="var(--primarycolor)"
 								></v-date-picker>
 							</v-menu>
 						</v-flex>
-						<v-flex :xs4="showTime" :xs0="!showTime">
+						<v-flex :xs5="showTime" :xs0="!showTime">
 							<v-menu
 								v-if="showTime"
 								:close-on-content-click="false"
-								v-model="modelMenuTime"
+								v-model="timeMenuModel"
 								:nudge-right="40"
 								transition="scale-transition"
 								offset-y
 								min-width="150px"
 								:disabled="disabled"
+								:key="refresher"
 							>
 								<template v-slot:activator="{ on, attrs }">
 									<v-text-field
 										v-on="on"
 										v-bind="attrs"
 										:ref="`timeField${attach !== null ? attach : defaultId}`"
-										v-model="internalTimeModel"
-										:class="getEditedClass"
+										v-model="internalTimeFieldModel"
+										:class="getEditedTimeClass"
 										:rules="getTimeRules"
 										append-icon="fa-clock"
+										clearable
 										solo
 										outlined
 										flat
@@ -98,23 +91,28 @@
 										:disabled="disabled"
 										class="ml-1"
 										:mask="getTimeMask"
-										:error="internalError"
-										@input="updateTimeField"
-										@click:append="modelMenuTime = true"
+										:error="internalTimeError"
+										:error-messages="internalTimeErrorMessage"
 										:placeholder="getTimePlaceholder"
+										@input="updateTimeFieldModel"
+										@click:append="timeMenuModel = true"
+										@click:clear="internalTimePickerModel = null"
+										@focus="allValidations()"
 									></v-text-field>
 								</template>
 								<v-time-picker
-									v-if="modelMenuTime"
-									v-model="internalTimeModel"
+									v-if="timeMenuModel"
+									v-model="internalTimePickerModel"
 									v-bind="allProps"
 									:disabled="disabled"
-									:min="minTimeValue"
-									:max="maxTimeValue"
+									:min="minTimeValueForPicker"
+									:max="maxTimeValueForPicker"
 									format="24hr"
 									:use-seconds="timesecs"
 									color="var(--primarycolor)"
-									@input="updateTimeField"
+									@click:hour="timeMenuModel = true"
+									@click:minute="timeMenuModel = timesecs"
+									@click:second="timeMenuModel = false"
 								></v-time-picker>
 							</v-menu>
 						</v-flex>
@@ -126,74 +124,65 @@
 			<v-layout>
 				<v-flex :class="labelColumnStyles ? labelColumnStyles : 'xs12 sm6 md4 xl3'">
 					<label :class="getLabelRequiredClass">{{ getLabel }}</label>
-					<v-tooltip top v-if="showTooltip">
-						<template v-slot:activator="{ on, attrs }">
-							<v-icon class="info-tooltip" size="14" v-bind="attrs" v-on="on">fas fa-info-circle info-tooltip</v-icon>
-						</template>
-						<span>
-							<span v-if="this.description !== ''">
-								{{ this.description }}
-								<hr v-if="this.infoTooltipMessages.length > 0" />
-							</span>
-							<ul>
-								<li v-for="(message, index) in this.infoTooltipMessages" :key="index">{{ message }}</li>
-							</ul>
-						</span>
-					</v-tooltip>
+					<pui-form-tooltip v-bind="{ tooltipDescription, tooltipIcon }" v-if="showTooltip" ref="tooltip"></pui-form-tooltip>
 				</v-flex>
 				<v-flex :class="valueColumnStyles ? valueColumnStyles : 'xs12 sm6 md8 xl9'">
 					<v-layout>
-						<v-flex :xs8="showTime" :xs12="!showTime">
+						<v-flex :xs7="showTime" :xs12="!showTime">
 							<v-menu
 								:close-on-content-click="false"
-								v-model="modelMenu"
+								v-model="dateMenuModel"
 								:nudge-right="40"
 								transition="scale-transition"
 								offset-y
 								min-width="290px"
 								:disabled="disabled"
+								:key="refresher"
 							>
 								<template v-slot:activator="{ on, attrs }">
 									<v-text-field
+										:ref="`dateField${attach !== null ? attach : defaultId}`"
 										:id="`${attach !== null ? attach : defaultId}`"
 										v-on="on"
 										v-bind="attrs"
-										v-model="internalDateModel"
-										:class="getEditedClass"
+										v-model="internalDateFieldModel"
+										:class="getEditedDateClass"
+										class="ml-2"
 										:rules="getDateRules"
 										append-icon="far fa-calendar-day"
+										clearable
 										solo
 										outlined
 										flat
 										:readonly="disableTextInput"
 										:disabled="disabled"
-										:mask="getMask"
-										:error="internalError"
-										:error-messages="internalErrorMessage"
-										@input="updateDateField"
-										@blur="checkDateSizeEqual6AndReplace"
-										@click:append="modelMenu = true"
+										:mask="getDateMask"
+										:error="internalDateError"
+										:error-messages="internalDateErrorMessage"
 										:placeholder="getDatePlaceholder"
-										class="ml-2"
+										@input="updateDateFieldModel"
+										@click:append="dateMenuModel = true"
+										@click:clear="internalDatePickerModel = null"
+										@focus="allValidations()"
 									></v-text-field>
 								</template>
 								<v-date-picker
-									v-model="internalPickerModel"
+									v-model="internalDatePickerModel"
 									:first-day-of-week="1"
 									:locale="getLocale"
 									v-bind="allProps"
 									:disabled="disabled"
-									:min="minValue"
-									:max="maxValue"
+									:min="minDateValue"
+									:max="maxDateValue"
 									color="var(--primarycolor)"
 								></v-date-picker>
 							</v-menu>
 						</v-flex>
-						<v-flex :xs4="showTime" :xs0="!showTime">
+						<v-flex :xs5="showTime" :xs0="!showTime">
 							<v-menu
 								v-if="showTime"
 								:close-on-content-click="false"
-								v-model="modelMenuTime"
+								v-model="timeMenuModel"
 								:nudge-right="40"
 								transition="scale-transition"
 								offset-y
@@ -205,34 +194,40 @@
 										v-on="on"
 										v-bind="attrs"
 										:ref="`timeField${attach !== null ? attach : defaultId}`"
-										v-model="internalTimeModel"
-										:class="getEditedClass"
+										v-model="internalTimeFieldModel"
+										:class="getEditedTimeClass"
+										class="ml-1"
 										:rules="getTimeRules"
 										append-icon="fa-clock"
+										clearable
 										solo
 										outlined
 										flat
 										:readonly="disableTextInput"
 										:disabled="disabled"
-										class="ml-1"
 										:mask="getTimeMask"
-										:error="internalError"
-										@input="updateTimeField"
-										@click:append="modelMenuTime = true"
+										:error="internalTimeError"
+										:error-messages="internalTimeErrorMessage"
 										:placeholder="getTimePlaceholder"
+										@input="updateTimeFieldModel"
+										@click:append="timeMenuModel = true"
+										@click:clear="internalTimePickerModel = null"
+										@focus="allValidations()"
 									></v-text-field>
 								</template>
 								<v-time-picker
-									v-if="modelMenuTime"
-									v-model="internalTimeModel"
+									v-if="timeMenuModel"
+									v-model="internalTimePickerModel"
 									v-bind="allProps"
 									:disabled="disabled"
-									:min="minTimeValue"
-									:max="maxTimeValue"
+									:min="minTimeValueForPicker"
+									:max="maxTimeValueForPicker"
 									format="24hr"
 									:use-seconds="timesecs"
 									color="var(--primarycolor)"
-									@input="updateTimeField"
+									@click:hour="timeMenuModel = true"
+									@click:minute="timeMenuModel = timesecs"
+									@click:second="timeMenuModel = false"
 								></v-time-picker>
 							</v-menu>
 						</v-flex>
@@ -249,41 +244,44 @@
 					<v-flex :xs7="showTime" :xs12="!showTime">
 						<v-menu
 							:close-on-content-click="false"
-							v-model="modelMenu"
+							v-model="dateMenuModel"
 							:nudge-right="40"
 							transition="scale-transition"
 							offset-y
 							min-width="290px"
 							:disabled="disabled"
+							:key="refresher"
 							><template v-slot:activator="{ on, attrs }">
 								<v-text-field
+									:ref="`dateField${attach !== null ? attach : defaultId}`"
 									:id="`${attach !== null ? attach : defaultId}`"
 									v-on="on"
 									v-bind="attrs"
-									v-model="internalDateModel"
+									v-model="internalDateFieldModel"
 									append-icon="far fa-calendar-day"
 									:class="getMobileClass"
 									:rules="getDateRules"
 									class="v-text-field--mobile"
 									:disabled="disabled"
 									:label="getLabel"
-									:mask="getMask"
-									:error="internalError"
-									:error-messages="internalErrorMessage"
-									@input="updateDateField"
-									@blur="checkDateSizeEqual6AndReplace"
-									@click:append="modelMenu = true"
+									:mask="getDateMask"
+									:error="internalDateError"
+									:error-messages="internalDateErrorMessage"
 									:placeholder="getDatePlaceholder"
+									@input="updateDateFieldModel"
+									@click:append="dateMenuModel = true"
+									@click:clear="internalDatePickerModel = null"
+									@focus="allValidations()"
 								></v-text-field>
 							</template>
 							<v-date-picker
-								v-model="internalPickerModel"
+								v-model="internalDatePickerModel"
 								:first-day-of-week="1"
 								:locale="getLocale"
 								v-bind="allProps"
 								:disabled="disabled"
-								:min="minValue"
-								:max="maxValue"
+								:min="minDateValue"
+								:max="maxDateValue"
 								color="var(--primarycolor)"
 							></v-date-picker>
 						</v-menu>
@@ -292,7 +290,7 @@
 						<v-menu
 							v-if="showTime"
 							:close-on-content-click="false"
-							v-model="modelMenuTime"
+							v-model="timeMenuModel"
 							:nudge-right="40"
 							transition="scale-transition"
 							offset-y
@@ -304,30 +302,35 @@
 									v-on="on"
 									v-bind="attrs"
 									:ref="`timeField${attach !== null ? attach : defaultId}`"
-									v-model="internalTimeModel"
-									:class="getEditedClass"
+									v-model="internalTimeFieldModel"
+									:class="getEditedTimeClass"
+									class="ml-1"
 									:rules="getTimeRules"
 									append-icon="fa-clock"
-									class="ml-1"
 									:disabled="disabled"
 									:mask="getTimeMask"
-									:error="internalError"
-									@input="updateTimeField"
-									@click:append="modelMenuTime = true"
+									:error="internalTimeError"
+									:error-messages="internalTimeErrorMessage"
 									:placeholder="getTimePlaceholder"
+									@input="updateTimeFieldModel"
+									@click:append="timeMenuModel = true"
+									@click:clear="internalTimePickerModel = null"
+									@focus="allValidations()"
 								></v-text-field>
 							</template>
 							<v-time-picker
-								v-if="modelMenuTime"
-								v-model="internalTimeModel"
+								v-if="timeMenuModel"
+								v-model="internalTimePickerModel"
 								v-bind="allProps"
 								:disabled="disabled"
-								:min="minTimeValue"
-								:max="maxTimeValue"
+								:min="minTimeValueForPicker"
+								:max="maxTimeValueForPicker"
 								format="24hr"
 								:use-seconds="timesecs"
 								color="var(--primarycolor)"
-								@input="updateTimeField"
+								@click:hour="timeMenuModel = true"
+								@click:minute="timeMenuModel = timesecs"
+								@click:second="timeMenuModel = false"
 							></v-time-picker>
 						</v-menu>
 					</v-flex>
@@ -338,28 +341,13 @@
 </template>
 
 <script>
+import moment from 'moment';
 import PuiFormComponentMixin from '../mixins/PuiFormComponentMixin';
 import dateTimeUtils from '../dateTimeUtils';
 
 export default {
 	name: 'PuiDateField',
 	mixins: [PuiFormComponentMixin],
-	data: () => ({
-		defaultId: `id_${Math.random().toString().replace('.', '')}`,
-		internalModel: null,
-		internalPickerModel: null,
-		internalDateModel: null,
-		internalTimeModel: null,
-		initialDateValue: null,
-		initialTimeValue: null,
-		modelMenu: false,
-		modelMenuTime: false,
-		dateSeparator: '',
-		internalDateFormat: 'YYYY-MM-DD',
-		internalMask: '##/##/####',
-		internalErrorMessage: '',
-		infoTooltipMessages: []
-	}),
 	props: {
 		disableTextInput: {
 			type: Boolean,
@@ -367,7 +355,7 @@ export default {
 			required: false
 		},
 		value: {
-			type: [Number, String],
+			type: [Number, Date, String],
 			required: false
 		},
 		today: {
@@ -382,12 +370,15 @@ export default {
 		},
 		tooltip: {
 			type: Boolean,
-			default: false,
+			required: false,
+			default: false
+		},
+		tooltipDescription: {
+			type: String,
 			required: false
 		},
-		description: {
+		tooltipIcon: {
 			type: String,
-			default: '',
 			required: false
 		},
 		timesecs: {
@@ -406,16 +397,11 @@ export default {
 			required: false
 		},
 		min: {
-			type: [Number, String],
+			type: [Number, Date, String],
 			required: false
 		},
 		max: {
-			type: [Number, String],
-			required: false
-		},
-		noLazyModel: {
-			type: Boolean,
-			default: false,
+			type: [Number, Date, String],
 			required: false
 		},
 		labelColumnStyles: {
@@ -432,424 +418,78 @@ export default {
 			required: false
 		}
 	},
-	methods: {
-		getInfoTooltip() {
-			this.infoTooltipMessages = [];
-			if (this.time) {
-				this.infoTooltipMessages.push(this.$t('pui9.components.dateField.tooltipFormat') + this.isoDateFormatComp + ' HH:mm');
-			} else if (this.timesecs) {
-				this.infoTooltipMessages.push(this.$t('pui9.components.dateField.tooltipFormat') + this.isoDateFormatComp + ' HH:mm:ss');
-			} else {
-				this.infoTooltipMessages.push(this.$t('pui9.components.dateField.tooltipFormat') + this.isoDateFormatComp);
-			}
-
-			if (this.max) {
-				let format = '';
-				if (this.time) {
-					format = this.isoDateFormatComp + ' HH:mm';
-				} else if (this.timesecs) {
-					format = this.isoDateFormatComp + ' HH:mm:ss';
-				} else {
-					format = this.isoDateFormatComp;
-				}
-				var localMaxDate = dateTimeUtils.getLocalFormattedDate(this.max, format);
-				this.infoTooltipMessages.push(this.$t('pui9.components.dateField.tooltipMaxDate') + localMaxDate);
-			}
-			if (this.min) {
-				let format = '';
-				if (this.time) {
-					format = this.isoDateFormatComp + ' HH:mm';
-				} else if (this.timesecs) {
-					format = this.isoDateFormatComp + ' HH:mm:ss';
-				} else {
-					format = this.isoDateFormatComp;
-				}
-				var localMinDate = dateTimeUtils.getLocalFormattedDate(this.min, format);
-				this.infoTooltipMessages.push(this.$t('pui9.components.dateField.tooltipMinDate') + localMinDate);
-			}
-		},
-		giveBackUTCDate(dateStr) {
-			if (dateStr) {
-				var local = dateTimeUtils.getLocalDate(dateStr);
-
-				if (local) {
-					var utc = dateTimeUtils.getUTCDate(local);
-					return utc;
-				}
-			}
-			return null;
-		},
-		/**
-		 * Este metodo se utiliza para cuando se han introducido el dia y el mes, y el año solo con dos cifras, al cambiar el blur a otro campo del formulario,
-		 * Cambia el año de dos cifras a 20 + las dos cifras -> 19 a 2019
-		 */
-		checkDateSizeEqual6AndReplace() {
-			const val = this.internalDateModel;
-			if (val && val.length && val.length === 6) {
-				const day = val.substring(0, 2);
-				const month = val.substring(2, 4);
-				const year2Digits = val.substring(4);
-				const dateToReplace = `${day}/${month}/20${year2Digits}`;
-				const d = this.parseDateToISO(dateToReplace);
-				if (this.validateDate(d) === true) {
-					this.internalDateModel = dateTimeUtils.getLocalFormattedDate(d, this.isoDateFormatComp);
-					this.internalPickerModel = dateTimeUtils.getLocalFormattedDate(d, this.internalDateFormat);
-				}
-			}
-		},
-		updateDateField(val) {
-			if (val === null || val === '') {
-				this.internalModel = null;
-				this.internalDateModel = null;
-				this.internalPickerModel = null;
-				this.clearErrorMessages();
-				if (this.required) {
-					this.showRequiredDateMessage();
-				}
-			} else if (val.length === 10) {
-				this.clearErrorMessages();
-				var d = this.parseDateToISO(val);
-				this.validateDate(d);
-				this.internalDateModel = dateTimeUtils.getLocalFormattedDate(d, this.isoDateFormatComp);
-				this.internalPickerModel = dateTimeUtils.getLocalFormattedDate(d, this.internalDateFormat);
-				this.updateInternalModel(this.internalPickerModel, this.internalTimeModel);
-				if (this.showTime && this.internalTimeModel) {
-					this.updateTimeField(this.internalTimeModel);
-				}
-				this.modelMenu = false;
-			} else {
-				if (val.length === 0 && this.required === false) {
-					this.clearErrorMessages();
-				} else {
-					this.showErrorDateMessage();
-				}
-			}
-		},
-		updateTimeField(val) {
-			if (val === null || val === '') {
-				this.clearErrorMessages();
-				if (this.required) {
-					this.showRequiredDateMessage();
-				}
-			} else if (val.length > 0) {
-				var t = this.parseTimeToISO(val);
-
-				var timeValidated = this.validateTime(t);
-				if (timeValidated) {
-					this.internalTimeModel = t;
-					this.updateInternalModel(this.internalPickerModel, t);
-				}
-			} else {
-				if (val.length === 0 && this.required === false) {
-					this.clearErrorMessages();
-				} else {
-					this.showErrorTimeMessage();
-				}
-			}
-		},
-		parseDateToISO(date) {
-			if (date) {
-				var year = '';
-				var month = '';
-				var day = '';
-				var j = 0;
-				for (var i = 0, length = this.isoDateFormatComp.length; i < length; i++) {
-					var c = this.isoDateFormatComp.charAt(i);
-					if (c === 'Y') {
-						year += date.charAt(j);
-					} else if (c === 'M') {
-						month += date.charAt(j);
-					} else if (c === 'D') {
-						day += date.charAt(j);
-					}
-					j++;
-				}
-				return year + '-' + month + '-' + day;
-			}
-			return null;
-		},
-		parseTimeToISO(time) {
-			if (time) {
-				if (time.indexOf(':') !== -1) {
-					return time;
-				}
-				var mask = this.getTimeMask;
-				var t = '';
-				var j = 0;
-				for (var i = 0, length = mask.length; i < length; i++) {
-					var c = mask.charAt(i);
-					var v = time.charAt(j);
-					if (v && v.length > 0) {
-						if (c !== ':') {
-							t += v;
-							j++;
-						} else {
-							t += ':';
-						}
-					} else {
-						t += 'x';
-						j++;
-					}
-				}
-				return t;
-			}
-			return null;
-		},
-		getOffset() {
-			var offset = dateTimeUtils.getUTCOffset();
-			if (offset === 0) {
-				return '+00:00';
-			}
-			var hour = offset / 60;
-			if (hour) {
-				if (hour && hour.toString().length === 1) {
-					if (hour > 0) {
-						return '+0' + hour + ':00';
-					} else {
-						return '-0' + hour + ':00';
-					}
-				} else if (hour && hour.toString().length === 2) {
-					if (hour > 0) {
-						return '+' + hour + ':00';
-					} else {
-						return '-' + hour + ':00';
-					}
-				}
-			}
-			return '';
-		},
-		createLocalDateToUTC(date) {
-			if (!this.time && !this.timesecs) {
-				return dateTimeUtils.getLocalDate(date);
-			} else {
-				var dt = date.split(' ');
-				if (dt.length === 2) {
-					var isoTime = this.parseTimeToISO(dt[1]);
-					if (isoTime.length === 5) {
-						isoTime += ':00';
-					}
-					var offset = this.getOffset();
-					var dateLocal = dt[0] + ' ' + isoTime + '' + offset;
-					return dateLocal;
-				} else {
-					return null;
-				}
-			}
-		},
-		validateDate(date) {
-			if (date) {
-				var okDate = dateTimeUtils.isLocalDateValid(date);
-				var okMinMaxDate = this.validateMinMaxDate(date);
-				this.getInfoTooltip();
-				if (okDate && okMinMaxDate) {
-					this.clearErrorMessages();
-					return true;
-				} else if (!okDate) {
-					this.showErrorDateMessage();
-					return false;
-				} else if (!okMinMaxDate) {
-					this.showErrorMinMaxDateMessage();
-					return false;
-				}
-			} else {
-				if (this.required) {
-					this.showRequiredDateMessage();
-				}
-				return false;
-			}
-		},
-		validateMinMaxDate(date) {
-			if (!date && !this.required) {
-				return true;
-			}
-			let validateMinMaxFormat = this.internalDateFormat;
-			if (this.time && date.length > 10) {
-				validateMinMaxFormat += ' ' + this.isoTimeFormatComp;
-			}
-			if (this.max) {
-				const maxFormatted = dateTimeUtils.getLocalFormattedDate(this.max, validateMinMaxFormat);
-				const after = dateTimeUtils.isLocalDateAfter(date, maxFormatted);
-				if (after) {
-					return false;
-				}
-			}
-			if (this.min) {
-				const minFormatted = dateTimeUtils.getLocalFormattedDate(this.min, validateMinMaxFormat);
-				const before = dateTimeUtils.isLocalDateBefore(date, minFormatted);
-				if (before) {
-					return false;
-				}
-			}
-			return true;
+	data: () => ({
+		debug: false,
+		defaultId: `id_${Math.random().toString().replace('.', '')}`,
+		firstLoad: true,
+		internalUTCModel: null,
+		internalDatePickerModel: null,
+		internalDateFieldModel: null,
+		internalTimePickerModel: null,
+		internalTimeFieldModel: null,
+		initialDateValue: null,
+		initialTimeValue: null,
+		dateMenuModel: false,
+		timeMenuModel: false,
+		internalDatePickerFormat: 'YYYY-MM-DD',
+		internalDateError: false,
+		internalTimeError: false,
+		internalDateErrorMessage: '',
+		internalTimeErrorMessage: '',
+		refresher: 0
+	}),
+	computed: {
+		minDateValue() {
+			return this.min ? moment(this.min).format(this.internalDatePickerFormat) : null;
 		},
-		validateTime(time) {
-			if (this.time || this.timesecs) {
-				var t = this.internalPickerModel + ' ' + time;
-				var okTime = dateTimeUtils.isLocalDateValid(t);
-				if (okTime) {
-					this.clearErrorMessages();
-					return true;
-				}
-				this.showErrorTimeMessage();
-				return false;
-			}
+		maxDateValue() {
+			return this.max ? moment(this.max).format(this.internalDatePickerFormat) : null;
 		},
-		showErrorDateMessage() {
-			this.internalError = true;
-			this.internalErrorMessage =
-				this.$t('pui9.components.dateField.errorDate') +
-				',' +
-				this.$t('pui9.components.dateField.correctFormat') +
-				' ' +
-				this.isoDateFormatComp;
+		minTimeValueForPicker() {
+			return this.min && this.minDateSameDay ? moment(this.min).format(this.ISOtimeFormat) : null;
 		},
-		showRequiredDateMessage() {
-			this.internalError = true;
-			this.internalErrorMessage = this.requiredMessage;
+		maxTimeValueForPicker() {
+			return this.max && this.maxDateSameDay ? moment(this.max).format(this.ISOtimeFormat) : null;
 		},
-		showErrorMinMaxDateMessage() {
-			this.internalError = true;
-			let dateformat = this.isoDateFormatComp;
-			if (this.time) {
-				dateformat += ' ' + this.isoTimeFormatComp;
-			}
-			var min = dateTimeUtils.getLocalFormattedDate(this.min, dateformat);
-			var max = dateTimeUtils.getLocalFormattedDate(this.max, dateformat);
-			if (this.min && this.max) {
-				this.internalErrorMessage =
-					this.$t('pui9.components.dateField.errorRangeDate') + min + ' ' + this.$t('pui9.components.dateField.and') + ' ' + max;
-			} else if (this.min && !this.max) {
-				this.internalErrorMessage = this.$t('pui9.components.dateField.errorMinDate') + min;
-			} else {
-				this.internalErrorMessage = this.$t('pui9.components.dateField.errorMaxDate') + max;
-			}
+		minTimeValueForValidation() {
+			return this.min ? moment(this.min).format(this.ISOtimeFormat) : null;
 		},
-		showErrorTimeMessage() {
-			this.internalError = true;
-			this.internalErrorMessage = this.$t('pui9.components.dateField.errorTime');
+		maxTimeValueForValidation() {
+			return this.max ? moment(this.max).format(this.ISOtimeFormat) : null;
 		},
-		clearErrorMessages() {
-			this.internalError = false;
-			this.internalErrorMessage = '';
+		minDateSameDay() {
+			return this.min ? this.internalDatePickerModel == this.minDateValue : null;
 		},
-		buildMaskFromCurrentDateFormat() {
-			if (!this.isoDateFormatComp) {
-				return null;
-			}
-
-			// mask
-			var mask = this.isoDateFormatComp.replace(/Y/g, '#');
-			mask = mask.replace(/M/g, '#');
-			mask = mask.replace(/D/g, '#');
-			this.internalMask = mask;
-			// separator
-			for (let index = 0, length = this.internalMask.length; index < length; index++) {
-				const char = this.internalMask.charAt(index);
-				if (char !== '#') {
-					this.dateSeparator = char;
-					break;
-				}
-			}
+		maxDateSameDay() {
+			return this.max ? this.internalDatePickerModel == this.maxDateValue : null;
 		},
-		initializeModel(value) {
-			if (value !== null && value !== undefined) {
-				this.internalPickerModel = dateTimeUtils.getLocalFormattedDate(value, this.internalDateFormat); // iSO FORMAT
-				this.internalDateModel = dateTimeUtils.getLocalFormattedDate(value, this.isoDateFormatComp);
-				this.internalTimeModel = '00:00:00';
-				if (this.time) {
-					this.internalTimeModel = dateTimeUtils.getLocalFormattedDate(value, 'HH:mm');
-				}
-				if (this.timesecs) {
-					this.internalTimeModel = dateTimeUtils.getLocalFormattedDate(value, 'HH:mm:ss');
-				}
-				this.firstLazyLoad = true;
-				this.initialDateValue = this.internalDateModel;
-				this.initialTimeValue = this.internalTimeModel;
-			} else if (this.today) {
-				this.internalPickerModel = dateTimeUtils.getLocalDateNow();
-				this.internalDateModel = dateTimeUtils.getLocalDateNow(this.isoDateFormatComp);
-				this.internalTimeModel = '00:00:00';
-				if (this.time) {
-					this.internalTimeModel = dateTimeUtils.getLocalTimeNow('HH:mm');
-				}
-				if (this.timesecs) {
-					this.internalTimeModel = dateTimeUtils.getLocalTimeNow();
-				}
-				this.firstLazyLoad = true;
-				this.initialDateValue = this.internalDateModel;
-				this.initialTimeValue = this.internalTimeModel;
-			}
+		minDateValidation() {
+			this.debug && console.log('minDateValidation ' + this.label, moment(this.internalDatePickerModel));
+			this.debug && console.log('minDateValidation ' + this.label, moment(this.minDateValue));
+			return this.min ? this.minDateSameDay || moment(this.internalDatePickerModel).isSame(moment(this.minDateValue)) || moment(this.internalDatePickerModel).isAfter(moment(this.minDateValue)) : null;
 		},
-		updateInternalModel(date, time) {
-			var totaldate = date;
-			if (this.time || this.timesecs) {
-				if (!time) {
-					time = '00:00:00';
-				}
-				totaldate += ' ' + time;
-			}
-			this.internalModel = totaldate;
-		},
-		reverseDateIso(date) {
-			if (date) {
-				var year = '';
-				var month = '';
-				var day = '';
-				var j = 0;
-				for (let i = 0, length = this.isoDateFormatComp.length; i < length; i++) {
-					const c = this.isoDateFormatComp.charAt(i);
-					if (c === 'Y') {
-						year += date.charAt(j);
-						j++;
-					} else if (c === 'M') {
-						month += date.charAt(j);
-						j++;
-					} else if (c === 'D') {
-						day += date.charAt(j);
-						j++;
-					} else {
-						j++;
-					}
-				}
-				return year + '-' + month + '-' + day;
-			}
-			return null;
+		maxDateValidation() {
+			this.debug && console.log('maxDateValidation ' + this.label, moment(this.internalDatePickerModel));
+			this.debug && console.log('maxDateValidation ' + this.label, moment(this.maxDateValue));
+			return this.max ? this.maxDateSameDay || moment(this.internalDatePickerModel).isSame(moment(this.maxDateValue)) || moment(this.internalDatePickerModel).isBefore(moment(this.maxDateValue)) : null;
 		},
-		removeSeparator(date) {
-			if (date) {
-				var d = '';
-				for (let i = 0, length = date.length; i < length; i++) {
-					const c = date.charAt(i);
-					if (c !== this.dateSeparator) {
-						d += c;
-					}
-				}
-				return d;
-			}
-			return date;
-		}
-	},
-	computed: {
-		minValue() {
-			return this.min != null ? dateTimeUtils.getLocalFormattedDate(this.min, this.internalDateFormat) : null;
-		},
-		maxValue() {
-			return this.max != null ? dateTimeUtils.getLocalFormattedDate(this.max, this.internalDateFormat) : null;
+		minTimeValidation() {
+			let prefix = this.internalDatePickerModel ? this.internalDatePickerModel + 'T' : Date() + 'T';
+			this.debug && console.log('minTimeValidation ' + this.label, moment(prefix + this.internalTimePickerModel));
+			this.debug && console.log('minTimeValidation ' + this.label, moment(this.minDateValue + 'T' + this.minTimeValueForValidation));
+			return this.min ? moment(prefix + this.internalTimePickerModel).isSame(moment(this.minDateValue + 'T' + this.minTimeValueForValidation)) || moment(prefix + this.internalTimePickerModel).isAfter(moment(this.minDateValue + 'T' + this.minTimeValueForValidation)) : null;
 		},
-		minTimeValue() {
-			return this.min != null ? dateTimeUtils.getLocalFormattedDate(this.min, this.isoTimeFormatComp) : null;
+		maxTimeValidation() {
+			let prefix = this.internalDatePickerModel ? this.internalDatePickerModel + 'T' : Date() + 'T';
+			this.debug && console.log('maxTimeValidation ' + this.label, moment(prefix + this.internalTimePickerModel));
+			this.debug && console.log('maxTimeValidation ' + this.label, moment(this.maxDateValue + 'T' + this.maxTimeValueForValidation));
+			return this.max ? moment(prefix + this.internalTimePickerModel).isSame(moment(this.maxDateValue + 'T' + this.maxTimeValueForValidation)) || moment(prefix + this.internalTimePickerModel).isBefore(moment(this.maxDateValue + 'T' + this.maxTimeValueForValidation)) : null;
 		},
-		maxTimeValue() {
-			return this.max != null ? dateTimeUtils.getLocalFormattedDate(this.max, this.isoTimeFormatComp) : null;
+		ISOdateFormat() {
+			return this.isoDateFormat || (this.$store && this.$store.getters && this.$store.getters.dateFormat) || 'DD/MM/YYYY';
 		},
-		isoDateFormatComp() {
-			if (this.isoDateFormat !== undefined) {
-				return this.isoDateFormat;
-			}
-			return (this.$store && this.$store.getters && this.$store.getters.dateFormat) || 'DD/MM/YYYY';
-		},
-		isoTimeFormatComp() {
-			return (this.$store && this.$store.getters && this.$store.getters.timeFormat) || 'HH:mm';
+		ISOtimeFormat() {
+			return this.timesecs ? 'HH:mm:ss' : 'HH:mm'; // (this.$store && this.$store.getters && this.$store.getters.timeFormat)
 		},
 		getDateRules() {
 			const rules = [...this.rules];
@@ -857,7 +497,7 @@ export default {
 				var func = (value) => !!value || this.requiredMessage;
 				rules.push(func);
 			}
-			var func2 = () => !this.internalError || this.internalErrorMessage;
+			var func2 = () => !this.internalDateError || this.internalDateErrorMessage;
 			rules.push(func2);
 			return rules;
 		},
@@ -867,18 +507,24 @@ export default {
 				var func = (value) => !!value || this.requiredMessage;
 				rules.push(func);
 			}
-			var func2 = () => !this.internalError || this.internalErrorMessage;
+			var func2 = () => !this.internalTimeError || this.internalTimeErrorMessage;
 			rules.push(func2);
 			return rules;
 		},
 		showTime() {
-			if (this.time || this.timesecs) {
-				return true;
-			}
-			return false;
+			return this.time || this.timesecs;
+		},
+		allowedTimeLength() {
+			return this.timesecs ? 8 : 5;
 		},
-		getMask() {
-			return this.internalMask;
+		getDateMask() {
+			// const defaultMask = '##/##/####',
+
+			let mask = this.ISOdateFormat.replace(/Y/g, '#');
+			mask = mask.replace(/M/g, '#');
+			mask = mask.replace(/D/g, '#');
+
+			return mask;
 		},
 		getTimeMask() {
 			if (this.time) {
@@ -894,110 +540,503 @@ export default {
 		getLabelRequiredClass() {
 			return { 'v-label--required': this.required };
 		},
-		getEditedClass() {
-			return { 'v-text-field--edited': this.isEdited };
+		getEditedDateClass() {
+			return { 'v-text-field--edited': this.isEditedDate };
 		},
-		isEdited() {
+		getEditedTimeClass() {
+			return { 'v-text-field--edited': this.isEditedTime };
+		},
+		isEditedDate() {
 			if (this.noeditable || this.disabled || this.readonly) {
 				return false;
 			} else {
-				const newDate = this.removeSeparator(this.internalDateModel);
-				const initialDate = this.removeSeparator(this.initialDateValue);
-				const intTime = this.parseTimeToISO(this.internalTimeModel);
-				if (!this.time && !this.timesecs) {
-					if (initialDate !== newDate) {
-						return true;
-					}
-				} else {
-					if (initialDate !== newDate || this.initialTimeValue !== intTime) {
-						return true;
-					}
+				const newDate = this.internalDateFieldModel;
+				if (this.initialDateValue !== newDate) {
+					return true;
+				}
+				return false;
+			}
+		},
+		isEditedTime() {
+			if (this.noeditable || this.disabled || this.readonly) {
+				return false;
+			} else {
+				const newTime = this.internalTimeFieldModel;
+				if (this.initialTimeValue !== newTime) {
+					return true;
 				}
-
 				return false;
 			}
 		},
 		getDatePlaceholder() {
-			return this.isoDateFormatComp;
+			return this.ISOdateFormat;
 		},
 		getTimePlaceholder() {
-			if (this.time) {
-				return 'HH:mm';
-			} else if (this.timesecs) {
-				return 'HH:mm:ss';
-			}
-			return '';
+			return this.time ? this.ISOtimeFormat : '';
 		},
 		showTooltip() {
-			if (!this.tooltip || this.getLabel === '' || this.getLabel === null) {
+			if (this.getLabel === '' || this.getLabel === null) {
 				return false;
 			}
-			return (this.infoTooltipMessages.length > 0 || this.description !== '') && this.tooltip;
+			return this.tooltipDescription || this.tooltip;
 		}
 	},
-	created() {
-		this.buildMaskFromCurrentDateFormat();
-		this.initializeModel(this.value);
-		this.getInfoTooltip();
-	},
 	watch: {
 		value(val) {
-			if (!this.noLazyModel && !this.firstLazyLoad) {
+			this.debug && console.log('watch value', val);
+
+			if (this.firstLoad) {
 				this.initializeModel(val);
-				this.firstLazyLoad = true;
+				this.firstLoad = false;
 			} else {
-				const externalDateModel = dateTimeUtils.getLocalFormattedDate(val, this.isoDateFormatComp);
-				const externalTimeModel = this.time
-					? dateTimeUtils.getLocalFormattedDate(val, 'HH:mm')
-					: this.timesecs
-					? dateTimeUtils.getLocalFormattedDate(val, 'HH:mm:ss')
-					: '00:00:00';
-
-				if (externalDateModel !== this.internalDateModel || externalTimeModel !== this.internalTimeModel) {
-					this.internalPickerModel = dateTimeUtils.getLocalFormattedDate(val, this.internalDateFormat);
-					this.internalDateModel = dateTimeUtils.getLocalFormattedDate(val, this.isoDateFormatComp);
-					this.internalTimeModel = '00:00:00';
-					if (this.time) {
-						this.internalTimeModel = dateTimeUtils.getLocalFormattedDate(val, 'HH:mm');
-					}
+				this.setModel(val);
+			}
+		},
+		internalDatePickerModel(val) {
+			this.debug && console.log('watch internalDatePickerModel', val);
+
+			if (val != null) {
+				let formattedDate = dateTimeUtils.getLocalFormattedDate(val, this.ISOdateFormat);
+				if (formattedDate != this.internalDateFieldModel) {
+					this.updateDateFieldModel(formattedDate);
+				}
+			}
+		},
+		internalTimePickerModel(val) {
+			this.debug && console.log('watch internalTimePickerModel', val);
+
+			if (val != this.internalTimeFieldModel) {
+				this.updateTimeFieldModel(val);
+			}
+		},
+		internalDateErrorMessage() {
+			this.$refs[`dateField${this.attach !== null ? this.attach : this.defaultId}`].validate();
+		},
+		internalTimeErrorMessage() {
+			this.showTime && this.$refs[`timeField${this.attach !== null ? this.attach : this.defaultId}`].validate();
+		},
+		max() {
+			this.allValidations();
+			this.setTooltip();
+		},
+		min() {
+			this.allValidations();
+			this.setTooltip();
+		}
+	},
+	created() {
+		this.setInitialValues();
+		this.initializeModel(this.value);
+	},
+	mounted() {
+		this.setTooltip();
+	},
+	methods: {
+		initializeModel(value) {
+			if (value !== null && value !== undefined) {
+				this.setModel(value);
+			} else if (this.today) {
+				let todayValue = dateTimeUtils.getLocalDateNow() + 'T' + dateTimeUtils.getLocalTimeNow();
+				this.setModel(todayValue);
+			}
+		},
+		setInitialValues() {
+			this.firstLoad = false;
+			this.initialValue = this.value;
+			this.initialDateValue = this.internalDateFieldModel;
+			this.initialTimeValue = this.internalTimeFieldModel;
+		},
+		setModel(val) {
+			this.debug && console.log('setModel', val);
+
+			if (val) {
+				const newDateFieldModel = moment(val).format(this.ISOdateFormat);
+				const newDatePickerModel = moment(val).format(this.internalDatePickerFormat);
+				const newTimeModel = moment(val).format(this.ISOtimeFormat);
+
+				this.debug && console.log('newDatePickerModel', newDatePickerModel);
+				this.debug && console.log('newDateFieldModel', newDateFieldModel);
+				this.debug && console.log('newTimeModel', newTimeModel);
+
+				this.internalDatePickerModel = newDatePickerModel;
+				this.internalDateFieldModel = newDateFieldModel;
+				this.internalTimePickerModel = newTimeModel;
+				this.internalTimeFieldModel = newTimeModel;
+
+				this.allValidations();
+				this.internalUTCModel = val;
+			} else {
+				this.internalDatePickerModel = null;
+				this.internalDateFieldModel = null;
+				this.internalTimePickerModel = null;
+				this.internalTimeFieldModel = null;
+				this.internalUTCModel = null;
+			}
+			
+			
+		},
+		updateDateFieldModel(val) {
+			this.debug && console.log('updateDateFieldModel', val);
+			this.dateMenuModel = false;
+
+			if (val) {
+				if (val.length == 10) {
+					this.internalDateFieldModel = val;
+					this.internalDatePickerModel = dateTimeUtils.getLocalFormattedDate(
+						moment(val, this.ISOdateFormat),
+						this.internalDatePickerFormat
+					);
+					this.updateInternalUTCModel(this.internalDateFieldModel, this.internalTimeFieldModel);
+				}
+
+				if (val.length > 10) {
+					this.internalDateFieldModel = val.substring(0, 10);
+					this.updateInternalUTCModel(this.internalDateFieldModel, this.internalTimeFieldModel);
+					this.refresher++;
+				}
+			} else {
+				this.internalDateFieldModel = null;
+				this.internalDatePickerModel = null;
+				this.updateInternalUTCModel(null, this.internalTimeFieldModel);
+			}
+
+			this.clearDateErrorMessages();
+			this.validateMinMaxDate(dateTimeUtils.getLocalFormattedDate(moment(this.internalDateFieldModel, this.ISOdateFormat)));
+			this.validateDate(this.internalDateFieldModel);
+			this.validateRequiredDate(this.internalDateFieldModel);
+		},
+		updateTimeFieldModel(val) {
+			this.debug && console.log('updateTimeFieldModel ', val);
+			//this.timeMenuModel = false;
+
+			if (val) {
+				if (val.length == 2 && val[1] == ':') {
+					val = '0' + val[0] + ':';
+					this.internalTimeFieldModel = val;
+				}
+
+				if (val.length == 2 && parseInt(val) > 24) {
+					val = 23 + ':';
+					this.internalTimeFieldModel = val;
+				}
+
+				if (val.length == 2) {
+					val = val + ':';
+					this.internalTimeFieldModel = val;
+				}
+
+				if (val.length == 5 && parseInt(val.substring(3, 5)) > 59) {
+					val = val.substring(0, 2) + ':59';
 					if (this.timesecs) {
-						this.internalTimeModel = dateTimeUtils.getLocalFormattedDate(val, 'HH:mm:ss');
+						val = val + ':';
 					}
+					this.internalTimeFieldModel = val;
+				}
+
+				if (this.timesecs && val.length == 5) {
+					val = val + ':';
+					this.internalTimeFieldModel = val;
+				}
+
+				if (val.length == 8 && parseInt(val.substring(6, 8)) > 59) {
+					val = val.substring(0, 5) + ':59';
+					this.internalTimeFieldModel = val;
 				}
+
+				if (val.length == this.allowedTimeLength) {
+					this.internalTimeFieldModel = val;
+					this.internalTimePickerModel = val;
+					this.updateInternalUTCModel(this.internalDateFieldModel, val);
+				}
+
+				if (val.length > this.allowedTimeLength) {
+					this.internalTimeFieldModel = val.substring(0, this.allowedTimeLength);
+					this.updateInternalUTCModel(this.internalDateFieldModel, this.internalTimeFieldModel);
+					this.refresher++;
+				}
+			} else {
+				this.internalTimeFieldModel = null;
+				this.internalTimePickerModel = null;
+				this.updateInternalUTCModel(this.internalDateFieldModel, null);
 			}
+
+			this.clearTimeErrorMessages();
+			this.validateMinMaxTime(this.internalDateFieldModel + ' ' + this.internalTimeFieldModel);
+			this.validateTime(this.internalTimeFieldModel);
+			this.validateRequiredTime(this.internalTimeFieldModel);
 		},
-		internalPickerModel(val) {
-			this.modelMenu = false;
-			this.internalDateModel = dateTimeUtils.getLocalFormattedDate(val, this.isoDateFormatComp);
-			this.updateInternalModel(val, this.internalTimeModel);
+		updateInternalUTCModel(date, time) {
+			this.debug && console.log('updateInternalUTCModel date', date);
+			this.debug && console.log('updateInternalUTCModel time', time);
+
+			if (date == null && time == null) {
+				this.internalUTCModel = null;
+				this.$emit('input', null);
+				return;
+			}
+
+			if (time == null || time == undefined) {
+				time = '00:00:00';
+			}
+
+			let localStringDate = date + ' ' + time;
+			let internalUTCModel = moment(localStringDate, this.ISOdateFormat + this.ISOtimeFormat).utc().format();
+
+			this.debug && console.log('localStringDate', localStringDate);
+			this.debug && console.log('internalUTCModel', internalUTCModel);
+
+			this.firstLoad = false;
+			this.allValidations();
+			
+			if (this.validateUTCDate(internalUTCModel) & this.validateRequiredDate(date) & this.validateRequiredTime(time) & internalUTCModel != this.value) {
+				this.internalUTCModel = internalUTCModel;
+
+				if (internalUTCModel != this.value) {
+					this.debug && console.log('emit internalUTCModel', internalUTCModel);
+					this.$emit('input', internalUTCModel);
+				}
+			}
 		},
-		internalTimeModel(newValue, oldValue) {
-			// Refactor when upgrade vuetify to 2.4.x and use @click:minute and @click:second for autoclose
-			this.modelMenuTime = !!oldValue;
+		allValidations() {
+			this.debug && console.log('allValidations');
+
+			this.clearErrorMessages();
+			this.internalDatePickerModel && this.validateMinMaxDate(dateTimeUtils.getLocalFormattedDate(moment(this.internalDatePickerModel, this.ISOdateFormat)));
+			this.internalTimePickerModel && this.validateMinMaxTime(this.internalDateFieldModel + ' ' + this.internalTimePickerModel);
+			this.internalUTCModel && this.validateUTCDate(this.internalUTCModel);
+			this.internalDatePickerModel && this.validateRequiredDate(this.internalDatePickerModel);
+			this.internalTimePickerModel && this.validateRequiredTime(this.internalTimePickerModel);
 		},
-		internalModel(val) {
-			if (val === 'Invalid date') {
-				val = null;
+		validateRequiredDate(date) {
+			this.debug && console.log('validateRequiredDate', date);
+
+			if (this.required && (date === undefined || date === null || date === '')) {
+				this.showRequiredDateMessage();
+				this.debug && console.log('validateRequiredDate', false);
+				return false;
 			}
-			let utc = this.giveBackUTCDate(val);
-			if (utc === 'Invalid date') {
-				utc = null;
+
+			return true;
+		},
+		validateRequiredTime(time) {
+			this.debug && console.log('validateRequiredTime', time);
+
+			if (this.showTime && this.required && (time === undefined || time === null || time === '')) {
+				this.showRequiredTimeMessage();
+				this.debug && console.log('validateRequiredTime', false);
+				return false;
 			}
-			this.$emit('input', utc);
-			this.getInfoTooltip();
-			this.clearErrorMessages();
-			if (utc != null && utc !== 'Invalid date') this.validateDate(utc);
+
+			return true;
 		},
-		internalErrorMessage() {
-			this.$refs[`timeField${this.attach !== null ? this.attach : this.defaultId}`].validate();
+		validateDate(date) {
+			this.debug && console.log('validateDate', date);
+
+			if (!date && !this.required) {
+				return true;
+			}
+
+			let validation = moment(date, this.ISOdateFormat).isValid();
+
+			if (date && date.length != this.getDateMask.length || date == 'Invalid date' || date == 'Invalid dat' || date == 'Invalid da' || !validation) {
+				this.showErrorDateMessage();
+				this.debug && console.log('validateDate', false);
+				return false;
+			}
+
+			return true;
 		},
-		max() {
-			this.clearErrorMessages();
-			if (this.internalModel != null) this.validateDate(this.internalModel);
+		validateTime(time) {
+			this.debug && console.log('validateTime', time);
+			if (this.showTime) {
+				let timeRegex = new RegExp('^([0-1][0-9]|2[0-3]):([0-5][0-9])$');
+				if (this.timesecs) {
+					timeRegex = new RegExp('^([0-1][0-9]|2[0-3]):([0-5][0-9]):([0-5][0-9])$');
+				}
+
+				if (time == null) {
+					return true;
+				}
+
+				if (time.match(timeRegex)) {
+					return true;
+				}
+
+				this.showErrorTimeMessage();
+				this.debug && console.log('validateTime', false);
+				return false;
+			}
 		},
-		min() {
-			this.clearErrorMessages();
-			if (this.internalModel != null) this.validateDate(this.internalModel);
+		validateUTCDate(fullDate) {
+			this.debug && console.log('validateUTCDate', fullDate);
+
+			let validation = moment(fullDate).isValid();
+
+			if (fullDate == 'Invalid date' || fullDate == 'Invalid dat' || fullDate == 'Invalid da' || !validation) {
+				this.debug && console.log('validateUTCDate', false);
+				return false;
+			}
+
+			return true;
+		},
+		validateMinMaxDate(date) {
+			this.debug && console.log('validateMinMaxDate ' + this.label, date);
+
+			if (!date && !this.required) {
+				return true;
+			}
+
+			if (this.max && !this.maxDateValidation) {
+				this.showErrorMinMaxDateMessage();
+				this.debug && console.log('validateMinMaxDate ' + this.label, false);
+				return false;
+			}
+
+			if (this.min && !this.minDateValidation) {
+				this.showErrorMinMaxDateMessage();
+				this.debug && console.log('validateMinMaxDate ' + this.label, false);
+				return false;
+			}
+
+			return true;
+		},
+		validateMinMaxTime(time) {
+			this.debug && console.log('validateMinMaxTime ' + this.label, time);
+
+			if (!time && !this.required) {
+				return true;
+			}
+
+			if (this.max && !this.maxTimeValidation) {
+				this.showErrorMinMaxTimeMessage();
+				return false;
+			}
+
+			if (this.min && !this.minTimeValidation) {
+				this.showErrorMinMaxTimeMessage();
+				return false;
+			}
+
+			return true;
+		},
+		clearErrorMessages() {
+			this.clearDateErrorMessages();
+			this.clearTimeErrorMessages();
+		},
+		clearDateErrorMessages() {
+			this.internalDateError = false;
+			this.internalDateErrorMessage = '';
+		},
+		clearTimeErrorMessages() {
+			this.internalTimeError = false;
+			this.internalTimeErrorMessage = '';
+		},
+		showRequiredDateMessage() {
+			this.internalDateError = true;
+			this.internalDateErrorMessage = this.requiredMessage;
+		},
+		showRequiredTimeMessage() {
+			this.internalTimeError = true;
+			this.internalTimeErrorMessage = this.requiredMessage;
+		},
+		showErrorDateMessage() {
+			this.internalDateError = true;
+			this.internalDateErrorMessage =
+				this.$t('pui9.components.dateField.errorDate') + ',' + this.$t('pui9.components.dateField.correctFormat') + ' ' + this.ISOdateFormat;
+		},
+		showErrorTimeMessage() {
+			this.internalTimeError = true;
+			this.internalTimeErrorMessage = this.$t('pui9.components.dateField.errorTime');
+		},
+		showErrorMinMaxDateMessage() {
+			this.internalDateError = true;
+			let dateformat = this.ISOdateFormat;
+
+			var min = dateTimeUtils.getLocalFormattedDate(this.min, dateformat);
+			var max = dateTimeUtils.getLocalFormattedDate(this.max, dateformat);
+
+			if (this.min && this.max) {
+				this.internalDateErrorMessage = this.internalTimeErrorMessage =
+					this.$t('pui9.components.dateField.errorRangeDate') + min + ' ' + this.$t('pui9.components.dateField.and') + ' ' + max;
+			} else if (this.min && !this.max) {
+				this.internalDateErrorMessage = this.$t('pui9.components.dateField.errorMinDate') + min;
+			} else {
+				this.internalDateErrorMessage = this.$t('pui9.components.dateField.errorMaxDate') + max;
+			}
+		},
+		showErrorMinMaxTimeMessage() {
+			this.internalTimeError = true;
+			let dateformat = this.ISOdateFormat + ' ' + this.ISOtimeFormat;
+
+			var min = dateTimeUtils.getLocalFormattedDate(this.min, dateformat);
+			var max = dateTimeUtils.getLocalFormattedDate(this.max, dateformat);
+
+			if (this.min && this.max) {
+				this.internalDateErrorMessage = this.internalTimeErrorMessage =
+					this.$t('pui9.components.dateField.errorRangeDate') + min + ' ' + this.$t('pui9.components.dateField.and') + ' ' + max;
+			} else if (this.min && !this.max) {
+				this.internalTimeErrorMessage = this.$t('pui9.components.dateField.errorMinDate') + min;
+			} else {
+				this.internalTimeErrorMessage = this.$t('pui9.components.dateField.errorMaxDate') + max;
+			}
+		},
+		getOffset() {
+			var offset = dateTimeUtils.getUTCOffset();
+			if (offset === 0) {
+				return '+00:00';
+			}
+			var hour = offset / 60;
+			if (hour) {
+				if (hour && hour.toString().length === 1) {
+					if (hour > 0) {
+						return '+0' + hour + ':00';
+					} else {
+						return '-0' + hour + ':00';
+					}
+				} else if (hour && hour.toString().length === 2) {
+					if (hour > 0) {
+						return '+' + hour + ':00';
+					} else {
+						return '-' + hour + ':00';
+					}
+				}
+			}
+			return '';
+		},
+		setTooltip() {
+			if (this.tooltip && this.$refs.tooltip) {
+				this.$refs.tooltip.clearMessages();
+
+				if (this.showTime) {
+					this.$refs.tooltip.pushMessage(
+						this.$t('pui9.components.dateField.tooltipFormat') + this.ISOdateFormat + ' ' + this.ISOtimeFormat
+					);
+				} else {
+					this.$refs.tooltip.pushMessage(this.$t('pui9.components.dateField.tooltipFormat') + this.ISOdateFormat);
+				}
+
+				if (this.max) {
+					let format = '';
+					if (this.showTime) {
+						format = this.ISOdateFormat + ' ' + this.ISOtimeFormat;
+					} else {
+						format = this.ISOdateFormat;
+					}
+					var localMaxDate = dateTimeUtils.getLocalFormattedDate(this.max, format);
+					this.$refs.tooltip.pushMessage(this.$t('pui9.components.dateField.tooltipMaxDate') + localMaxDate);
+				}
+
+				if (this.min) {
+					let format = '';
+					if (this.showTime) {
+						format = this.ISOdateFormat + ' ' + this.ISOtimeFormat;
+					} else {
+						format = this.ISOdateFormat;
+					}
+					var localMinDate = dateTimeUtils.getLocalFormattedDate(this.min, format);
+					this.$refs.tooltip.pushMessage(this.$t('pui9.components.dateField.tooltipMinDate') + localMinDate);
+				}
+			}
 		}
 	}
 };