Comment formater un champ Date ACF dans Elementor

ACF est un super plugin permettant (entre autres) de rajouter des champs à vos contenus dans WordPress. Il existe différents types de champs : textes, images, relations, etc et l’un des types de champ est un champ date.

Les dates sont stockées dans la base de données dans un certain format, et lorsqu’on souhaite réafficher cette date en front sur le site, on peut changer le format d’affichage pour passer par exemple de « 01/01/2023 » à « 1 Janvier 23 »

Php fournit plusieurs fonctions permettant de changer le type de formatage

En appelant dans un champ Elementor une valeur Date ACF, on ne peut pas choisir son formatage

Mais que peut on faire pour pouvoir formater cette valeur ? Hé bien il existe une solution, mais qui implique de passer par la création de shortcode.

En résumé, nous allons définir un nouveau shortcode prenant comme attribut le nom du champ ACF, et le formatage souhaité. Voici ce à quoi va ressembler notre shortcode au final :

[acf_date field='date_debut' date_format='MMM']

Ce shortcode prend 2 paramètres :

• acf_date field est l’identifiant du champ date ACF, dans mon cas « date_debut »
• date_format correspond au formatage souhaité de la date, dans mon cas « MMM » ramène le mois dans sa version courte, par ex : « juil. »

voici la liste des paramètres utilisables pour formater votre date (source : https://unicode-org.github.io/icu/userguide/format_parse/datetime/#datetime-format-syntax)

Voici le code PHP permettant de faire fonctionner ce shortcode,

// On définit la fonction utilisée par le shortcode
function acf_date_shortcode( $atts ) {
	// extract attributs
	extract( shortcode_atts( array(
		'field'			=> '',
		'post_id'		=> false,
		'format_value'	=> true,
		'date_format' 	=> ''
	), $atts ) );
// On récupère le champ acf
	$acf_date = get_field( $field, $post_id, $format_value );
// On en crée une date ç partir de la date récupérée d'ACF
	$date = DateTime::createFromFormat('d/m/Y', $acf_date);
// On initialise la manière dont on va formater la date, remarquez bien le fr_FR pour bien l'avoir en français
	$formatter = new IntlDateFormatter('fr_FR', IntlDateFormatter::FULL, IntlDateFormatter::NONE);
// On utilise pour formater la chaine de formatage qu'on passe en paramètre du
	$formatter->setPattern($date_format);
// On applique le formatage souhaité sur notre date
	$date_format_fr = $formatter->format($date);
// On retourne le résultat pour l'afficher à l'emplacement du shortcode
	return $date_format_fr;
}
// on créé le shortcode
add_shortcode( 'acf_date', 'acf_date_shortcode' );

Pour rajouter ce code, vous pouvez utiliser soit le rajouter dans le functions.php de votre thème enfant, ou encore via un plugin comme code snippet ()

Une fois le code rajouté, vous pourrez utiliser le shortcode qui va vous permettre de formater un champ date ACF comme vous voulez.
Cela fonctionne aussi très bien dans une loop de posts, comme c’est mon cas ici