Comment définir une date par défaut pour le champ de formulaire de sélection de date

Souhaitez-vous que votre sélecteur de date se charge avec une date par défaut ? Lorsque vous utilisez le format Sélecteur de date sur le champ de formulaire Date/Heure, vous pouvez facilement sélectionner une date dans une fenêtre contextuelle. Mais saviez-vous que vous pouvez également définir facilement une date par défaut pour ce champ qui commence par la date d'aujourd'hui ? Dans ce tutoriel, nous vous montrerons comment y parvenir.

Création du formulaire

Tout d'abord, vous devrez créer votre formulaire et ajouter le champ de formulaire Date/Heure à votre formulaire. Dans l'onglet Avancé, assurez-vous d'avoir sélectionné Sélecteur de date pour le Type.

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

Définir la date par défaut

Avec l'un des extraits de code, vous devrez les copier et les coller sur votre site. Si vous avez besoin d'aide pour ajouter des extraits de code à votre site, veuillez consulter ce tutoriel.

Ajouter l'extrait de code pour tous les sélecteurs de date

/**
 * Set today's date as default date for all date pickers.
 *
 * @link https://wpforms.com/developers/how-to-set-a-default-date-for-your-date-picker-form-field/
 */

function wpf_dev_date_picker_default() {
    ?>

    <script type="text/javascript">

        window.wpforms_datepicker = {

            defaultDate: "today",
            disableMobile: "true"

        }

    </script>

    <?php
}

add_action( 'wpforms_wp_footer_end', 'wpf_dev_date_picker_default', 30 );

Ajouter l'extrait de code pour les sélecteurs de date dans un formulaire spécifique

Pour définir une date par défaut pour les Sélecteurs de date dans un formulaire spécifique, vous pouvez utiliser cet extrait de code mais changez le _1287 pour correspondre à votre propre ID de formulaire. Si vous avez besoin d'aide pour trouver votre ID de formulaire, veuillez consulter ce tutoriel.

/**
 * Set today's date as default date for all date pickers inside the specific form.
 *
 * @link https://wpforms.com/developers/how-to-set-a-default-date-for-your-date-picker-form-field/
 */

function wpf_dev_date_picker_default() {
    ?>

    <script type="text/javascript">

        // Run this on all date pickers inside the form ID 1287
        window.wpforms_1287 = window.wpforms_1287 || {};
        window.wpforms_1287.datepicker = {

            defaultDate: "today",
            disableMobile: "true"

        }

    </script>

    <?php
}

add_action( 'wpforms_wp_footer_end', 'wpf_dev_date_picker_default', 30 );

Ajouter l'extrait de code pour un champ de sélecteur de date spécifique dans un formulaire spécifique

Pour définir une date par défaut pour un champ spécifique dans un formulaire spécifique, vous pouvez utiliser cet extrait de code mais changez le _1287 pour correspondre à votre propre ID de formulaire et mettez à jour le _4 pour correspondre à l'ID du champ. Si vous avez besoin d'aide pour trouver votre ID de formulaire, veuillez consulter ce tutoriel.

/**
 * Set today's date as default date for a specific date picker inside a specific form.
 *
 * @link https://wpforms.com/developers/how-to-set-a-default-date-for-your-date-picker-form-field/
 */

function wpf_dev_date_picker_default() {
    ?>

    <script type="text/javascript">

        // Run this on the date field ID 4 inside the form ID 1287
        window.wpforms_1287_4 = window.wpforms_1287_4 || {};
        window.wpforms_1287_4.datepicker = {

            defaultDate: "today",
            disableMobile: "true"

        }

    </script>

    <?php
}

add_action( 'wpforms_wp_footer_end', 'wpf_dev_date_picker_default', 30 );

Et c'est tout ce dont vous avez besoin pour définir une date par défaut. Lorsque la page se charge, le champ Date chargera automatiquement la date actuelle.

Souhaitez-vous également apprendre à définir une plage de dates ou plusieurs dates sélectionnables à partir de votre sélecteur de date ? Consultez notre article sur Comment autoriser les plages de dates ou plusieurs dates dans le sélecteur de date.

Action de référence

wpforms_wp_footer_end

FAQ

Puis-je simplement définir une date par défaut par un nom de classe CSS personnalisé ?

R : Absolument ! Assurez-vous d'abord d'avoir ajouté un nom de classe à votre champ de formulaire Date/Heure dans l'onglet Avancé.

Dans notre exemple, le nom de la classe CSS que nous utilisons est customdatecode.

Une fois que vous avez enregistré le nom de la classe CSS du formulaire, ajoutez cet extrait de code à votre site.

/**
 * Set today's date as default date for all date pickers from a CSS class name.
 *
 * @link https://wpforms.com/developers/how-to-set-a-default-date-for-your-date-picker-form-field/
 */

function wpf_dev_date_picker_default() {
    ?>

    <script type="text/javascript">

        jQuery( '.customdatecode' ).each( function () {

            var form   = jQuery( this ).closest( '.wpforms-form' ),
                formID  = form.data( 'formid' ),
                fieldID = jQuery(this).data('field-id' );
            window['wpforms_' + formID + '_' + fieldID] = {

                datepicker:  {
                    defaultDate: 'today',
                    disableMobile: 'true'
                }

            }

        } );
    </script>

    <?php
}

add_action( 'wpforms_wp_footer_end', 'wpf_dev_date_picker_default', 30 );

Maintenant, sur n'importe quel formulaire contenant un sélecteur de date avec ce nom de classe CSS, la date d'aujourd'hui sera automatiquement définie comme date pour ce champ.

Q : Est-ce que cela fonctionnera sur les appareils mobiles ?

R: Tous les appareils mobiles varient avec la fonctionnalité par défaut de l'OS, donc la date ne sera pas remplie automatiquement lors de la visualisation depuis des appareils mobiles.

Q: Comment puis-je définir la date minimale et la date par défaut pour la date actuelle ?

R: Absolument ! Pour définir la date par défaut et la date minimale de votre sélecteur de date à la date d'aujourd'hui, utilisez simplement cet extrait de code.

/**
 * Set today's date as the default and minimum date for all date pickers.
 *
 * @link https://wpforms.com/developers/how-to-set-a-default-date-for-your-date-picker-form-field/
 */

function wpf_dev_date_picker_default() {
    ?>

    <script type="text/javascript">

        window.wpforms_datepicker = {

            defaultDate: "today",
            minDate: "today",
            disableMobile: "true"
        }

    </script>

    <?php
}

add_action( 'wpforms_wp_footer_end', 'wpf_dev_date_picker_default', 30 );