Bootstrap表单Datepicker失效：EJS文件中Script标签未执行求助

I’ve helped a handful of developers troubleshoot this exact issue—when your Bootstrap Datepicker fails to work in an EJS template, the root cause almost always boils down to associated script tags not executing properly. Let’s break down the common pitfalls and fixes step by step:

1. Verify Script Loading Order #

Bootstrap Datepicker depends on jQuery and Bootstrap’s core JS to function. If you load scripts out of order, the Datepicker won’t have the dependencies it needs to initialize. Stick to this strict sequence:

• First load jQuery
• Then load Bootstrap’s JS file
• Next load the Bootstrap Datepicker JS file
• Finally, add your custom initialization script

2. Ensure Scripts Run After DOM is Rendered #

EJS templates often render dynamic content, so if your initialization script runs before the target datepicker input exists in the DOM, it’ll fail. Fix this by:

• Placing your script right before the closing </body> tag (so it runs after all DOM elements load)
• Wrapping your initialization code in $(document).ready() to guarantee it waits for the DOM:

  $(document).ready(function() {
    $('#your-datepicker-id').datepicker({
      format: 'yyyy-mm-dd',
      autoclose: true
      // Add your other Datepicker options here
    });
  });
  

3. Check for Hidden or Misplaced Scripts in EJS #

EJS’s conditional rendering or partial templates can sometimes hide your script tags. For example:

• If your script is nested inside an <% if(condition) %> block that doesn’t evaluate to true, it won’t be included in the final HTML.
• If you’re using partials (like header.ejs), make sure your Datepicker scripts aren’t buried in a partial that’s loaded before the form input.

Always verify the final rendered HTML: right-click your page → View Page Source, then search for your Datepicker script to confirm it’s present.

4. Fix Script Path Errors #

If your Datepicker JS file isn’t loading at all, you’ll see a 404 error in your browser’s DevTools (F12 → Network tab). Double-check the file path in your script tag—adjust relative paths like ../js/bootstrap-datepicker.min.js to match your project’s folder structure.

Working EJS Example #

Here’s a clean, correct implementation to reference:

<!DOCTYPE html>
<html>
<head>
  <!-- Load CSS first -->
  <link rel="stylesheet" href="/css/bootstrap.min.css">
  <link rel="stylesheet" href="/css/bootstrap-datepicker.min.css">
</head>
<body>
  <!-- Your form with Datepicker input -->
  <div class="container mt-4">
    <form>
      <div class="form-group">
        <label for="event-date">Event Date</label>
        <input type="text" class="form-control" id="event-date">
      </div>
    </form>
  </div>

  <!-- Load scripts in correct order -->
  <script src="/js/jquery.min.js"></script>
  <script src="/js/bootstrap.min.js"></script>
  <script src="/js/bootstrap-datepicker.min.js"></script>
  
  <!-- Initialize Datepicker -->
  <script>
    $(document).ready(function() {
      $('#event-date').datepicker({
        format: 'dd/mm/yyyy',
        todayHighlight: true
      });
    });
  </script>
</body>
</html>

Double-check these four areas, and your Datepicker should start working as expected.

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