有没有办法在 bootstrap-datetimepicker 中禁用月份/视图模式按钮？

Posted 2023-02-15

【中文标题】有没有办法在 bootstrap-datetimepicker 中禁用月份/视图模式按钮？

【英文标题】：Is there a way to disable the month/viewmode button in bootstrap-datetimepicker?

【发布时间】：2021-11-26 19:20:26

【问题描述】：

我已将引导程序从版本 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();
    );

【参考方案1】：

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

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

$(dateDiv).datetimepicker( maxView: 1 )

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

该选择器已被弃用，取而代之的是 eonasdan-bootstrap-datetimepicker，它可以选择设置 minimum 视图，但不能设置 maximum 视图。如果您想添加该选项，则需要深入了解 the code for that version。

有一个更新版本的 Eonasdan 选择器，现在称为 tempus dominus，目前处于 alpha 阶段。该版本提供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
     
   
)

【讨论】：

我用的是asp.net，tempus dominus能用吗？

是的，我在MVC5项目中使用过，没有问题。

你能详细说明你是如何让它在 asp.net 上工作的吗？您是否修改了 bundle/config 文件？

【参考方案2】：

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

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