如何禁用bootstrap-datetimepicker中切换视图模式的月份按钮？

不需要修改组件源代码，也不需要自定义CSS覆盖，你使用的bootstrap-datetimepicker组件本身提供了视图层级限制的配置参数，直接调用配置即可。

具体操作 #

你需要在现有的datetimepicker初始化配置逻辑中，新增maxViewMode配置，将值设置为'days'，即可限制用户最高只能切换到天级视图，无法点击月份标题进入月视图、年视图，完全符合你仅选择近几天数据的业务需求，同时从根源上避免切换视图导致的重叠问题。

修改后的代码片段如下，新增的配置行已标注：

function AddDateTimeControl(parent, control, rowIndex, controlIndex) {
    var dateTimeID = "datetimepicker" + controlIndex;

    var tooltipDiv = CreateTooltipDiv();
    var tooltipSpan = CreateTooltipSpan(control.ToolTip);
    var label = CreateControlLabel(control);
    //var icon = CreateIcon('fa-calendar');
    var icon = CreateIcon("calendar-alt-regular");

    tooltipDiv.appendChild(label);
    tooltipDiv.appendChild(icon);
    tooltipDiv.appendChild(tooltipSpan);

    var dateDiv = document.createElement("div");
    dateDiv.classList.add('input-group');
    dateDiv.classList.add('date');
    dateDiv.classList.add('date-time-control');
    dateDiv.style.color = "black";
    dateDiv.id = dateTimeID;

    var dateTextBox = document.createElement("input");
    dateTextBox.type = "text";
    dateTextBox.classList.add("form-control");
    dateTextBox.value = control.RawValues[0];

    MarkElementForSerialization(dateTextBox, rowIndex, control.ID, 0);

    var calControlSpan = document.createElement("span");
    calControlSpan.classList.add('input-group-append'); //input-group-addon?
    //span -> fa-calendar?

    dateDiv.appendChild(dateTextBox);
    dateDiv.appendChild(calControlSpan); //input-group-addon

    parent.appendChild(tooltipDiv);
    parent.appendChild(dateDiv);

    $(dateDiv).datetimepicker();
    $(dateDiv).data("DateTimePicker").sideBySide(true);
    $(dateDiv).data("DateTimePicker").date(new Date(Date.parse(control.RawValues[0])));
    $(dateDiv).data("DateTimePicker").format("MM/DD/YYYY HH:mm");
    // 新增以下配置行，限制最高可切换视图为天级
    $(dateDiv).data("DateTimePicker").maxViewMode('days');
    $(dateDiv).data("DateTimePicker").icons({
        time: "fa fa-clock-o",
        date: "fa fa-calendar",
        up: "fa fa-arrow-up",
        down: "fa fa-arrow-down",
        previous: "fa fa-chevron-left",
        next: "fa fa-chevron-right",
        today: "fa fa-clock-o",
        clear: "fa fa-trash-o"
    });

    $(dateTextBox).on('click', function() {
        $(dateDiv).data("DateTimePicker").toggle();
    });
}

如果需要彻底解决视图重叠的问题，可额外将datetimepicker组件升级到适配Bootstrap4的版本，视图渲染异常的问题会直接修复。

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