如何为jQuery Datepicker添加同级组件及将头部组件移至侧边

我明白你想要的效果——在横屏模式下把自定义的蓝色头部组件放到Datepicker的侧边，同时保留日历本身的垂直结构：箭头在日历顶部、日历表格居中、确定/关闭按钮在底部，只有新增的头部组件单独在侧边。之前的flex设置导致变形，核心原因是没有把日历的核心元素（箭头栏、日历表、按钮）归为一个垂直排列的整体，直接给.ui-datepicker加flex会打乱内部原有布局。

下面是调整后的实现方案：

步骤1：重构日历内部结构 #

首先，我们需要把Datepicker的原生核心元素（箭头头部、日历表格、按钮容器）包裹到一个新的容器里，这样在flex布局时，自定义头部和这个核心容器是两个并列的flex项，不会互相干扰内部布局。

if(window.innerHeight < window.innerWidth){ 
  // 1. 创建核心容器，包裹日历原有内容
  const $coreContainer = jQuery('<div class="ui-datepicker-core"></div>');
  // 把除了要新增的头部之外的原有元素移到核心容器里
  jQuery(".ui-datepicker").children().appendTo($coreContainer);
  
  // 2. 添加自定义头部到Datepicker最前面
  jQuery(".ui-datepicker").prepend(headerHtml);
  
  // 3. 把核心容器放回Datepicker
  jQuery(".ui-datepicker").append($coreContainer);
  
  // 4. 应用flex布局
  jQuery(".ui-datepicker").css({
    'display': 'flex',
    'align-items': 'flex-start', // 让两个flex项顶部对齐
    'gap': '10px' // 侧边头部和核心容器之间留间距，可自行调整
  });
}

步骤2：给核心容器添加垂直布局样式 #

通过CSS确保核心容器内部保持原有的垂直块级布局，这样箭头、日历、按钮的位置就不会乱：

.ui-datepicker-core {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 让按钮固定在底部，日历部分占满中间空间 */
  height: 100%; /* 确保和侧边头部高度一致 */
}

/* 保留原生Datepicker的头部（箭头部分）的原有样式 */
.ui-datepicker-header {
  display: block !important;
}

/* 确保日历表格和按钮容器保持块级 */
.ui-datepicker-calendar,
.ui-datepicker-buttonpane {
  display: block;
}

关键说明 #

• 我们把日历的原生内容都放到了.ui-datepicker-core容器里，这个容器用flex-direction: column保持垂直排列，完美保留了箭头在顶、按钮在底的原有结构。
• .ui-datepicker作为外层flex容器，只负责把自定义头部和核心容器横向排列，不会影响内部元素的布局。
• justify-content: space-between能让按钮容器自动固定在核心容器的底部，即使日历高度变化也能保持位置。
• 加gap是为了让侧边头部和日历之间有合适的间距，避免挤在一起。

这样调整后，横屏模式下自定义蓝色头部会在Datepicker的侧边，而日历本身的结构完全符合你的要求，不会出现变形问题。

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