Comment créer des intervalles de temps supplémentaires pour le sélecteur de temps ?

Vous souhaitez personnaliser les intervalles de temps disponibles dans le sélecteur de temps du champ Date/Heure? Par défaut, le sélecteur de temps propose des intervalles de 15 minutes, 30 minutes et 1 heure.

intervalles de temps disponibles par défaut sélecteur de temps

Toutefois, si vous avez besoin d'intervalles de temps plus spécifiques, vous pouvez facilement créer des intervalles supplémentaires pour mieux répondre à vos besoins. Dans ce tutoriel, nous vous montrons comment faire !

Ajout d'intervalles de temps supplémentaires

Nous allons commencer par ajouter l'extrait de code qui créera des intervalles de temps supplémentaires dans notre générateur de formulaires. Pour ce faire, vous devez copier et coller cet extrait de code sur votre site.

Si vous avez besoin d'aide pour ajouter des extraits de code à votre site, veuillez consulter ce tutoriel.

/**
 * Add additional time intervals for the Time field Interval dropdown
 *
 * @link   https://wpforms.com/developers/how-to-create-additional-intervals-for-the-date-time-field-time-picker/
 */

function wpf_dev_datetime_time_intervals( $intervals ) {
      
     // Add time interval of 5 minutes
     $intervals[ '5' ] = esc_html__( '5 minutes', 'wpforms' );
     ksort( $intervals );
  
     return $intervals;
}

add_filter( 'wpforms_datetime_time_intervals' , 'wpf_dev_datetime_time_intervals', 10, 1 );

La variable $intervals[ '5' ] contiendra les minutes. Si vous souhaitez créer un bloc de 4 heures, par exemple, vous devez modifier le paramètre 5 à 240.

Création du formulaire

Ensuite, vous devez créer un nouveau formulaire et y ajouter un champ Date/Heure. Pour les besoins de ce tutoriel, nous allons séparer la date en un seul champ et l'heure en un champ distinct.

Si vous avez besoin d'aide pour créer votre formulaire, veuillez consulter cette documentation.

Comme nous avons ajouté notre extrait en premier, une fois que nous aurons ajouté le champ Time à notre formulaire et ouvert les options avancées, nous verrons dans le menu déroulant Intervals le nouvel intervalle que nous venons d'ajouter.

Sélectionnez la nouvelle option et enregistrez le formulaire.

des intervalles supplémentaires pour le sélecteur de temps sont maintenant disponibles une fois que le snippet est ajouté

Désormais, lorsque vos visiteurs rempliront le formulaire, ils verront le sélecteur de temps afficher des blocs toutes les 5 minutes.

Vous pouvez maintenant voir que les intervalles de temps supplémentaires sont correctement affichés dans la liste déroulante du nouveau champ de sélection de l'heure.

Vous souhaitez créer des formats supplémentaires pour le champ Heure? Consultez notre article sur la création de formats supplémentaires pour le sélecteur de date et d'heure.

Filtre de référence

Référence du filtre : wpforms_datetime_time_intervals

FAQ

Q : Puis-je ajouter plus d'un intervalle de temps à la fois ?

R : Absolument ! Vous pouvez en créer autant que vous le souhaitez en utilisant ce format pour votre extrait.

/**
 * Add additional time intervals for the Time field Interval dropdown
 *
 * @link   https://wpforms.com/developers/how-to-create-additional-intervals-for-the-date-time-field-time-picker/
 */
 
function wpf_dev_datetime_time_intervals( $intervals ) {
       
     // Add time interval of 5 minutes
     $intervals[ '5' ] = esc_html__( '5 minutes', 'wpforms' );
	
	 // Add time interval of 2 hours
	 $intervals[ '120' ] = esc_html__( '2 hours', 'wpforms' );
	
     ksort( $intervals );
   
     return $intervals;
}
 
add_filter( 'wpforms_datetime_time_intervals' , 'wpf_dev_datetime_time_intervals', 10, 1 );