Sélecteur de date
LhDatePicker est un composant de sélection de date et d'heure, prenant en charge plusieurs modes de sélection : date, mois, année, etc.
Utilisation de base
<script setup lang="ts">
import { ref } from 'vue'
const baseDate = ref(new Date(2024, 0, 1))
</script>
<template>
<LhDatePicker v-model="baseDate" />
</template><script>
export default {
data() {
return {
baseDate: new Date(2024, 0, 1),
}
},
}
</script>
<template>
<LhDatePicker v-model="baseDate" />
</template>État désactivé
<script setup lang="ts">
import { ref } from 'vue'
const disabledDate = ref(new Date())
</script>
<template>
<LhDatePicker v-model="disabledDate" disabled />
</template><script>
export default {
data() {
return {
disabledDate: new Date(),
}
},
}
</script>
<template>
<LhDatePicker v-model="disabledDate" disabled />
</template>Format de date
<script setup lang="ts">
import { ref } from 'vue'
const formatDate = ref(new Date())
</script>
<template>
<LhDatePicker v-model="formatDate" format="MM/dd/yyyy" />
</template><script>
export default {
data() {
return {
formatDate: new Date(),
}
},
}
</script>
<template>
<LhDatePicker v-model="formatDate" format="MM/dd/yyyy" />
</template>Bouton d'effacement
<script setup lang="ts">
import { ref } from 'vue'
const clearDate = ref(new Date())
</script>
<template>
<LhDatePicker v-model="clearDate" clearable />
</template><script>
export default {
data() {
return {
clearDate: new Date(),
}
},
}
</script>
<template>
<LhDatePicker v-model="clearDate" clearable />
</template>Tailles
<script setup lang="ts">
import { ref } from 'vue'
const smallDate = ref(new Date())
const mediumDate = ref(new Date())
const largeDate = ref(new Date())
</script>
<template>
<LhDatePicker v-model="smallDate" size="small" />
<LhDatePicker v-model="mediumDate" size="medium" />
<LhDatePicker v-model="largeDate" size="large" />
</template><script>
export default {
data() {
return {
smallDate: new Date(),
mediumDate: new Date(),
largeDate: new Date(),
}
},
}
</script>
<template>
<LhDatePicker v-model="smallDate" size="small" />
<LhDatePicker v-model="mediumDate" size="medium" />
<LhDatePicker v-model="largeDate" size="large" />
</template>Modes de sélection
mode prend en charge 'date' (par défaut) / 'month' / 'year'. Dans le panneau, un clic sur le titre permet de descendre niveau par niveau : date → mois → année ; en mode mois/année, le panneau s'ouvre directement sur la grille correspondante et un clic effectue la sélection et referme le panneau (sans bouton en bas de panneau).
<script setup lang="ts">
import { ref } from 'vue'
const monthDate = ref(new Date())
const yearDate = ref(new Date(2024, 0, 1))
</script>
<template>
<LhDatePicker v-model="monthDate" mode="month" />
<LhDatePicker v-model="yearDate" mode="year" />
</template><script>
export default {
data() {
return {
monthDate: new Date(),
yearDate: new Date(2024, 0, 1),
}
},
}
</script>
<template>
<LhDatePicker v-model="monthDate" mode="month" />
<LhDatePicker v-model="yearDate" mode="year" />
</template>Espace réservé, lecture seule et personnalisation
placeholder personnalise le texte indicatif ; readonly met en lecture seule (le panneau est visible mais non sélectionnable) ; range-separator personnalise le séparateur d'intervalle ; cell-class-name ajoute une classe personnalisée aux cellules de date ; popper-class personnalise le style du panneau.
<script setup lang="ts">
import { ref } from 'vue'
const dp1 = ref(null)
const dp2 = ref(new Date())
</script>
<template>
<!-- Texte indicatif -->
<LhDatePicker v-model="dp1" placeholder="Sélectionner une date d'arrivée" />
<!-- Lecture seule -->
<LhDatePicker :model-value="dp2" readonly />
</template><script>
export default {
data() {
return {
dp1: null,
dp2: new Date(),
}
},
}
</script>
<template>
<!-- Texte indicatif -->
<LhDatePicker v-model="dp1" placeholder="Sélectionner une date d'arrivée" />
<!-- Lecture seule -->
<LhDatePicker :model-value="dp2" readonly />
</template>DatePicker API
Remarque : la sélection
datetimeet la sélection d'intervalle ne disposent actuellement que d'une réservation de type, sans interface de sélection associée (les colonnes horaires et le panneau d'intervalle ne sont pas implémentés, voir le registre de la famille P-08). Lorsqu'une valeur d'intervalle[Date, Date]est transmise de l'extérieur, le panneau peut l'afficher, mais la validation dans le panneau ne remplace pas la valeur d'intervalle.
| Propriété | Description | Type | Valeur par défaut |
|---|---|---|---|
| modelValue | Date liée | Date | [Date, Date] | null |
| mode | Mode de sélection | "date" | "month" | "year" | "datetime" | 'date' |
| size | Taille | "small" | "medium" | "large" | "mini" | "x-large" | 'medium' |
| disabled | Désactivé | boolean | false |
| clearable | Afficher le bouton d'effacement | boolean | true |
| placeholder | Texte indicatif (à défaut, généré selon le format, à partir du pack de langue datepicker.year/month) | string | '' |
| format | Format de date | string | 'yyyy-MM-dd' |
| readonly | Champ de saisie en lecture seule | boolean | true |
| rangeSeparator | Séparateur d'intervalle | string | '~' |
| cellClassName | — | (date: Date) => string | — |
| popperClass | — | string | — |
| sx | Propriétés de mise en page rapide (par exemple { mt: 2, w: '50%' }), converties en style inline appliqué à l'élément racine du déclencheur (le panneau flottant n'est pas affecté) | LhSxProps | — |
DatePicker Events
| Événement | Description | Type |
|---|---|---|
| update:model-value | Déclenché lorsque la valeur change | (value: Date | [Date, Date]) => void |
| change | Déclenché lorsque la valeur est confirmée | (value: Date | [Date, Date]) => void |
Définitions de types
Les structures de types TypeScript exportées par ce composant sont présentées ci-dessous (extraction automatique à partir des sources packages/components/date-picker/src/types.ts et @lh-ui/share/core/* ; cliquez sur chaque entrée pour afficher la définition complète ; la description des propriétés se trouve dans le tableau Props ci-dessus) :
LhDatePickerProps
export interface LhDatePickerProps {
modelValue?: Date | [Date, Date] | null
mode?: LhDatePickerMode
size?: LhComponentSize
disabled?: boolean
clearable?: boolean
placeholder?: string
format?: string
readonly?: boolean
rangeSeparator?: string
cellClassName?: (date: Date) => string
popperClass?: string
/** Propriétés de mise en page rapide sx */
sx?: LhSxProps
}LhDatePickerMode (provient de @lh-ui/share/core/date-picker)
/**
* Mode du DatePicker
*/
export type LhDatePickerMode = 'date' | 'month' | 'year' | 'datetime'LhComponentSize (provient de @lh-ui/share/core/shared)
export type LhComponentSize = (typeof LH_SIZE_CONST)[keyof typeof LH_SIZE_CONST]