Résumé IA
Souhaitez-vous personnaliser les options de date du champ date et heure dans WPForms ? Le champ Date / Heure comprend deux options de format pour le sélecteur de date : Sélecteur de date, qui fournit à l'utilisateur un calendrier, ou Liste déroulante de dates.
Avec la sortie de la version 1.6.3, WPForms vous offre des options dans le constructeur de formulaires pour Limiter les jours et même Désactiver les dates passées ainsi que Limiter les heures. Si c'est tout ce que vous avez à faire, veuillez consulter cette documentation.
Ce tutoriel se concentrera davantage sur la personnalisation du champ Liste déroulante de dates et sur le calcul des blocs de dates pour le Sélecteur de date.
Il est important de se rappeler que si vous utilisez l'un des extraits de code de cette documentation, les options du constructeur de formulaires pour la limitation doivent être désactivées. Pour en savoir plus sur les options intégrées de limitation des dates, veuillez consulter cette documentation.
Création du formulaire
Avant d'ajouter des extraits, vous devrez créer votre formulaire et ajouter vos champs. Comme ce tutoriel est basé sur le champ Liste déroulante de dates, vous devrez ajouter au moins un champ Date.
Si vous avez besoin d'aide pour créer votre formulaire, veuillez consulter ce tutoriel.
Une fois que vous avez ajouté vos champs de date, assurez-vous d'avoir sélectionné le Type sur Liste déroulante de dates. Vous pouvez définir le Type de date en cliquant dans les options Avancées du champ du formulaire.
Personnalisation du champ Date
Pour personnaliser le champ Date, vous devrez ajouter l'un des extraits de code ci-dessous à votre site.
Si vous avez besoin d'aide pour apprendre à ajouter des extraits de code à votre site, veuillez consulter ce tutoriel.
Certains des extraits de code ci-dessous nécessiteront l'utilisation d'informations spécifiques sur l'ID du formulaire et ID du champ.
Utilisation d'extraits sur la liste déroulante de dates
Limiter le nombre de jours dans la liste déroulante pour correspondre au mois
Pour que le champ Jours corresponde au nombre de jours disponibles pour ce mois particulier, vous utiliseriez cet extrait.
/**
* Limit the days dropdown to match how many days are available for the selected month.
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_dev_days_dropdown_match_month( ) {
?>
<script type="text/javascript">
var date = new Date();
var month = date.getMonth();
var year = date.getFullYear();
var totalDays = 31; // Default day amount
jQuery(function($){
$( 'select[id$="-month"]' ).on( 'change', function(){
month = $(this).val();
totalDays = daysInMonth(month, year);
$(this).parent().find( 'select[id$="-day"] option:not(:first-child)').each(function(){
$(this).remove();
});
for (var i = 1; i <= totalDays; i++) {
$(this).parent().find( 'select[id$="-day"]' ).append($( "<option></option>" ).attr( "value", i).text(i));
}
});
$( 'select[id$="-year"]' ).on( 'change', function(){
year = $(this).val();
totalDays = daysInMonth(month, year);
$(this).parent().find( 'select[id$="-day"] option:not(:first-child)').each(function(){
$(this).remove();
});
for (var i = 1; i <= totalDays; i++) {
$(this).parent().find('select[id$="-day"]').append($( "<option></option>" ).attr( "value", i).text(i));
}
});
});
function daysInMonth (month, year) {
return new Date(year, month, 0).getDate();
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_days_dropdown_match_month', 30 );
Limiter les mois, les jours et les années dans la liste déroulante de dates
Les extraits ci-dessous mettront à jour les champs de liste déroulante pour n'afficher que 5-12 (mai-décembre) pour les mois disponibles, 20-31 pour les jours disponibles et 2020-2021 pour les années disponibles. Vous pouvez modifier les champs selon vos besoins.
Il existe deux manières différentes d'appliquer cela :
- Tous les champs de liste déroulante de dates dans un formulaire spécifique
- Une liste déroulante de dates spécifique dans un formulaire spécifique.
Tous les champs de liste déroulante de dates dans un formulaire spécifique
L'extrait ci-dessous ne s'appliquera qu'au formulaire ID 10.
/**
* Filters labels and options within the date field’s dropdown format.
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_dev_datetime_date_dropdowns( $args, $form_id, $field ) {
$form_id = (int) $form_id;
// Only apply if the form's ID is 10
if ( $form_id === 10 ) {
// Set the lower and upper limits for each date dropdown
$args[ 'months' ] = range( 5, 12 );
$args[ 'days' ] = range( 20, 31 );
$args[ 'years' ] = range( 2024, 2025 );
}
return $args;
}
add_filter( 'wpforms_datetime_date_dropdowns', 'wpf_dev_datetime_date_dropdowns', 10, 3 );
Cibler une liste déroulante de dates spécifique dans un formulaire spécifique
Ci-dessous s'appliquera à la liste déroulante de dates avec l'ID de champ 3 dans le formulaire ID 10.
/**
* Filters labels and options within the date field’s dropdown format.
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_dev_datetime_date_dropdowns( $args, $form_id, $field ) {
$form_id = (int) $form_id;
// Only apply if the form's ID is 10 and field ID 3
if ( $form_id === 10 && $field['id'] == 3) {
// Set the lower and upper limits for each date dropdown
$args[ 'months' ] = range( 5, 12 );
$args[ 'days' ] = range( 20, 31 );
$args[ 'years' ] = range( 2024, 2025 );
}
return $args;
}
add_filter( 'wpforms_datetime_date_dropdowns', 'wpf_dev_datetime_date_dropdowns', 10, 3 );
Démarrer la liste déroulante de dates à partir d'aujourd'hui
Dans votre liste déroulante de dates, vous pouvez faire en sorte que le mois, le jour et l'année soient automatiquement définis sur le mois, le jour et l'année d'aujourd'hui à l'aide de cet extrait.
/**
* Select from today's date going forward within the range limit specified below
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_dev_datetime_date_dropdowns( $args, $form_id, $field ) {
if( $form_id != 143 ) {
return $args;
}
// Set the lower and upper limits for each date dropdown
$args[ 'months' ] = range( date('m'), 12 );
$args[ 'days' ] = range( date('d'), 31 );
$args[ 'years' ] = range( date('Y'), 2030 );
return $args;
}
add_filter( 'wpforms_datetime_date_dropdowns', 'wpf_dev_datetime_date_dropdowns', 10, 3 );
Utilisation d'extraits sur le sélecteur de dates
Désactiver les dates passées et n'afficher que les 31 prochains jours
Dans cet extrait, nous allons désactiver toute date passée et n'autoriser la sélection que jusqu'à 31 jours à partir de la date actuelle pour l'ID de formulaire 1137 et l'ID de champ 14. N'oubliez pas de modifier ces ID pour qu'ils correspondent à votre propre formulaire et ID de champ. Si vous n'êtes pas sûr de l'endroit où trouver ces ID, veuillez consulter ce tutoriel.
/**
* Disable past dates, allow for selection for today + the next 31 days
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_limit_date_picker() {
?>
<script type="text/javascript">
var d = new Date();
window.wpforms_1137_14 = window.wpforms_1137_14 || {};
window.wpforms_1137_14.datepicker = {
disableMobile: true,
// Don't allow users to pick dates less than 1 days out
minDate: d.setDate(d.getDate()),
maxDate: d.setDate(d.getDate() + 31),
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_limit_date_picker', 10 );
Afficher les dates d'hier, d'aujourd'hui et de demain
En utilisant le new Date().fp_incr(-1), vous pouvez facilement contrôler combien de jours minDate et maxDate affichent en augmentant simplement le nombre. L'utilisation du symbole négatif (-) devant le nombre signifie qu'il s'agira de jours passés.
Parce que nous voulons que notre formulaire commence seulement à partir d'hier, nous commencerons avec le minDate n'autorisant que le (-1) et terminerons avec le (1) (donc il inclura aujourd'hui et demain) pour le maxDate
/**
* Allow date picker yesterday, today, and tomorrow
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_dev_limit_date_picker() {
?>
<script type="text/javascript">
window.wpforms_datepicker = {
disableMobile: true,
// Don't allow users to pick past dates
minDate: new Date().fp_incr(-1), // 1 day in the past
// Don't allow users to pick any more than today
maxDate: new Date().fp_incr(1) // 1 day in the future
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_limit_date_picker', 10 );
Afficher les dates à partir du jour suivant et au-delà pour le sélecteur de dates
Vous pouvez facilement utiliser cet extrait de code qui exclura tous les jours passés (y compris aujourd'hui).
Changez simplement le +1), pour le nombre de jours que vous souhaitez restreindre le sélecteur.
/**
* Show dates from the next day and onwards
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_limit_date_picker() {
?>
<script type="text/javascript">
var d = new Date();
window.wpforms_datepicker = {
disableMobile: true,
// Don't allow users to pick dates less than 1 days out
minDate: d.setDate(d.getDate() + 1),
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_limit_date_picker', 10 );
Bloquer des plages de dates spécifiques pour le sélecteur de dates
Pour bloquer des plages de dates spécifiques dans le sélecteur de dates, utilisez cet extrait.
/**
* Limit the dates available in the Date Time date picker: Block out certain date ranges
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_limit_date_picker() {
?>
<script type="text/javascript">
var d = new Date();
window.wpforms_datepicker = {
disableMobile: true,
// Don't allow users to pick specific range of dates
disable: [
{
from: "2024-12-24",
to: "2024-12-26"
},
{
from: "2024-12-31",
to: "2025-01-01"
}
]
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_limit_date_picker', 10 );
Autoriser uniquement des dates spécifiques du mois
Si vous souhaitez que les utilisateurs ne sélectionnent que certains jours du mois dans le sélecteur de dates, vous pouvez utiliser l'extrait ci-dessous. Dans cet exemple, seuls le 5e et le 20e de chaque mois restent sélectionnables et toutes les autres dates sont désactivées.
Pour modifier les jours autorisés, remplacez les numéros de jour à la ligne 23 (la condition qui vérifie la valeur du jour) par les jours que vous souhaitez utiliser.
Vous pouvez remplacer les chiffres 5 et 20 à la ligne 16 par d'autres numéros de date pour correspondre à vos propres exigences.
Limiter la distance à laquelle les utilisateurs peuvent choisir les dates dans le sélecteur de dates
Si vous souhaitez limiter la date future que les utilisateurs peuvent sélectionner dans le sélecteur de dates, utilisez cet extrait de code.
/**
* Don't allow date to be selected after maxDate
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_dev_limit_date_picker() {
?>
<script type="text/javascript">
window.wpforms_datepicker = {
disableMobile: true,
// Don't allow users to pick past dates
minDate: new Date(),
// Don't allow users to pick dates after Dec 31, 2025
maxDate: new Date( '2025-12-31' )
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_limit_date_picker', 10 );
Exclure tous les jours passés et les lundis dans le sélecteur de dates
Pour limiter tous les jours passés et les lundis futurs, utilisez cet extrait.
/**
* Don't allow users to pick Mondays
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_dev_limit_date_picker() {
?>
<script type="text/javascript">
window.wpforms_datepicker = {
disableMobile: true,
// Don't allow users to pick past dates
minDate: new Date(),
// Don't allow users to pick Mondays
enable: [
function(dateObj){
return dateObj.getDay() !== 1;
}
]
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_limit_date_picker', 10 );
Afficher un message lorsque la date actuelle est sélectionnée
Pour cet exemple, nous allons afficher un message pop-up lorsque la date actuelle est sélectionnée.
/**
* Display pop up message when current date is selected
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_dev_check_date() {
?>
<script type="text/javascript">
// Only display the message if the form ID is 323 and the field ID is 4
window.wpforms_323_4 = window.wpforms_323_4 || {};
window.wpforms_323_4.datepicker = {
mode: "single",
onClose: function(selectedDates, dateStr, instance) {
var today = new Date();
if (selectedDates[0].toLocaleDateString("en-US") == today.toLocaleDateString("en-US")) {
alert( 'Custom Message: You have selected todays date' );
this.clear();
}
}
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_check_date', 10 );
Désactiver un jour de la semaine spécifique
Pour cet exemple, nous voulons désactiver complètement les dimanches de notre sélecteur de dates en utilisant cet extrait.
/**
* Disable a specific day of the week
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_limit_date_picker_disable_specific_weekday() {
?>
<script type="text/javascript">
var d = new Date();
// Only apply to the form ID 420 and the field ID 1
window.wpforms_420_1 = window.wpforms_420_1 || {};
window.wpforms_420_1.datepicker = {
disableMobile: true,
// Don't allow users to pick specific day of the week
disable: [
function(date) {
// return true to disable
// 1 = Monday; 2 = Tuesday; 3 = Wednesday; 4 = Thursday; 5 = Friday; 6 = Saturday; 0 = Sunday
return (date.getDay() === 0);
}
]
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_limit_date_picker_disable_specific_weekday', 10 );
Dans l'extrait, le return (date.getDay() === 0); désactive uniquement les dimanches. Chaque jour est représenté par un numéro spécifique.
- 1 = Lundi
- 2 = Mardi
- 3 = Mercredi
- 4 = Jeudi
- 5 = Vendredi
- 6 = Samedi
- 7 = Dimanche
Trouvez simplement la représentation numérique de votre jour spécifique et mettez à jour l'extrait pour correspondre au jour souhaité.
La window.wpforms_420_1 représente l'ID du formulaire (420) et l'ID du champ pour notre sélecteur de date (_1). Vous devrez mettre à jour ces deux ID pour correspondre à votre propre ID de formulaire et ID de champ.
Pour obtenir de l'aide afin de trouver les numéros de votre ID de formulaire et de champ, veuillez consulter ce tutoriel.
Changer le jour de début du calendrier
Pour changer le jour de début de la semaine dans le sélecteur de date, vous utiliserez cet extrait. Gardez à l'esprit que le lundi représente le numéro un et que les jours de la semaine continuent dans l'ordre numérique.
/**
* Change the start day of the week
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_dev_set_start_day() {
?>
<script type="text/javascript">
window.wpforms_datepicker = {
disableMobile: true,
"locale": {
// Enter the number for the day you want the week to start
// 1 = Monday; 2 = Tuesday; 3 = Wednesday; 4 = Thursday; 5 = Friday; 6 = Saturday; 7 = Sunday
"firstDayOfWeek": 1 // start week on Monday
}
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_set_start_day', 10 );
Désactiver les dates futures
L'utilisation de cet extrait définira la date maximale comme la date d'aujourd'hui (actuelle) afin que les utilisateurs ne puissent pas sélectionner les dates futures.
/**
* Disable future dates
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_dev_limit_date_picker() {
?>
<script type="text/javascript">
window.wpforms_datepicker = {
disableMobile: true,
// Don't allow users to pick past dates
maxDate: new Date(),
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_limit_date_picker', 10 );
Cibler un ID de formulaire et un ID de champ spécifiques dans le sélecteur de date
Lorsque vous utilisez le Sélecteur de date, vous pouvez cibler un seul formulaire ou un champ de Date spécifique dans un formulaire spécifique.
Dans les exemples d'extraits ci-dessous, vous verrez window.wpforms_21_1. Où le _21 représente l'ID du formulaire et le _1 représente l'ID du champ.
Si vous avez besoin d'aide pour trouver les numéros de votre ID de formulaire et de champ, veuillez consulter ce tutoriel.
Voici quelques extraits de code. Le premier permettra de sélectionner uniquement les 30 derniers jours :
/**
* Only allow for a selection of only the past 30 days
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_dev_limit_date_picker() {
?>
<script type="text/javascript">
window.wpforms_21_1 = window.wpforms_21_1 || {};
window.wpforms_21_1.datepicker = {
disableMobile: true,
// Don't allow users to pick more than 30 days in the past and exclude future dates
minDate: new Date().fp_incr(-30)
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_limit_date_picker', 10 );
Cet extrait de code suivant permettra de sélectionner les 30 derniers jours et "aujourd'hui" :
/**
* Only allow for a selection of the past 30 days and "today"
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_dev_limit_date_picker() {
?>
<script type="text/javascript">
window.wpforms_21_1 = window.wpforms_21_1 || {};
window.wpforms_21_1.datepicker = {
disableMobile: true,
// Don't allow users to pick more than 30 days in the past
minDate: new Date().fp_incr(-30),
maxDate: "today"
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_limit_date_picker', 10 );
Limiter à un seul jour pour le mois en cours uniquement
Dans cet exemple, nous n'accepterons les rendez-vous que pour un seul jour du mois en cours.
/**
* Limit to 1 single day for the current month only.
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_dev_one_day_current_month( ) {
?>
<script type="text/javascript">
window.wpforms_datepicker = {
disableMobile: true,
disable: [
function(date) {
var currentDate = new Date();
var currentMonth = currentDate.getMonth();
var currentYear = currentDate.getFullYear();
var selectedMonth = date.getMonth();
var selectedYear = date.getFullYear();
if (selectedMonth !== currentMonth || selectedYear !== currentYear) {
return false;
}
var day = date.getDay();
var firstDayOfMonth = new Date(selectedYear, selectedMonth, 1).getDay();
var offset = (day >= firstDayOfMonth) ? (day - firstDayOfMonth) : (day + 7 - firstDayOfMonth);
var secondThursday = new Date(selectedYear, selectedMonth, offset + 8);
if (date.getDate() === secondThursday.getDate() && day === 4) {
return false;
}
return true;
}
]
};
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_one_day_current_month', 30 );
Dans cet exemple, nous définissons dynamiquement une date minimale pour un deuxième champ de sélection de date, en nous assurant qu'il est au moins 21 jours après la première date sélectionnée.
/**
* Add 21 days to the first date selection to block these days from the second selection
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_dev_block_days_date_selection( ) {
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
$( "#wpforms-1277-field_19" ).flatpickr({
dateFormat: "m/d/Y",
onClose: function( selectedDates, dateStr, instance ) {
if ( selectedDates.length > 0 ) {
var minSecondDate = new Date( selectedDates[0] );
// Adding 21 days to the selected 1st date
minSecondDate.setDate( minSecondDate.getDate() + 21 );
$( "#wpforms-1277-field_20" ).flatpickr({
minDate: minSecondDate,
dateFormat: "m/d/Y"
});
}
}
});
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_block_days_date_selection', 30 );
Traduction des sous-libellés Date et Heure
Pour traduire les sous-libellés "Date" et "Heure" dans le champ Date/Heure, vous pouvez utiliser cet extrait de code :
``/**
* Translate Date and Time sublabels in the Date/Time field
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options
*/
function custom_translate_date_time_sublabels( $properties, $field, $form_data ) {
// Check if the field is of type 'date-time'
if ( 'date-time' === $field['type'] ) {
// Change the sublabel for the date field
if ( isset( $properties['inputs']['date']['sublabel']['value'] ) ) {
$properties['inputs']['date']['sublabel']['value'] = __( 'Your Translated Date Label');
}
// Change the sublabel for the time field
if ( isset( $properties['inputs']['time']['sublabel']['value'] ) ) {
$properties['inputs']['time']['sublabel']['value'] = __( 'Your Translated Time Label');
}
}
return $properties;
}
add_filter( 'wpforms_field_properties', 'custom_translate_date_time_sublabels', 10, 3 );
Pour utiliser cet extrait :
- Remplacez 'Votre libellé de date traduit' par votre traduction souhaitée pour "Date"
- Remplacez 'Votre libellé d'heure traduit' par votre traduction souhaitée pour "Heure"
Par exemple, pour traduire les libellés en espagnol :
$properties['inputs']['date']['sublabel']['value'] = __( 'Fecha');
$properties['inputs']['time']['sublabel']['value'] = __( 'Tiempo');
Un dernier rappel, n'oubliez pas que si vous utilisez l'un des extraits de code de ce document, les options du constructeur de formulaire pour la limitation doivent être désactivées. Pour en savoir plus sur les options intégrées de limitation des dates, veuillez consulter cette documentation.
Et voilà tout ce dont vous avez besoin pour personnaliser le Sélecteur déroulant de date ou le Sélecteur de date ! Souhaitez-vous personnaliser le sélecteur de date pour autoriser une plage de dates ou plusieurs dates ? Essayez notre tutoriel sur Comment autoriser une plage de dates ou plusieurs dates dans le sélecteur de date.