Tidsinmatning

Komponent: XTimeTextField
Status: Experimentell

Innehåll

Användning
Förlåtande inmatning

Användning

När det behövs ett textinmatningsfält för timmar och minuter, tt:mm. Accepterar inmatning med eller utan kolon. Utan kolon tolkas inmatningen som enbart timmar. Om man matar in ett kolon måste det följas av två siffror för att vara giltigt (dvs. 08: och 08:0 är ogiltiga). Exempel:

Inmatning	Formattering	Värde
1234	1234:00	74040
123	123:00	7380
12	12:00	720
8	08:00	480
12:30	12:30	750

Lagrar värdet internt i ett Number som plockas ut med v-model.

Enkelt exempel

<template>
    <div>
        <x-time-text-field
            v-model="time"
            v-validation.required.hoursMinutes="{
                hoursMinutes: { errorMessage: 'Du har skrivit in ett felaktigt tidformat' },
            }"
        >
            Ange arbetstid
            <template #description="{ discreteDescriptionClass }">
                <span :class="discreteDescriptionClass">(tt:mm)</span>
            </template>
        </x-time-text-field>
        <p>
            Värde: {{ time }}.<br />
            Renskrivet värde: {{ userFriendlyValue }}.<br />
            Värde i timmar: {{ timeInHours }}.<br />
            Värde i objektnotation: {{ timeAsObject }}.
        </p>
    </div>
</template>

<script lang="js">
import {
    XTimeTextField,
    minutesToUserFriendlyString,
    minutesToHoursFloat,
    minutesToObject,
} from "@fkui/vue-labs";
import { defineComponent } from "vue";

export default defineComponent({
    name: "XTimeComponentExample",
    components: {
        XTimeTextField,
    },
    data() {
        return {
            time: undefined,
        };
    },
    computed: {
        userFriendlyValue() {
            return minutesToUserFriendlyString(this.time);
        },
        timeInHours() {
            return minutesToHoursFloat(this.time);
        },
        timeAsObject() {
            return JSON.stringify(minutesToObject(this.time));
        },
    },
});
</script>

Förlåtande inmatning

Det är inte ovanligt med ett behov av att endast tillåta tidsangivelser upp till ett dygn (24 timmar). Det går att sätta en egen parsingparameter istället. Detta görs i stil med :parser="forgivingParseTimeToNumber". I denna komponenten tolkas även fyra siffror inte längre som timmar, utan som timmar och minuter. De två första siffrorna tolkas som timmar och de två sista som minuter. Notera att tre siffror och fem siffror fortfarande tolkas som timmar. Exempel:

Inmatning	Formattering	Värde
1234	12:34	74040
123	123:00	7380
12	12:00	720
8	08:00	480
12:30	12:30	750

Exempel med förlåtande inmatning

<template>
    <div>
        <x-time-text-field
            v-model="time"
            v-validation.required.hoursMinutes.maxTime="{
                hoursMinutes: {
                    errorMessage: 'Du har skrivit in ett felaktigt tidformat.',
                    parser: [parser],
                },
                maxTime: {
                    maxTime: '24:00',
                    errorMessage: 'Du kan inte fylla i en tid överstigande 24 timmar.',
                    parser: [parser],
                },
            }"
            :parser="parser"
        >
            Ange arbetstid
            <template #description="{ discreteDescriptionClass }">
                <span :class="discreteDescriptionClass">(tt:mm)</span>
            </template>
        </x-time-text-field>
        <p>
            Värde: {{ time }}.<br />
            Renskrivet värde: {{ userFriendlyValue }}.<br />
            Värde i timmar: {{ timeInHours }}.<br />
            Värde i objektnotation: {{ timeAsObject }}.
        </p>
    </div>
</template>

<script lang="js">
import {
    XTimeTextField,
    forgivingParseTimeToNumber,
    minutesToHoursFloat,
    minutesToObject,
    minutesToUserFriendlyString,
} from "@fkui/vue-labs";
import { defineComponent } from "vue";

export default defineComponent({
    name: "XTimeComponentExample",
    components: {
        XTimeTextField,
    },
    data() {
        return {
            time: undefined,
            parser: (value) => forgivingParseTimeToNumber(value),
        };
    },
    computed: {
        userFriendlyValue() {
            return minutesToUserFriendlyString(this.time);
        },
        timeInHours() {
            return minutesToHoursFloat(this.time);
        },
        timeAsObject() {
            return JSON.stringify(minutesToObject(this.time));
        },
    },
});
</script>