Discussion :

[Vengryn]

Bonjour à tous et à toutes

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 :



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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[gwyohm]

hello

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Vengryn]

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 :



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 ?

[gwyohm]

Dans une value, ça ne fonctionne pas.

https://codepen.io/gwyohm/pen/zYKvpda?editors=101

[Vengryn]

Merci beaucoup

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