如何调整Eonasdan Bootstrap-datetimepicker关闭按钮位置（非部件位置）

You’re absolutely correct—there’s no built-in configuration setting in the Eonasdan Bootstrap-datetimepicker docs to reposition the close button from the top of the widget to the bottom. But with a little CSS or a tiny bit of JavaScript, we can easily tweak this to fit your needs.

Option 1: Pure CSS (Visual Shift) #

If you just need the button to look like it’s at the bottom without changing the underlying DOM structure, absolute positioning is your friend. Here’s a snippet to implement this:

/* Make the picker container relative to anchor the button */
.bootstrap-datetimepicker-widget {
  position: relative;
  /* Add padding at the bottom to prevent overlap with date grids */
  padding-bottom: 45px;
}

/* Target the close button and position it at the bottom */
.bootstrap-datetimepicker-widget .btn[data-action="close"] {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  width: calc(100% - 16px);
}

/* Optional: Hide the original top placement if you don't want duplicate buttons */
.bootstrap-datetimepicker-widget .picker-switch + .btn[data-action="close"] {
  display: none;
}

This will pin the close button to the bottom edge of the picker, spanning its full width (minus padding), and ensures it doesn’t cover the date/time selection area.

Option 2: JavaScript (DOM Reordering) #

For a more structural change (so the button is actually part of the picker’s bottom layout flow), use JavaScript to move the button after the picker loads. This works well for responsive designs where absolute positioning might cause issues:

// Initialize your datetimepicker with existing config
$('#your-picker-element').datetimepicker({
  // Your config options here (e.g., format, minDate, etc.)
});

// Listen for the picker's "show" event to reposition the button
$('#your-picker-element').on('dp.show', function() {
  const closeButton = $('.bootstrap-datetimepicker-widget .btn[data-action="close"]');
  const pickerFooter = $('.bootstrap-datetimepicker-widget .picker-footer');

  // Append the button to the footer if it exists; create a footer if not
  if (pickerFooter.length) {
    pickerFooter.append(closeButton);
  } else {
    const newFooter = $('<div class="picker-footer" style="padding: 8px; border-top: 1px solid #ddd;"></div>');
    $('.bootstrap-datetimepicker-widget').append(newFooter);
    newFooter.append(closeButton);
  }
});

This script triggers when the picker opens, grabs the close button, and moves it into the picker’s footer (or adds a new footer if one isn’t present). This makes the button part of the widget’s natural layout, so it will adjust seamlessly with screen size changes.

Quick Tips #

• Replace #your-picker-element with the actual ID or class of your datetimepicker input.
• Adjust CSS values (like padding, bottom position) to match your app’s design system.
• Test on mobile devices to ensure the button remains accessible and doesn’t overlap other elements.

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