Comment créer des intervalles de temps supplémentaires pour le Sélecteur d'heure

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

Cependant, si vous avez besoin d’incréments de temps plus spécifiques, vous pouvez facilement créer des intervalles supplémentaires pour mieux répondre à vos besoins. Dans ce tutoriel, nous allons vous montrer comment !

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 devrez 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 );

Création de votre formulaire

Ensuite, vous devrez créer un nouveau formulaire et y ajouter un champ Date / Heure. Aux fins de ce tutoriel, nous allons séparer la date en un champ et l’heure en un champ distinct.

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

Étant donné que nous avons ajouté notre extrait en premier, une fois que nous aurons ajouté le champ Heure à notre formulaire et ouvert les Options avancées, nous verrons dans le menu déroulant pour Intervalles le nouvel intervalle que nous venons d’ajouter.

Sélectionnez la nouvelle option et enregistrez le formulaire.

Maintenant, lorsque vos visiteurs rempliront le formulaire, ils verront que le sélecteur d’heure affiche des blocs toutes les 5 minutes.

Souhaitez-vous également créer des formats supplémentaires pour le champ Heure ? Consultez notre article sur Comment créer des formats supplémentaires pour le sélecteur d’heure du champ Date Heure.

Filtre de référence

Référence de 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 );