有没有办法禁用 bootstrap-datetimepicker 中的 month/viewmode 按钮？

Question

我已将 bootstrap 从版本 3 更新到版本 4，并注意到在使用 js 而不是 cshtml 创建日历时日历重叠。不需要返回超过几天，所以我想禁用将视图模式更改为月或年的月按钮。是否有我需要的特定 CSS 属性或者我是否需要编辑库中的代码？

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").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();
    });
}

Answer 1

这完全取决于您使用的是哪个日期时间选择器组件。

This one 允许您设置最大视图：

$(dateDiv).datetimepicker({ maxView: 1 })

但是，它从未更新为支持 Bootstrap 4.

如果您想添加该选项，该选择器已被弃用，取而代之的是 eonasdan-bootstrap-datetimepicker, which has an option to set the minimum view, but not the maximum view. You would need to dig in to the code for that version。

有更新版本的 Eonasdan 选择器，现在称为 tempus dominus, which is currently in alpha. That version provides options to turn the individual views on or off:

$(dateDiv).tempusDominus({
   display: {
     viewMode: 'date',
     components: {
       decades: false,
       year: false,
       month: false,
       date: true,
       hours: true,
       minutes: true,
       seconds: false
     }
   }
})

Answer 2

我最终通过禁用月份选择器开关中的指针事件来禁用它。

th.picker-switch[title="Select Month"] {
    pointer-events: none;
}

有没有办法禁用 bootstrap-datetimepicker 中的 month/viewmode 按钮？

Is there a way to disable the month/viewmode button in bootstrap-datetimepicker?

javascript

css

asp.net

bootstrap-4

twitter-bootstrap-3