jQuery Datepicker选中日期hover样式居中问题排查与解决

数据老陈

2026-5-22

解决jQuery Datepicker选中日期hover效果居中的问题

嘿，我来帮你搞定这个Datepicker的居中问题！你现在的CSS里加了justify-content和align-items但没生效，核心原因很简单：这俩是Flex布局的专属属性，得先把日期单元格设置成Flex容器才行，而Datepicker默认的单元格可不是Flex布局哦～

具体修改方案

你需要给目标元素加上display: flex;，同时得针对hover状态单独写样式（因为hover对应的CSS类是.ui-state-hover，你之前的选择器没覆盖到这个状态）。修改后的CSS代码如下：

/* 默认日期单元格样式（包含居中设置） */
.ui-state-default, 
.ui-widget-content .ui-state-default, 
.ui-widget-header .ui-state-default {
    background: #fff;
    height: 32px;
    border: none;
    /* 关键：开启Flex布局，让居中属性生效 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 可选：移除默认padding，避免干扰居中效果 */
    padding: 0;
}

/* Hover状态的专属样式（确保hover时也保持居中） */
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover {
    background: #f5f5f5; /* 自定义hover背景色，可按需修改 */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 32px;
    border: none;
    padding: 0;
}