pui9-components 1.16.4

package/src/components/PuiDateField.vue

@@ -0,0 +1,1004 @@
+<template>
+	<!-- DESKTOP -->
+	<div v-if="!isMobile">
+		<div v-if="toplabel" class="ml-1 mr-1">
+			<v-layout>
+				<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>
+				</v-flex>
+			</v-layout>
+			<v-layout>
+				<v-flex xs12>
+					<v-layout>
+						<v-flex :xs8="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"
+								:nudge-right="40"
+								transition="scale-transition"
+								offset-y
+								min-width="290px"
+								:disabled="disabled"
+								><template v-slot:activator="{ on, attrs }">
+									<v-text-field
+										:id="`${attach !== null ? attach : defaultId}`"
+										v-on="on"
+										v-bind="attrs"
+										v-model="internalDateModel"
+										:class="getEditedClass"
+										:rules="getDateRules"
+										append-icon="far fa-calendar-day"
+										solo
+										outlined
+										flat
+										:readonly="disableTextInput"
+										:disabled="disabled"
+										:mask="getMask"
+										:error="internalError"
+										:error-messages="internalErrorMessage"
+										@input="updateDateField"
+										@blur="checkDateSizeEqual6AndReplace"
+										@click:append="modelMenu = true"
+										:placeholder="getDatePlaceholder"
+									></v-text-field>
+								</template>
+								<v-date-picker
+									v-model="internalPickerModel"
+									:first-day-of-week="1"
+									:locale="getLocale"
+									v-bind="allProps"
+									:disabled="disabled"
+									:min="minValue"
+									:max="maxValue"
+									color="var(--primarycolor)"
+								></v-date-picker>
+							</v-menu>
+						</v-flex>
+						<v-flex :xs4="showTime" :xs0="!showTime">
+							<v-menu
+								v-if="showTime"
+								:close-on-content-click="false"
+								v-model="modelMenuTime"
+								:nudge-right="40"
+								transition="scale-transition"
+								offset-y
+								min-width="150px"
+								:disabled="disabled"
+							>
+								<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"
+										:rules="getTimeRules"
+										append-icon="fa-clock"
+										solo
+										outlined
+										flat
+										:readonly="disableTextInput"
+										:disabled="disabled"
+										class="ml-1"
+										:mask="getTimeMask"
+										:error="internalError"
+										@input="updateTimeField"
+										@click:append="modelMenuTime = true"
+										:placeholder="getTimePlaceholder"
+									></v-text-field>
+								</template>
+								<v-time-picker
+									v-if="modelMenuTime"
+									v-model="internalTimeModel"
+									v-bind="allProps"
+									:disabled="disabled"
+									:min="minTimeValue"
+									:max="maxTimeValue"
+									format="24hr"
+									:use-seconds="timesecs"
+									color="var(--primarycolor)"
+									@input="updateTimeField"
+								></v-time-picker>
+							</v-menu>
+						</v-flex>
+					</v-layout>
+				</v-flex>
+			</v-layout>
+		</div>
+		<div v-else class="ml-1 mr-1">
+			<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>
+				</v-flex>
+				<v-flex :class="valueColumnStyles ? valueColumnStyles : 'xs12 sm6 md8 xl9'">
+					<v-layout>
+						<v-flex :xs8="showTime" :xs12="!showTime">
+							<v-menu
+								:close-on-content-click="false"
+								v-model="modelMenu"
+								:nudge-right="40"
+								transition="scale-transition"
+								offset-y
+								min-width="290px"
+								:disabled="disabled"
+							>
+								<template v-slot:activator="{ on, attrs }">
+									<v-text-field
+										:id="`${attach !== null ? attach : defaultId}`"
+										v-on="on"
+										v-bind="attrs"
+										v-model="internalDateModel"
+										:class="getEditedClass"
+										:rules="getDateRules"
+										append-icon="far fa-calendar-day"
+										solo
+										outlined
+										flat
+										:readonly="disableTextInput"
+										:disabled="disabled"
+										:mask="getMask"
+										:error="internalError"
+										:error-messages="internalErrorMessage"
+										@input="updateDateField"
+										@blur="checkDateSizeEqual6AndReplace"
+										@click:append="modelMenu = true"
+										:placeholder="getDatePlaceholder"
+										class="ml-2"
+									></v-text-field>
+								</template>
+								<v-date-picker
+									v-model="internalPickerModel"
+									:first-day-of-week="1"
+									:locale="getLocale"
+									v-bind="allProps"
+									:disabled="disabled"
+									:min="minValue"
+									:max="maxValue"
+									color="var(--primarycolor)"
+								></v-date-picker>
+							</v-menu>
+						</v-flex>
+						<v-flex :xs4="showTime" :xs0="!showTime">
+							<v-menu
+								v-if="showTime"
+								:close-on-content-click="false"
+								v-model="modelMenuTime"
+								:nudge-right="40"
+								transition="scale-transition"
+								offset-y
+								min-width="150px"
+								:disabled="disabled"
+							>
+								<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"
+										:rules="getTimeRules"
+										append-icon="fa-clock"
+										solo
+										outlined
+										flat
+										:readonly="disableTextInput"
+										:disabled="disabled"
+										class="ml-1"
+										:mask="getTimeMask"
+										:error="internalError"
+										@input="updateTimeField"
+										@click:append="modelMenuTime = true"
+										:placeholder="getTimePlaceholder"
+									></v-text-field>
+								</template>
+								<v-time-picker
+									v-if="modelMenuTime"
+									v-model="internalTimeModel"
+									v-bind="allProps"
+									:disabled="disabled"
+									:min="minTimeValue"
+									:max="maxTimeValue"
+									format="24hr"
+									:use-seconds="timesecs"
+									color="var(--primarycolor)"
+									@input="updateTimeField"
+								></v-time-picker>
+							</v-menu>
+						</v-flex>
+					</v-layout>
+				</v-flex>
+			</v-layout>
+		</div>
+	</div>
+	<!-- MOBILE -->
+	<div v-else>
+		<v-layout>
+			<v-flex xs12>
+				<v-layout>
+					<v-flex :xs7="showTime" :xs12="!showTime">
+						<v-menu
+							:close-on-content-click="false"
+							v-model="modelMenu"
+							:nudge-right="40"
+							transition="scale-transition"
+							offset-y
+							min-width="290px"
+							:disabled="disabled"
+							><template v-slot:activator="{ on, attrs }">
+								<v-text-field
+									:id="`${attach !== null ? attach : defaultId}`"
+									v-on="on"
+									v-bind="attrs"
+									v-model="internalDateModel"
+									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"
+									:placeholder="getDatePlaceholder"
+								></v-text-field>
+							</template>
+							<v-date-picker
+								v-model="internalPickerModel"
+								:first-day-of-week="1"
+								:locale="getLocale"
+								v-bind="allProps"
+								:disabled="disabled"
+								:min="minValue"
+								:max="maxValue"
+								color="var(--primarycolor)"
+							></v-date-picker>
+						</v-menu>
+					</v-flex>
+					<v-flex :xs5="showTime" :xs0="!showTime">
+						<v-menu
+							v-if="showTime"
+							:close-on-content-click="false"
+							v-model="modelMenuTime"
+							:nudge-right="40"
+							transition="scale-transition"
+							offset-y
+							min-width="150px"
+							:disabled="disabled"
+						>
+							<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"
+									:rules="getTimeRules"
+									append-icon="fa-clock"
+									class="ml-1"
+									:disabled="disabled"
+									:mask="getTimeMask"
+									:error="internalError"
+									@input="updateTimeField"
+									@click:append="modelMenuTime = true"
+									:placeholder="getTimePlaceholder"
+								></v-text-field>
+							</template>
+							<v-time-picker
+								v-if="modelMenuTime"
+								v-model="internalTimeModel"
+								v-bind="allProps"
+								:disabled="disabled"
+								:min="minTimeValue"
+								:max="maxTimeValue"
+								format="24hr"
+								:use-seconds="timesecs"
+								color="var(--primarycolor)"
+								@input="updateTimeField"
+							></v-time-picker>
+						</v-menu>
+					</v-flex>
+				</v-layout>
+			</v-flex>
+		</v-layout>
+	</div>
+</template>
+
+<script>
+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,
+			default: false,
+			required: false
+		},
+		value: {
+			type: [Number, String],
+			required: false
+		},
+		today: {
+			type: Boolean,
+			default: false,
+			required: false
+		},
+		time: {
+			type: Boolean,
+			default: false,
+			required: false
+		},
+		tooltip: {
+			type: Boolean,
+			default: false,
+			required: false
+		},
+		description: {
+			type: String,
+			default: '',
+			required: false
+		},
+		timesecs: {
+			type: Boolean,
+			default: false,
+			required: false
+		},
+		rules: {
+			type: Array,
+			default: () => {
+				return [];
+			}
+		},
+		isoDateFormat: {
+			type: String,
+			required: false
+		},
+		min: {
+			type: [Number, String],
+			required: false
+		},
+		max: {
+			type: [Number, String],
+			required: false
+		},
+		noLazyModel: {
+			type: Boolean,
+			default: false,
+			required: false
+		},
+		labelColumnStyles: {
+			type: String,
+			required: false
+		},
+		valueColumnStyles: {
+			type: String,
+			required: false
+		},
+		attach: {
+			type: String,
+			default: null,
+			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;
+		},
+		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;
+			}
+		},
+		showErrorDateMessage() {
+			this.internalError = true;
+			this.internalErrorMessage =
+				this.$t('pui9.components.dateField.errorDate') +
+				',' +
+				this.$t('pui9.components.dateField.correctFormat') +
+				' ' +
+				this.isoDateFormatComp;
+		},
+		showRequiredDateMessage() {
+			this.internalError = true;
+			this.internalErrorMessage = this.requiredMessage;
+		},
+		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;
+			}
+		},
+		showErrorTimeMessage() {
+			this.internalError = true;
+			this.internalErrorMessage = this.$t('pui9.components.dateField.errorTime');
+		},
+		clearErrorMessages() {
+			this.internalError = false;
+			this.internalErrorMessage = '';
+		},
+		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;
+				}
+			}
+		},
+		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;
+			}
+		},
+		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;
+		},
+		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;
+		},
+		minTimeValue() {
+			return this.min != null ? dateTimeUtils.getLocalFormattedDate(this.min, this.isoTimeFormatComp) : null;
+		},
+		maxTimeValue() {
+			return this.max != null ? dateTimeUtils.getLocalFormattedDate(this.max, this.isoTimeFormatComp) : null;
+		},
+		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';
+		},
+		getDateRules() {
+			const rules = [...this.rules];
+			if (this.required) {
+				var func = (value) => !!value || this.requiredMessage;
+				rules.push(func);
+			}
+			var func2 = () => !this.internalError || this.internalErrorMessage;
+			rules.push(func2);
+			return rules;
+		},
+		getTimeRules() {
+			const rules = [...this.rules];
+			if (this.required) {
+				var func = (value) => !!value || this.requiredMessage;
+				rules.push(func);
+			}
+			var func2 = () => !this.internalError || this.internalErrorMessage;
+			rules.push(func2);
+			return rules;
+		},
+		showTime() {
+			if (this.time || this.timesecs) {
+				return true;
+			}
+			return false;
+		},
+		getMask() {
+			return this.internalMask;
+		},
+		getTimeMask() {
+			if (this.time) {
+				return '##:##';
+			} else if (this.timesecs) {
+				return '##:##:##';
+			}
+			return '##:##:##';
+		},
+		getMobileClass() {
+			return { 'v-text-field--edited': this.isEdited, 'v-text-field--required': this.required };
+		},
+		getLabelRequiredClass() {
+			return { 'v-label--required': this.required };
+		},
+		getEditedClass() {
+			return { 'v-text-field--edited': this.isEdited };
+		},
+		isEdited() {
+			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;
+					}
+				}
+
+				return false;
+			}
+		},
+		getDatePlaceholder() {
+			return this.isoDateFormatComp;
+		},
+		getTimePlaceholder() {
+			if (this.time) {
+				return 'HH:mm';
+			} else if (this.timesecs) {
+				return 'HH:mm:ss';
+			}
+			return '';
+		},
+		showTooltip() {
+			if (!this.tooltip || this.getLabel === '' || this.getLabel === null) {
+				return false;
+			}
+			return (this.infoTooltipMessages.length > 0 || this.description !== '') && this.tooltip;
+		}
+	},
+	created() {
+		this.buildMaskFromCurrentDateFormat();
+		this.initializeModel(this.value);
+		this.getInfoTooltip();
+	},
+	watch: {
+		value(val) {
+			if (!this.noLazyModel && !this.firstLazyLoad) {
+				this.initializeModel(val);
+				this.firstLazyLoad = true;
+			} 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');
+					}
+					if (this.timesecs) {
+						this.internalTimeModel = dateTimeUtils.getLocalFormattedDate(val, 'HH:mm:ss');
+					}
+				}
+			}
+		},
+		internalPickerModel(val) {
+			this.modelMenu = false;
+			this.internalDateModel = dateTimeUtils.getLocalFormattedDate(val, this.isoDateFormatComp);
+			this.updateInternalModel(val, this.internalTimeModel);
+		},
+		internalTimeModel(newValue, oldValue) {
+			// Refactor when upgrade vuetify to 2.4.x and use @click:minute and @click:second for autoclose
+			this.modelMenuTime = !!oldValue;
+		},
+		internalModel(val) {
+			if (val === 'Invalid date') {
+				val = null;
+			}
+			let utc = this.giveBackUTCDate(val);
+			if (utc === 'Invalid date') {
+				utc = null;
+			}
+			this.$emit('input', utc);
+			this.getInfoTooltip();
+			this.clearErrorMessages();
+			if (utc != null && utc !== 'Invalid date') this.validateDate(utc);
+		},
+		internalErrorMessage() {
+			this.$refs[`timeField${this.attach !== null ? this.attach : this.defaultId}`].validate();
+		},
+		max() {
+			this.clearErrorMessages();
+			if (this.internalModel != null) this.validateDate(this.internalModel);
+		},
+		min() {
+			this.clearErrorMessages();
+			if (this.internalModel != null) this.validateDate(this.internalModel);
+		}
+	}
+};
+</script>