如何在CGI.pm中内联添加jQuery Datepicker脚本？

Since you’re stuck using CGI.pm per work requirements and the jQuery Datepicker isn’t playing nice with external JS files, here’s a solid way to inline the necessary script while keeping your existing ivalid.js and sthome.css fully functional:

Step 1: Load Core Dependencies First #

Datepicker relies on jQuery and jQuery UI, so make sure these are loaded before your inline code. You can use CDNs for simplicity (or swap in local file paths if you can’t use external resources) directly in your CGI.pm’s start_html call:

print $cgi->start_html(
    -title => 'Your Page Title',
    -style => [ { -src => '/path/to/sthome.css' } ],
    -script => [
        { -src => 'https://code.jquery.com/jquery-3.7.1.min.js' },
        { -src => 'https://code.jquery.com/ui/1.13.2/jquery-ui.min.js' },
        { -src => '/path/to/ivalid.js' }
    ]
);

Pro tip: If you’re worried about offline access, download the jQuery and jQuery UI files to your server and update the src paths to point to your local copies.

Step 2: Inline the Datepicker Initialization #

Add the Datepicker setup code as an inline script block right before you close the HTML. Wrapping it in $(document).ready() ensures it only runs once the page is fully loaded:

# Place this after your main page content, before end_html()
print qq~
<script type="text/javascript">
    $(document).ready(function() {
        // Attach Datepicker to your target input field
        $("#date_input").datepicker({
            // Customize these options to fit your needs
            dateFormat: "yy-mm-dd",
            changeMonth: true,
            changeYear: true,
            yearRange: "2000:+0"
        });
    });
</script>
~;

# Close out the HTML
print $cgi->end_html();

Step 3: Add the Target Input Field #

Make sure you have an input element with the matching ID so the Datepicker knows where to attach itself. Use CGI.pm’s form methods to generate this:

print $cgi->start_form(-method => 'POST');
print $cgi->label('Pick a Date: ');
print $cgi->textfield(-name => 'selected_date', -id => 'date_input');
print $cgi->submit(-value => 'Submit');
print $cgi->end_form();

Quick Notes to Remember: #

• No more load order issues: Inlining the initialization script guarantees it runs after jQuery and jQuery UI are fully loaded, which fixes the "undefined" errors you probably saw with external scripts.
• Existing assets stay intact: Your ivalid.js and sthome.css are still loaded via the start_html method, so they’ll keep working exactly as they did before.
• Tweak to your needs: Adjust the Datepicker options (like date format, year range, or disabled dates) to match your workflow.

内容的提问来源于stack exchange，提问作者Sanjay