求助：Bootstrap/jQuery DateTimePicker显示异常及时间框无法保持展开

Hey there, let's work through that persistent time-box collapse problem you're facing. From what you've described, you've already fixed most issues (like missing fonts and initial display chaos) but the time view still won't stay open—let's break down the likely causes and fixes:

1. Fix Resource Loading Order (Critical!) #

Your current resource load order has jQuery loading after Moment.js and some CSS files, which can break dependencies since both Bootstrap and the datetimepicker rely on jQuery. Here's the correct, dependency-respecting order:

<!-- Load jQuery first - everything else depends on it -->
<script src="~/lib/jquery/dist/jquery.min.js"></script>

<!-- Load Bootstrap CSS first, then datetimepicker CSS -->
<link href="~/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/bootstrap-datetimepicker-master/build/css/bootstrap-datetimepicker.css" rel="stylesheet" />

<!-- Load Bootstrap JS next -->
<script src="~/vendor/bootstrap/js/bootstrap.min.js"></script>

<!-- Load Moment.js (required for datetimepicker's date formatting) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>

<!-- Finally, load the datetimepicker plugin -->
<script src="~/bootstrap-datetimepicker-master/build/js/bootstrap-datetimepicker.min.js"></script>

2. Wrap Initialization in DOM Ready Handler #

If your initialization code runs before the #datetime element exists in the DOM, it can lead to partial or broken event binding. Always wrap your plugin code in a DOM ready check:

$(document).ready(function() {
  $("#datetime").datetimepicker({
    format: 'YYYY-MM-DD HH:mm'
  });
});

3. Remove Conflicting Standalone CSS #

You mentioned adding a bootstrap-standalone-css library—this is likely causing style or event conflicts with the full Bootstrap CSS you're already loading. Remove the standalone CSS file entirely to eliminate this potential clash.

4. Check for JavaScript Conflicts #

• Open your browser's DevTools (F12) and check the Console tab for any error messages (like duplicate jQuery loads or undefined variables).
• In the Network tab, verify all your JS/CSS files load successfully (no 404 errors).
• Ensure there's no other script on the page that's calling e.preventDefault() or e.stopPropagation() on click events—this can interfere with the datetimepicker's dropdown toggle behavior.

5. Verify Moment.js Compatibility #

You're using Moment.js 2.13.0, which is fairly old. While it should work with most versions of bootstrap-datetimepicker, if the above fixes don't work, try updating Moment.js to a more recent (but still compatible) version to rule out version mismatches.

Give these steps a try—most likely the resource order or DOM ready issue is causing the time-box to collapse immediately. Let me know if you still run into problems!

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