Format de retour de date DatePicker dans le composant FiltersSidebar

[ArthurBrgn]

Description

Dans mon composant FiltersSideBar j'ai un composant DatePicker. J'attends de celui-ci un format d'affichage de type DD/MM/YYYY et un format de données de type YYYY-MM-DD.

Au moment de l'event update:value du FiltersSidebar, le format de la date des données n'est pas le bon : il prend le format de l'affichage.

Code

Template

<template>
    <FiltersSideBar
        v-model="filters"
        @update:value="updateFilters"
    >
        <template #birthdate="{ on, attrs }">
            <DatePicker
                v-bind="attrs"
                birthdate
                outlined
                date-format="DD/MM/YYYY"
                hint="Format JJ/MM/AAAA"
                date-format-return="YYYY-MM-DD"
                v-on="on"
            />
        </template>

        <template #studiesdate="{ on, attrs }">
            <DatePicker
                v-bind="attrs"
                outlined
                date-format="DD/MM/YYYY"
                hint="Format JJ/MM/AAAA"
                date-format-return="YYYY-MM-DD"
                v-on="on"
            />
        </template>

        <template #cpamcode="{ on, attrs }">
            <VSelect
                v-bind="attrs"
                :items="cpamCodes"
                outlined
                v-on="on"
            />
        </template>

        <template #registereddate="{ on, attrs }">
            <PeriodField
                v-bind="attrs"
                outlined
                v-on="on"
            />
        </template>
    </FiltersSideBar>
</template>

Script

<script lang="ts">
    import Vue from 'vue';
    import Component from 'vue-class-component';
    import { mapActions } from 'vuex';

    import { ChipItem } from '@cnamts/vue-dot/src/elements/ChipList/types';
    import { FilterItem } from '@cnamts/vue-dot/src/mixins/filterable/types';
    import { getAgentInformations } from '@/services/agent/api';
    import { Agent } from '@/services/agent/types';

    /** Displays a list of links */
    @Component({
        methods: mapActions('notification', ['addNotification'])
    })
    export default class PanelFiltersFolder extends Vue {
        agentInformations: Agent | null = null;
        filters = [
            {
                name: 'birthdate',
                title: 'Date de naissance'
            },
            {
                name: 'studiesdate',
                title: 'Date d\'ODD'
            },
            {
                name: 'registereddate',
                title: 'Date d\'inscription',
                formatChip: ({ from, to }: {from: string; to: string}): ChipItem[] => [
                    {
                        text: Intl.DateTimeFormat('fr-FR').format(new Date(from)) + ' - ' + Intl.DateTimeFormat('fr-FR').format(new Date(to)),
                        value: { from, to }
                    }
                ]
            },
            {
                name: 'cpamcode',
                title: 'Code caisse'
            }
        ];
        updateFilters(filterItems: FilterItem[]): void {
            // console : birthdate DD/MM/YYY alors que l'on attends : birthdate YYYY-MM-DD
            console.log(filterItems[0].name, filterItems[0].value);
            this.$emit('filters-updated', filterItems);
        }
        get cpamCodes(): string[] {
            if (this.agentInformations === null) {
                return [];
            }

            return [
                this.agentInformations.cpamCode,
                ...this.agentInformations.secondaryCpamRoles.map(a => a.cpamCode)
            ];
        }
        async mounted() {
            try {
                this.agentInformations = await getAgentInformations();
            } catch {
                this.addNotification({
                    type: 'error',
                    message: 'Impossible de récupérer les informations de l\'agent'
                });
            }
        }
    }
</script>

La fonction updateFilters est déclenchée au moment du clic du bouton 'Appliquer' de l'utilisateur. Dans cette fonction j'ai débug la value du champ 'birthdate' ou 'studiesdate' et sur les deux champs le format de date n'est pas celui attendu (voir template propriété 'date-format-return'.

Merci d'avance

[DavidFyon]

Je ne sais pas si c'est la meilleure solution mais le bon format peux être récupéré avec un v-model :

<template>
    <FiltersSideBar
        v-model="filters"
        @update:value="updateFilters"
    >
        <template #birthdate="{ on, attrs }">
            <DatePicker
                v-model="birthdate"
                v-bind="attrs"
                birthdate
                outlined
                date-format="DD/MM/YYYY"
                hint="Format JJ/MM/AAAA"
                date-format-return="YYYY-MM-DD"
                v-on="on"
            />
        </template>

        <template #studiesdate="{ on, attrs }">
            <DatePicker
                v-model="studiesdate"
                v-bind="attrs"
                outlined
                date-format="DD/MM/YYYY"
                hint="Format JJ/MM/AAAA"
                date-format-return="YYYY-MM-DD"
                v-on="on"
            />
        </template>
    </FiltersSideBar>
</template>

<script lang="ts">
    import Vue from 'vue';
    import Component from 'vue-class-component';

    @Component
    export default class PanelFiltersFolder extends Vue {
        birthdate: string | null = null;
        studiesdate: string | null = null;

        filters = [
            {
                name: 'birthdate',
                title: 'Date de naissance'
            },
            {
                name: 'studiesdate',
                title: 'Date d\'ODD'
            }
        ];
        updateFilters(): void {
            console.log('birthdate', this.birthdate);
            console.log('studiesdate', this.studiesdate);
        }
    }
</script>

[ArthurBrgn]

C'est une bonne solution mais malheureusement ça ne fonctionne pas lorsque l'on réinitialise le filtre via le bouton "Réinitialiser le filtre" ou le bouton "Réinitialiser" du panel.

[deraw]

C'est une bonne solution mais malheureusement ça ne fonctionne pas lorsque l'on réinitialise le filtre via le bouton "Réinitialiser le filtre" ou le bouton "Réinitialiser" du panel.

J'ai une idée pour corriger le problème dans le composant, je vais essayer ça

[ArthurBrgn]

Merci !