[Buefy] Datetimepicker afficher la date

Version imprimable

1 pièce(s) jointe(s)

Bonjour à tous et à toutes :D

Ma demande est simple.
J'utilise le Framework Vue.js avec Buefy comme librairie : https://buefy.org/

Le but est de mettre 8 heure, c'est-à-dire 08:00 dans l'encadrer rouge du Datetimepicker :

Pièce jointe 585493

J'ai utilisé le code proposé par la librairie Buefy :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <template> <b-field label="Select datetime"> <b-datetimepicker placeholder="Select a date" :min-datetime="minDatetime"> </b-datetimepicker> </b-field> </template> <script> export default { data() { const min = new Date() min.setHours(8) min.setMinutes(0) min.setSeconds(0) return { minDatetime: min, } } } </script>
Ça fonctionne bien, je ne peux pas mettre les dates inférieures à 8 heures. Par contre, il me l'indique pas comme vous pouvez le voir sur l'image.
En résumé, est-ce possible de mettre une valeur par défaut lors de la sélection du Datetimepicker. Si oui, comment s'il vous plait ?

Je ne trouve pas malgré mes recherches sur la doc de Buefy.

Merci.

hello

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<template>
    <b-field label="Select datetime">
        <b-datetimepicker
            placeholder="Select a date"
            :min-datetime="minDatetime" :value="defaultDatetime">
        </b-datetimepicker>
    </b-field>
</template>
 
<script>
    export default {
        data() {
            const min = new Date()
            min.setHours(8)
            min.setMinutes(0)
            min.setSeconds(0)
 
            const defaultDate = new Date()
            defaultDate.setHours(9)
            defaultDate.setMinutes(0)
            defaultDate.setSeconds(0)
 
            return {
                minDatetime: min,
                defaultDatetime: defaultDate,
            }
        }
    }
</script>

A noter que tu peux également passer par un v-model

02/12/2020, 07h53
Vengryn

1 pièce(s) jointe(s)

Dans une value, ça ne fonctionne pas.

Par contre, c'est ok avec un v-model, merci beaucoup.

Mais, comment, on peut masquer l'heure par default du datetimepicker dans le champ :

Pièce jointe 585509

Lors de la première ouverture de mon datetimepicker, j'ai envie de l'avoir uniquement dans mon select du datetimepicker.
Le top, ça serait d'avoir l'heure uniquement dans l'encadré rouge 08:00 et non dans les deux, c'est-à-dire dans l'encadré rouge + dans le champs.
Après, par contre, si tu change l'heure, alors oui, on l'indique dans le champs.

Petite question, ce composant permet uniquement d'empêcher la saisie des valeurs ? Elles ne peut pas les faire disparaître dans notre choix ?
02/12/2020, 16h39
gwyohm

Citation:

Dans une value, ça ne fonctionne pas.

https://codepen.io/gwyohm/pen/zYKvpda?editors=101
07/12/2020, 20h51
Vengryn

Merci beaucoup :)

Et comment on fait pour mettre l'heure uniquement dans le datetimepicker s'il vous plait ?