Le Date Picker de shadcn/ui : où sont passés les presets ?

Si vous travaillez avec l'écosystème React moderne, vous avez très certainement croisé shadcn/ui. Cette collection de composants s'est imposée comme le standard de facto pour concevoir des interfaces soignées et modulaires avec Tailwind CSS et Radix UI.

Pourtant, certains développeurs rencontrent un moment de confusion en explorant la documentation du sélecteur de date. Sous l'exemple "Date Picker with Presets", l'interface affiche fièrement des options prédéfinies : « Aujourd'hui », « Demain », « Dans une semaine ». Mais en copiant le code ou en inspectant le composant sous-jacent, surprise : aucune prop presets, aucune logique magique, aucun tableau de raccourcis tout prêt. Où sont-ils passés ?

L'illusion de la prop magique

Dans les bibliothèques UI traditionnelles comme Ant Design ou MUI, un tel composant expose généralement une API très prescriptive. On s'attend à écrire quelque chose comme :

<DatePicker presets={['today', 'tomorrow']} />

shadcn/ui prend le contre-pied absolu de cette approche monolithique. Il ne s'agit pas d'un package NPM installé dans vos node_modules, mais de code source directement déposé dans votre projet. Le composant Calendar n'est qu'une fine couche de styles appliquée sur la bibliothèque react-day-picker. Il n'embarque aucune opinion sur vos besoins métier.

La composition plutôt que la configuration

Si l'on regarde attentivement l'exemple fourni par la documentation, les presets ne sont pas une fonctionnalité interne du Date Picker : ils sont construits autour de lui. shadcn ne vous donne pas un sélecteur avec presets, il vous montre une recette d'assemblage :

• Un composant Select placé au-dessus du calendrier pour lister les choix rapides.
• Des fonctions utilitaires (souvent fournies par date-fns comme addDays) pour calculer dynamiquement les dates cibles.
• Le composant Popover qui englobe le tout pour gérer l'ouverture et la fermeture du menu.

Le code "visible" du composant ne contient aucun preset par défaut, car shadcn part du principe que « Dans 3 jours » n'a de sens que dans le contexte précis de votre produit.

Pourquoi cette absence est une excellente nouvelle

Ce qui ressemble à un manque au premier abord est en réalité un choix architectural délibéré et libérateur :

• Zéro surcharge inutile : Si vous n'avez besoin que d'un calendrier classique, votre bundle ne charge aucune logique de calcul temporel superflue.
• Contrôle total des règles métier : Que votre semaine commence le dimanche ou le lundi, ou que vos presets concernent des trimestres fiscaux spécifiques, vous gardez la main sur les calculs sans devoir contourner une API rigide.
• Personnalisation sans friction : Pas besoin d'écraser des classes CSS complexes ou d'injecter des slots obscurs pour changer l'apparence des boutons de raccourci.

En pratique : comment faire ?

Pour intégrer des presets, il vous suffit de créer un tableau d'objets dans votre propre page ou composant. Associez chaque libellé à un calcul retournant une instance de Date, puis appliquez cette valeur à l'état qui contrôle votre calendrier lors du clic ou du changement dans le Select.

Ne cherchez donc plus la prop magique dans le code source de shadcn/ui. Ce n'est pas un oubli : c'est une invitation à redécouvrir la puissance de la composition en React.