当用户多次单击视图标题时,预期的行为是:天 -> 月 -> 年 -> 十年。我需要禁用几十年视图(附截图)。这样做用户不能进一步“年”查看模式。
问问题
5470 次
5 回答
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>
于 2018-02-27T12:13:38.693 回答
2
这是一个解决方法,感谢 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();
});
});
于 2016-03-09T11:34:32.280 回答
1
您也可以通过更改 bootstrap-datetimepicker.js 来做到这一点,这是最简单的方法。您所要做的就是在编辑器中打开 bootstrap-datetimepicker.js -
查找并注释该行 -
yearsViewHeader.eq(1).attr('title', options.tooltips.selectDecade);
就在“yearsView.find('.disabled').removeClass('disabled');”行下方添加这一行
yearsViewHeader.eq(1).addClass('disabled');
您可以在此链接中找到更详细的步骤
于 2016-04-30T10:06:33.430 回答
1
这是最好和简单的解决方案。
.datepicker-dropdown .datepicker-years .datepicker-switch, .datepicker-dropdown .datepicker-months .datepicker-switch {
pointer-events: none;
}
于 2018-10-24T00:25:27.137 回答
0
这对我使用 Bootstrap Datepicker 有用
$('#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
}
});
}
});
于 2020-05-18T19:16:50.250 回答