Souhaitez-vous personnaliser les options de date du champ Date/Heure dans WPForms ? Le champ Date / Heure comprend deux options de format pour le sélecteur de date : Date Picker, qui fournit à l'utilisateur un calendrier, ou Date Dropdown.
Avec la version 1.6.3, WPForms vous donne des options dans le constructeur de formulaire 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 besoin de faire, veuillez consulter cette documentation.
Ce tutoriel se concentrera davantage sur la personnalisation du champ Date Dropdown 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 ce document, les options de limitation du constructeur de formulaires 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 devez créer votre formulaire et ajouter vos champs. Comme ce tutoriel est basé sur le champ Date Dropdown, 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 que vous avez sélectionné la liste déroulante Type to Date. Vous pouvez définir le type de date en cliquant sur les options avancées du champ de formulaire.
Personnalisation du champ Date
Pour personnaliser le champ Date, vous devez 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écessitent l'utilisation d'informations spécifiques concernant l 'identifiant du formulaire et l'identifiant du champ.
Utilisation d'extraits dans la liste déroulante des dates
Limiter le nombre de jours dans la liste déroulante pour qu'il corresponde au mois
Pour que le champ Jours coïncide avec le nombre de jours disponibles pour le mois en question, vous devez utiliser l'extrait suivant.
/**
* 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 des dates
Les extraits ci-dessous mettront à jour les champs déroulants 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 y a deux façons différentes d'appliquer ce principe :
- Tous les champs déroulants de date dans un formulaire spécifique
- Une liste déroulante de dates spécifiques dans un formulaire spécifique.
Tous les champs déroulants de date dans un formulaire spécifique
L'extrait ci-dessous ne s'applique 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écifiques à l'intérieur d'un formulaire spécifique
Le texte ci-dessous s'appliquera à la liste déroulante de la date avec le champ ID 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 le menu déroulant de la date à partir de "aujourd'hui
Dans votre liste déroulante de dates, vous pouvez faire en sorte que le mois, le jour et l'année commencent automatiquement par défaut par le mois, le jour et l'année d'aujourd'hui en utilisant ce snippet.
/**
* 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 dans le sélecteur de date
Désactiver les dates passées et n'afficher que les 31 prochains jours
Dans cet extrait, nous allons désactiver toute date antérieure et ne permettre qu'une sélection jusqu'à 31 jours à partir de la date actuelle pour l'identifiant du formulaire. 1137 et l'ID du champ 14. N'oubliez pas de modifier ces identifiants pour qu'ils correspondent à vos propres identifiants de formulaire et de champ. Si vous ne savez pas où trouver ces identifiants, 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 la nouvelle Date().fp_incr(-1), vous pouvez facilement contrôler le nombre de jours que minDate et maxDate affichent en augmentant simplement le nombre. L'utilisation du symbole négatif (-) devant le nombre signifie qu'il s'agit de jours passés.
Comme nous voulons que notre formulaire ne commence qu'à partir d'hier, nous commencerons par la date minimale ( minDate ) en autorisant seulement le (-1) et nous terminerons par le (1) (pour inclure aujourd'hui et demain) pour la date maximale (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 pour le sélecteur de date
Vous pouvez facilement utiliser cet extrait de code qui exclura tous les jours passés (y compris aujourd'hui).
Il suffit de modifier le +1) pour qu'il corresponde au nombre de jours à l'avance que vous souhaitez limiter dans 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 date, 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 );
Limiter la date à laquelle les utilisateurs peuvent choisir les dates à l'intérieur du sélecteur de date.
Si vous souhaitez limiter la date future que les utilisateurs peuvent sélectionner dans le sélecteur de date, 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 date
Pour limiter tous les jours passés et les lundis à venir, 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 );
Affichage d'un message lorsque la date actuelle est sélectionnée
Dans cet exemple, nous allons afficher un message contextuel lorsque la date du jour 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 spécifique de la semaine
Pour cet exemple, nous voulons désactiver complètement les dimanches de notre sélecteur de date à l'aide de 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 retour (date.getDay() === 0) ; désactive uniquement les dimanches. Chaque jour est représenté par un nombre spécifique.
- 1 = lundi
- 2 = mardi
- 3 = mercredi
- 4 = jeudi
- 5 = vendredi
- 6 = samedi
- 7 = dimanche
Il suffit de trouver la représentation numérique de votre jour spécifique et de mettre à jour l'extrait pour qu'il corresponde au jour souhaité.
window.wpforms_420_1 représente l'ID du formulaire(420) et l'ID du champ de notre sélecteur de date(_1). Vous devrez mettre à jour ces deux identifiants pour qu'ils correspondent à vos propres identifiants de formulaire et de champ.
Pour vous aider à trouver vos numéros d'identification de formulaire et de champ, veuillez consulter ce tutoriel.
Modifier le jour de début du calendrier
Pour modifier le jour du sélecteur de date afin d'afficher le jour qui commence la semaine, vous utiliserez cet extrait. Gardez à l'esprit que le lundi représente le chiffre un et que les jours de la semaine se succèdent 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ésactivation des dates futures
L'utilisation de cet extrait définira la date maximale comme étant la date du jour (actuelle), de sorte que les utilisateurs ne pourront pas sélectionner des dates ultérieures.
/**
* 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 l'exemple ci-dessous, vous verrez window.wpforms_21_1. 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 vos numéros d'identification de formulaire et de champ, veuillez consulter ce tutoriel.
Voici quelques extraits de code. Le premier permet 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 );
L'extrait de code suivant permet 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 );
Limitation à un seul jour pour le mois en cours uniquement
Dans cet exemple, nous n'accepterons des 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 veillant à ce qu'elle soit 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-étiquettes de la date et de l'heure
Pour traduire les sous-étiquettes "Date" et "Heure" du 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 étiquette de date traduite" par la traduction souhaitée pour "Date".
- Remplacez "Votre étiquette de temps traduite" par la traduction de votre choix pour "Temps"
Par exemple, pour traduire les étiquettes en espagnol :
$properties['inputs']['date']['sublabel']['value'] = __('Fecha') ;
$properties['inputs']['time']['sublabel']['value'] = __('Tiempo') ;
Un dernier rappel : si vous utilisez l'un des extraits de code présentés dans ce document, les options de limitation du constructeur de formulaires doivent être désactivées. Pour en savoir plus sur les options intégrées de limitation des dates, veuillez consulter cette documentation.
C'est tout ce dont vous avez besoin pour personnaliser la liste déroulante des dates ou le sélecteur de dates! Souhaitez-vous personnaliser le sélecteur de date afin d'autoriser une plage de dates ou des dates multiples ? Essayez notre tutoriel sur Comment autoriser une plage de dates ou des dates multiples dans le sélecteur de date.