Localize the jQuery datepicker when enqueued in the footer

[jadpm]

Since #29420 the jQuery datepicker script is getting localized every time it is enqueued. However, this only happens when it gets enqueued in the frontend header and in the admin header.

Plugins and themes that require and enqueue the datepicker script in the footer do not get the localization loaded. Given that scripts can be enqueued on demand only when the page content requires them this is a penalty for proper resources management.

A simple patch and solution would be to extend the new actions added in the #29420 changeset:
https://core.trac.wordpress.org/changeset/37908
so they get firec also on wp_print_footer_scripts:9 and admin_print_footer_scripts:9.

[gautam23]

Reproduction Report

Description

This report validates whether the issue can be reproduced.

Environment

• WordPress: 6.9-alpha-60093-src
• PHP: 8.2.28
• Server: nginx/1.29.1
• Database: mysqli (Server: 8.4.6 / Client: mysqlnd 8.2.28)
• Browser: Chrome 140.0.0.0
• OS: macOS
• Theme: Twenty Sixteen 3.6
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Steps taken

1. Activated a default theme (twenty-sixteen)
2. Changed site language to Gujarati
3. Added this to functions.php:

<?php
add_action('wp_enqueue_scripts', 'enqueue_footer_datepicker');
function enqueue_footer_datepicker() {
    // Enqueue jQuery UI Datepicker in the footer
    wp_enqueue_script('jquery-ui-datepicker', '', [], false, true);

    // Enqueue jQuery UI CSS (optional, for styling)
    wp_enqueue_style('jquery-ui-style', '//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css');
}

4. Added this to footer.php inside existing markup:

<input type="text" id="datepicker" />

    <script>
    jQuery(document).ready(function($) {
        $("#datepicker").datepicker();
    });
    </script>

5. Visited frontend and tested the new date-picker in footer.

Actual Results

1. ❌ Error condition does not occur (not-reproduced).
2. The date-picker in footer is localized.

Additional Notes

I'm not sure if my reproduction steps are correct, but this is what I inferred from the ticket.

Supplemental Artifacts

[changwoo]

Hello,

Following up on @gautam23's comment, I created a plugin to confirm if localization is correctly performed in the footer.

Below is the plugin code I wrote and tested.

Environment Tested On:

WordPress Version: 6.9
PHP Version: 8.3

Steps to Reproduce/Test:

1. Log in as an Administrator and activate the 'Issue #50040' plugin.
2. Please ensure you download the jQuery UI CSS file separately (as it is required for the Datepicker).
3. A new menu item, 'Issue #50040', will be created. Click this menu to navigate to the test page.
4. You should see the Datepicker visible on the page.
5. In the plugin code, you can adjust the constant value ISSUE_50040_FOOTER to control whether the JavaScript code is enqueued in the header or the footer.

My Finding:
I confirmed that the output is correctly displayed in my language (Korean) regardless of whether the script is enqueued in the header or the footer.

​https://imgur.com/e9AICLB

<?php
/**
 * Plugin Name: Issue #50040
 * Description: <a href="https://core.trac.wordpress.org/ticket/50040">WordPress Core issue #50040</a>
 */

const ISSUE_50040_FOOTER = true;

add_action( 'init', 'issue_50040_init' );

function issue_50040_init(): void {
        add_action( 'admin_menu', 'issue_50040_admin_menu' );
        add_action( 'admin_enqueue_scripts', 'issue_50040_admin_enqueue_scripts' );
}

function issue_50040_admin_menu(): void {
        add_menu_page(
                page_title: 'Issue #5540',
                menu_title: 'Issue #50040',
                capability: 'administrator',
                menu_slug: 'issue_50040',
                callback: 'issue_50040_output_page'
        );
}

function issue_50040_output_page(): void {
        echo '<div id="issue-50040"><h3>OKAY</h3><div id="issue-50040-datepicker"></div></div>';
}

function issue_50040_admin_enqueue_scripts( string $hook ): void {
        if ( 'toplevel_page_issue_50040' === $hook ) {
                if ( ISSUE_50040_FOOTER ) {
                        // footer
                        wp_enqueue_script( 'jquery-ui-datepicker', args: [ 'in_footer' => true] );
                        wp_enqueue_script(
                                'issue-50040',
                                plugins_url( 'script.js', __FILE__ ),
                                [ 'jquery', 'jquery-ui-datepicker' ],
                                args: [ 'in_footer' => true ]
                        );
                } else {
                        // header
                        wp_enqueue_script( 'jquery-ui-datepicker' );
                        wp_enqueue_script(
                                'issue-50040',
                                plugins_url( 'script.js', __FILE__ ),
                                [ 'jquery', 'jquery-ui-datepicker' ]
                        );
                }

                // CSS does not matter.
                wp_enqueue_style(
                        'issue-50040-datepicker',
                        plugins_url( 'jquery-ui.css', __FILE__ ),
                        [],
                        '1.13.3'
                );
                wp_enqueue_style( 'issue-50040', plugins_url( 'style.css', __FILE__ ) );
        }
}

script.js:

jQuery('document').ready(function ($) {
    $('#issue-50040-datepicker').datepicker();
});

style.css:

#issue-50040 {
    margin: 50px auto;
    padding: 1.2em 1.0em;
    background-color: #ffffff;
}

[akshaykungiri]

Reproduction Report

Description
This report documents testing performed to validate whether the reported issue can be reproduced.

Environment

• WordPress: trunk (latest)
• PHP: 8.2
• Server: Local development environment
• Database: MySQL
• Browsers: Chrome, Edge
• OS: (Window 10)
• Theme: Default theme (latest)
• MU Plugins: None
• Plugins: Custom test plugin (see below)

Steps Taken

• Changed the site language to Hindi, then repeated the test with Gujarati.
• Created and activated a custom test plugin to enqueue jQuery UI Datepicker in the footer:

<?php
/**
 * Plugin Name: Datepicker Footer Test
 */

add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_script(
        'jquery-ui-datepicker',
        false,
        array( 'jquery-ui-core' ),
        false,
        true // Enqueue in footer
    );
} );

add_action( 'wp_footer', function () {
    ?>
    <input type="text" id="test-datepicker" />
    <script>
        jQuery(function($){
            $('#test-datepicker').datepicker();
        });
    </script>
    <?php
} );

• Visited the frontend and initialized the datepicker input.
• Tested the behavior in Chrome and Edge browsers.
• Screenshots were taken during testing.

Actual Results

❌ The reported issue could not be reproduced.
The datepicker loaded in the footer was localized correctly in both Hindi and Gujarati without applying the patch.