Bootstrap Datetimepicker - 禁用十年视图模式答案

【问题标题】：Bootstrap Datetimepicker - Disable decades view modeBootstrap Datetimepicker - 禁用十年视图模式
【发布时间】：2016-03-09 10:51:13
【问题描述】：

当用户多次单击视图标题时，预期的行为是：天 -> 月 -> 年 -> 十年。我需要禁用几十年视图（附截图）。这样做用户不能进一步“年”查看模式。

【问题讨论】：

Check the issue on github.
感谢您为我指明正确的方向
Vucko 指出，如果您不介意直接更改库文件本身，可以更改 showMode 函数 currentViewMode = Math.max(minViewModeNumber, Math.min (2, currentViewMode + dir));

标签： jquery twitter-bootstrap datetimepicker bootstrap-datetimepicker eonasdan-datetimepicker

【解决方案1】：

这里是 workaround，感谢 RomeroMsk。

CSS：

.datepicker-years .picker-switch {
cursor: default !important;
background: inherit !important;
}

JS：

$('#datetimepicker1').datetimepicker({
// your datetimepicker options go here, f.i.:
        inline: true,
        sideBySide: false,
        format : "DD/MMM/YYYY",
        maxDate : moment()
}).on('dp.show dp.update', function () {
$(".datepicker-years .picker-switch").removeAttr('title')
    //.css('cursor', 'default')  <-- this is not needed if the CSS above is used
    //.css('background', 'inherit')  <-- this is not needed if the CSS above is used
    .on('click', function (e) {
        e.stopPropagation();
    });
});

【讨论】：

我尝试了这种解决方法，通过在$(".datepicker-days .picker-switch") 中更改$(".datepicker-years .picker-switch") 来仅使用天数模式，但第一次它不起作用，也就是说我可以选择月份，年份，十年，但如果我回到日视图，则月份不再可选择。

【解决方案2】：

经过多年自己尝试解决此问题的方法，我终于破解了它。

我已经修改了@Sarpe 的答案，以便在加载时禁用十年按钮。 Sarpe 的解决方法要求用户在禁用之前单击一个日期。

$('#datetimepicker1').datetimepicker({
  inline: true,
  sideBySide: false,
  format: 'YYYY-MM-DD',
  maxDate: moment()
});

$(".datepicker-years .picker-switch").addClass('disable').on('click', function(e) {
  e.stopPropagation();
});

.bootstrap-datetimepicker-widget .datepicker-years thead .picker-switch {
  cursor: default !important;
  background: inherit !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/eonasdan-bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>

<div id="datetimepicker1"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/eonasdan-bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

【讨论】：

【解决方案3】：

您也可以通过更改 bootstrap-datetimepicker.js 来做到这一点，这是最简单的方法。您所要做的就是在编辑器中打开 bootstrap-datetimepicker.js -

查找并注释该行 -

yearsViewHeader.eq(1).attr('title', options.tooltips.selectDecade);

在 "yearsView.find('.disabled').removeClass('disabled'); 行下方添加这一行
```
yearsViewHeader.eq(1).addClass('disabled');
```

您可以在link找到更详细的步骤

【讨论】：

【解决方案4】：

这是最好和最简单的解决方案。

.datepicker-dropdown .datepicker-years .datepicker-switch, .datepicker-dropdown .datepicker-months .datepicker-switch {
    pointer-events: none;
}

【讨论】：

【解决方案5】：

这对我使用 Bootstrap 日期选择器很有用

  $('#datetimepicker1').datepicker({
        format: 'DD-MM-YYYY'            
    }).on('show', () => {
        const decadesDiv = document.querySelector(".datepicker-decades");
        if (decadesDiv) {
            decadesDiv.firstElementChild.firstElementChild.childNodes.forEach((tr,idx)  
            => {
                if (idx === 0)
                    tr.style.visibility = "hidden";
                else {
                    tr.children[1].addEventListener('click', (e) => { 
                      e.stopPropagation() });
                 //tr.children[1].style.visibility = "hidden"; //optional CSS 
                }
            });
        }
    });

【讨论】：