如何让jQuery UI Datepicker适配移动端屏幕？

我帮你整理了一套针对小屏设备的CSS适配方案，直接加到你的项目里就能解决自适应问题：

核心移动端适配CSS代码 #

/* 针对宽度≤768px的移动端屏幕 */
@media (max-width: 768px) {
  /* 让日期选择器容器自适应父容器 */
  .ui-datepicker {
    width: 100% !important;
    max-width: 320px; /* 可选：限制最大宽度避免在大屏手机上过于松散 */
    margin: 0 auto; /* 居中显示 */
    font-size: 14px; /* 整体缩小字体适配小屏 */
  }

  /* 调整表头导航按钮的大小，适配触控操作 */
  .ui-datepicker-prev, .ui-datepicker-next {
    padding: 4px 8px !important;
    font-size: 12px;
  }

  /* 优化月份年份标题的显示 */
  .ui-datepicker-title {
    font-size: 14px;
    padding: 6px 0;
  }

  /* 调整日历单元格间距，确保一行能放下7个日期 */
  .ui-datepicker-calendar td {
    padding: 2px !important;
  }

  /* 放大日期按钮的触控区域，避免误点 */
  .ui-datepicker-calendar .ui-state-default {
    width: 36px;
    height: 36px;
    line-height: 36px;
    font-size: 14px;
    padding: 0 !important;
  }

  /* 可选：增强选中日期的视觉效果，在小屏上更醒目 */
  .ui-datepicker-calendar .ui-state-active {
    font-size: 16px;
    font-weight: bold;
  }
}

关键调整说明 #

• 容器自适应：通过width:100%让选择器贴合父容器宽度，max-width避免在大屏手机上过度拉伸
• 触控友好优化：缩小导航按钮内边距、放大日期按钮的触控区域，解决移动端手指点击容易失误的问题
• 布局适配：减少单元格padding，确保日历在小屏上能完整显示一行7个日期，不会换行或溢出
• 字体统一缩放：整体缩小字体尺寸，让所有元素在小屏上比例协调

如果你的Datepicker有自定义类或特殊结构，只需要把上述选择器替换成对应的类名即可。要是遇到弹出位置溢出屏幕的情况，还可以结合JS动态调整Datepicker的弹出坐标，但大部分场景下上面的CSS就足够解决自适应问题了。

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