BjDatepicker

Selecteur de date React avec calendrier en portail, modes date/mois/annee, format JJ/MM/AAAA, bornes min et max.

Utilisation

import { useState } from 'react'
import { BjDatepicker } from '@flrxnt/dsbj/react'

export default function App() {
  const [date, setDate] = useState('')
  return (
    <BjDatepicker
      value={date}
      onChange={setDate}
      label="Date de naissance"
      min="01/01/1950"
      max="31/12/2010"
    />
  )
}

Libelle et hint

label et hint au-dessus du champ en lecture seule.

Date de naissanceFormat JJ/MM/AAAA affiché après sélection

import { useState } from 'react'
import { BjDatepicker } from '@flrxnt/dsbj/react'

export default function App() {
  const [date, setDate] = useState('')
  return (
    <BjDatepicker
      id="birth-react"
      value={date}
      onChange={setDate}
      label="Date de naissance"
      hint="Format JJ/MM/AAAA affiche apres selection"
      placeholder="Choisir une date"
    />
  )
}

Taille sm

size sm applique bj-datepicker--sm.

Compact

import { useState } from 'react'
import { BjDatepicker } from '@flrxnt/dsbj/react'

export default function App() {
  const [d, setD] = useState('')
  return <BjDatepicker value={d} onChange={setD} size="sm" label="Compact" />
}

Desactive

disabled sur l’input et le bouton calendrier.

Verrouillé

import { BjDatepicker } from '@flrxnt/dsbj/react'

export default function App() {
  return (
    <BjDatepicker value="01/01/2024" onChange={() => {}} label="Verrouille" disabled />
  )
}

Combinaisons

mode month avec min, max, hint et placeholder personnalise.

PériodeMois comptable

import { useState } from 'react'
import { BjDatepicker } from '@flrxnt/dsbj/react'

export default function App() {
  const [m, setM] = useState('')
  return (
    <BjDatepicker
      mode="month"
      value={m}
      onChange={setM}
      label="Periode"
      hint="Mois comptable"
      min="01/01/2020"
      max="12/12/2030"
      placeholder="MM/AAAA"
    />
  )
}

Valeur et onChange

value controlee et onChange(value: string) a la selection.

import { useState } from 'react'
import { BjDatepicker } from '@flrxnt/dsbj/react'

export default function App() {
  const [value, setValue] = useState('')
  function onPick(next: string) {
    console.log('picked', next)
    setValue(next)
  }
  return <BjDatepicker value={value} onChange={onPick} label="Echeance" mode="date" />
}

Aperçu — Date

Date de naissance

LunMarMerJeuVenSamDim

Mode mois

Mois de facturation

import { useState } from 'react'
import { BjDatepicker } from '@flrxnt/dsbj/react'

export default function App() {
  const [month, setMonth] = useState('')
  return (
    <BjDatepicker
      value={month}
      onChange={setMonth}
      mode="month"
      label="Mois de facturation"
    />
  )
}

Mode année

Année fiscale

import { useState } from 'react'
import { BjDatepicker } from '@flrxnt/dsbj/react'

export default function App() {
  const [year, setYear] = useState('')
  return (
    <BjDatepicker
      value={year}
      onChange={setYear}
      mode="year"
      label="Annee fiscale"
    />
  )
}

Props

Prop	Description
`value`	Valeur selectionnee. Format selon le mode : JJ/MM/AAAA, MM/AAAA ou AAAA.
`onChange`	Callback avec la valeur formatee lors de la selection.
`mode`	Mode de selection : date, month ou year.
`label`	Libelle au-dessus du champ.
`hint`	Texte d aide sous le libelle.
`placeholder`	Placeholder du champ.
`min`	Date minimale selectionnable, JJ/MM/AAAA.
`max`	Date maximale selectionnable, JJ/MM/AAAA.
`disabled`	Desactive le champ et le bouton calendrier.
`size`	Taille : sm ou md (defaut md).
`id`	Identifiant du champ texte ; sinon généré automatiquement.
`className`	Classe CSS sur le conteneur bj-datepicker.