Bootstrap导致CalendarExtender日历控件格式错乱问题排查

我之前也踩过Bootstrap和AJAX Control Toolkit的CalendarExtender冲突的坑，主要是Bootstrap的全局样式（比如box-sizing、form-control的默认样式）干扰了日历控件的布局，给你几个实用的解决思路：

1. 自定义CSS重置日历控件样式 #

Bootstrap的全局样式会覆盖CalendarExtender的默认CSS，导致日历单元格错位、样式混乱。你可以添加专属CSS来修复：

/* 修复CalendarExtender与Bootstrap的样式冲突 */
.ajax__calendar_container {
    z-index: 1050 !important; /* 确保日历不会被其他Bootstrap组件遮挡 */
    box-sizing: content-box; /* 覆盖Bootstrap的border-box，还原日历默认盒模型 */
}

/* 重置日历内部元素的Bootstrap影响 */
.ajax__calendar .ajax__calendar_day,
.ajax__calendar .ajax__calendar_month,
.ajax__calendar .ajax__calendar_year,
.ajax__calendar .ajax__calendar_prev,
.ajax__calendar .ajax__calendar_next,
.ajax__calendar .ajax__calendar_title {
    padding: 2px 5px;
    border: none;
    background: transparent;
}

/* 给激活日期添加Bootstrap风格的高亮 */
.ajax__calendar .ajax__calendar_active {
    background-color: #007bff;
    color: #fff;
    border-radius: 4px;
}

2. 优化表单结构，避免样式冲突 #

你当前的TextBox同时混用了服务器端Width="50px"、inline stylewidth:50%和Bootstrap的form-control类，这会导致宽度样式冲突，间接影响日历的定位。建议用Bootstrap的栅格类来统一控制宽度：

<!-- 优化后的Start Date行结构 -->
<div class="row">
    <div class="form-group">
        <div class="col-sm-2"></div>
        <label class="control-label col-sm-2" for="DateFromtxt">Start Date:</label>
        <div class="col-sm-8">
            <!-- 用col-sm-6来控制输入框宽度，替代inline style -->
            <div class="col-sm-6 p-0">
                <asp:TextBox ID="DateFromtxt" runat="server" MaxLength="10" CssClass="form-control"></asp:TextBox>
                <ajaxToolkit:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="DateFromtxt" Format="yyyy-MM-dd"></ajaxToolkit:CalendarExtender>
            </div>
            <!-- 验证器添加Bootstrap的text-danger类，让提示更美观 -->
            <asp:RequiredFieldValidator ID="RequiredFieldValidator17" runat="server" ControlToValidate="DateFromtxt" ErrorMessage="* Start date Required" Display="Dynamic" CssClass="text-danger d-block"></asp:RequiredFieldValidator>
            <asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="* Enter Valid Date" TargetControlID="DateFromtxt" Display="Dynamic" CssClass="text-danger d-block"></asp:CustomValidator>
        </div>
    </div>
</div>

3. 检查容器的定位属性 #

Bootstrap的栅格col-*类默认是position: relative，可能会导致CalendarExtender的弹出日历定位偏移。如果上面的方法还没解决，可以给日历容器添加position: absolute的样式：

.ajax__calendar_container {
    position: absolute !important;
}

问题根源说明 #

Bootstrap的form-control类会给元素设置box-sizing: border-box，而CalendarExtender的默认样式是基于content-box计算尺寸的，两者的盒模型不一致就会导致日历单元格的大小、间距显示异常；另外，栅格的padding和margin也会干扰日历的弹出定位。

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