0
0
Fork 0

feat: imrpove VnInputTime to set cursor at start

This commit is contained in:
Javier Segarra 2024-07-04 17:42:28 +02:00
parent 3a73c6b908
commit 5d6cdd4e2e
1 changed files with 10 additions and 1 deletions

View File

@ -2,6 +2,7 @@
import { watch, computed, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { date } from 'quasar';
import { nextTick } from 'vue';
const model = defineModel({ type: String });
const props = defineProps({
@ -55,17 +56,24 @@ const formattedTime = computed({
function dateToTime(newDate) {
return date.formatDate(new Date(newDate), dateFormat);
}
const timeField = ref();
watch(
() => model.value,
(val) => (formattedTime.value = val),
{ immediate: true }
);
const focusField = () => {
nextTick(() => {
const input = timeField.value.$el.querySelector('input');
input.setSelectionRange(0, 0);
});
};
</script>
<template>
<div @mouseover="hover = true" @mouseleave="hover = false">
<QInput
ref="timeField"
class="vn-input-time"
mask="##:##"
placeholder="--:--"
@ -74,6 +82,7 @@ watch(
:class="{ required: $attrs.required }"
style="min-width: 100px"
:rules="$attrs.required ? [requiredFieldRule] : null"
@focus="focusField"
>
<template #append>
<QIcon