BjDatepicker

Sélecteur de date Vue avec calendrier, modes date / mois / année, format JJ/MM/AAAA (ou MM/AAAA, AAAA), bornes min/max, taille sm ou md, placeholder, libellé, aide et état désactivé.

Utilisation

<script setup>
import { ref } from 'vue'
import { BjDatepicker } from '@flrxnt/dsbj/vue'

const date = ref('')
</script>

<template>
  <BjDatepicker
    v-model="date"
    label="Date de naissance"
    min="01/01/1950"
    max="31/12/2010"
  />
</template>

Aperçu — Date

LunMarMerJeuVenSamDim

Mode mois

<script setup>
import { ref } from 'vue'
import { BjDatepicker } from '@flrxnt/dsbj/vue'

const month = ref('')
</script>

<template>
  <BjDatepicker v-model="month" mode="month" label="Mois de facturation" />
</template>

Mode année

2020–2029
<script setup>
import { ref } from 'vue'
import { BjDatepicker } from '@flrxnt/dsbj/vue'

const year = ref('')
</script>

<template>
  <BjDatepicker v-model="year" mode="year" label="Année fiscale" />
</template>

Tailles (sm / md)

<BjDatepicker v-model="d1" label="Date (sm)" size="sm" />
<BjDatepicker v-model="d2" label="Date (md)" size="md" />

Mode × taille

<BjDatepicker v-model="m1" mode="month" label="Mois" size="sm" />
<BjDatepicker v-model="y1" mode="year" label="Année" size="md" />

Placeholder et hint

Choisissez une date dans la plage autorisée
<BjDatepicker
  v-model="evt"
  label="Événement"
  hint="Choisissez une date dans la plage autorisée"
  placeholder="Choisir une date…"
/>

Min et max

<BjDatepicker
  v-model="stay"
  label="Séjour"
  min="01/06/2026"
  max="30/09/2026"
/>

Désactivé

<BjDatepicker v-model="fixed" label="Date fixe" :disabled="true" />

Props

PropDescription
modelValueValeur sélectionnée (v-model). Format selon le mode : JJ/MM/AAAA, MM/AAAA ou AAAA.
modeMode de sélection : date, month ou year.
labelLibellé au-dessus du champ.
hintTexte d’aide sous le libellé.
placeholderPlaceholder du champ texte (sinon JJ/MM/AAAA, MM/AAAA ou AAAA selon le mode).
minDate minimale sélectionnable (JJ/MM/AAAA).
maxDate maximale sélectionnable (JJ/MM/AAAA).
disabledDésactive le champ et le bouton calendrier.
sizeTaille : sm (bj-datepicker--sm) ou md (défaut).