Bootstrap3远程数据模态框中Datepicker/Timepicker不显示，调z-index无效

Hey there, let's tackle this Bootstrap v3.3.7 modal + date/time picker issue you're facing. I’ve walked through your scenario and code context, and here are the most actionable fixes to get those pickers popping up correctly:

1. Re-initialize Pickers After Dynamic Content Loads #

The core problem here is likely that your date/time picker initialization code only runs once when the page first loads. Since your modal content is loaded remotely, and the parent div holding the modal is itself refreshed via AJAX, the new input elements added dynamically never get the picker bindings attached.

Fix: Hook into Bootstrap’s modal events and your AJAX refresh callbacks to re-initialize the pickers right after new content loads. Here’s how to do it:

// For remote modals: Re-init pickers immediately after modal content finishes loading
$('.modal').on('loaded.bs.modal', function() {
    // Initialize datepicker on inputs inside the modal
    $(this).find('.datepicker').datepicker({
        zIndexOffset: 1100 // Ensures picker sits above Bootstrap's default modal z-index (1050)
        // Add your existing datepicker options here
    });
    
    // Initialize timepicker similarly
    $(this).find('.timepicker').timepicker({
        zIndex: 1100
        // Add your existing timepicker options here
    });
});

// If your parent div is refreshed via AJAX, add picker re-init to the success callback
$.ajax({
    url: 'your-div-refresh-url',
    success: function(data) {
        $('#your-target-div').html(data);
        // Re-init pickers for any modals in the refreshed content
        $('.modal').find('.datepicker').datepicker({ zIndexOffset: 1100 });
        $('.modal').find('.timepicker').timepicker({ zIndex: 1100 });
    }
});

2. Fix Z-Index Hierarchy Properly #

You tried adjusting .datepicker’s z-index, but you might not be targeting the right element. Bootstrap modals have a default z-index of 1050, so your pickers need to sit above that. Also, timepickers often have their own container elements that need z-index adjustments too.

CSS Fix:

/* For jQuery UI Datepicker (adjust selector if you're using a different library) */
.ui-datepicker {
    z-index: 1100 !important;
}

/* For Bootstrap Timepicker (adjust selector to match your library's widget class) */
.bootstrap-timepicker-widget {
    z-index: 1100 !important;
}

Note: Using !important is a quick fix, but ideally, load your custom CSS after the picker’s default stylesheet to override without it.

3. Rule Out Basic Conflicts & Missing Setup #

Double-check these quick wins to make sure nothing is blocking the pickers:

• Library Order: Ensure your scripts are loaded in the correct sequence: jQuery → Bootstrap JS → Datepicker/Timepicker JS.
• Console Errors: Press F12 to open your browser’s dev tools and check the Console tab for JS errors—even a small syntax error can halt picker initialization.
• Class Names: Confirm the datepicker and timepicker classes are correctly applied to the input fields in your remote modal content.

Bonus: Manual Modal Initialization (If Data Attributes Aren’t Working) #

If relying on data-toggle and data-href isn’t playing nice with the AJAX-refreshed div, initialize the modal manually to have full control:

$('.basic').on('click', function(e) {
    e.preventDefault();
    const modalUrl = $(this).data('href');
    const $modal = $('#your-modal-id');
    
    // Load remote content into the modal
    $modal.load(modalUrl, function() {
        $modal.modal('show');
        // Re-init pickers right after showing the modal
        $(this).find('.datepicker').datepicker({ zIndexOffset: 1100 });
        $(this).find('.timepicker').timepicker({ zIndex: 1100 });
    });
});

Give these steps a try—one of them should resolve the issue. Let me know if you need further tweaks!

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