[英]Bootstrap datetimepicker / date picker not displaying calendar. Cannot pick a date
I'm trying to get bootstrap datetimepicker to work in conjunction with Datatables so that it filters the datatable when a date is picked. 我正在尝试使引导datetimepicker与Datatables一起使用,以便在选择日期时过滤数据表。 Problem is, it just shows up as an input bar on my page, there is no calendar or calendar symbol.
问题是,它只是在我的页面上显示为输入栏,没有日历或日历符号。 It sounds like a CDN/library reference issue but I've double checked and seem to have them all loaded:
听起来像CDN /图书馆参考问题,但我已经仔细检查了一下,似乎都装了它们:
. 。 Jquery .
jQuery的。 moment.js .
moment.js。 Bootstrap .
引导程序。 bootstrap-datetimepicker.min.js .
bootstrap-datetimepicker.min.js。 bootstrap-datetimepicker.min.css
自举datetimepicker.min.css
I've made sure Moment is loaded before bootstrap and jquery. 我确保在启动Bootstrap和JQuery之前先加载Moment。 I believe that is all the references I need?Any help would be much appreciated.
我相信这是我需要的所有参考资料,我们将不胜感激。 Thanks
谢谢
<div class="container">
<div class='col-md-4'>
<div class="form-group">
<div class='input-group date' id='from'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-md-4'>
<div class="form-group">
<div class='input-group date' id='to'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<script>
$(function () {
$('#from').datetimepicker({
format: 'DD MMMM YYYY',
extraFormats: ['DD MM YYYY', 'DD.MM.YYYY',
'DD/MM/YYYY', 'DD MMM YYYY', 'DD.MMM.YYYY', 'DD/MMM/YYYY', 'DD MMMM YYYY',
'DD.MMMM.YYYY', 'DD/MMMM/YYYY']
}).on('dp.change', function (e) {
UpdateDataCount();
});
$('#to').datetimepicker({
format: 'DD MMMM YYYY',
extraFormats: ['DD MM YYYY', 'DD.MM.YYYY',
'DD/MM/YYYY', 'DD MMM YYYY', 'DD.MMM.YYYY', 'DD/MMM/YYYY', 'DD MMMM YYYY',
'DD.MMMM.YYYY', 'DD/MMMM/YYYY']
}).on('dp.change', function (e) {
UpdateDataCount();
});
});
UpdateDataCount: function () {
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
var from = $('#from').datetimepicker("getDate");
var to = $('#to').datetimepicker("getDate");
//data being searched
var startDate = new Date(data[2]);
//if true show row/ if not, don't
if (from == null && to == null) { return true; }
if (from == null && startDate <= to) { return true; }
if (to == null && startDate >= from) { return true; }
if (startDate <= to && startDate >= from) { return true; }
return false;
}
);
}
</script>
I'd be interested to see what your console is doing but I don't think you want to be repeatedly pushing a function, rather invoking it on change... 我很想知道您的控制台在做什么,但是我不希望您想重复推送功能,而是在更改时调用它...
I got it working and there were issues with comparing moment Dates with vanilla Dates: 我开始使用它,并且比较即时日期和原始日期存在问题:
var table = $('#example').DataTable();
var from = null;
var to = null;
$('#from').datetimepicker({
format: 'DD MMMM YYYY',
extraFormats: ['DD MM YYYY', 'DD.MM.YYYY',
'DD/MM/YYYY', 'DD MMM YYYY', 'DD.MMM.YYYY', 'DD/MMM/YYYY', 'DD MMMM YYYY',
'DD.MMMM.YYYY', 'DD/MMMM/YYYY'
]
}).on('dp.change', function(e) {
from = e.date;
table.draw();
});
$('#to').datetimepicker({
format: 'DD MMMM YYYY',
extraFormats: ['DD MM YYYY', 'DD.MM.YYYY',
'DD/MM/YYYY', 'DD MMM YYYY', 'DD.MMM.YYYY', 'DD/MMM/YYYY', 'DD MMMM YYYY',
'DD.MMMM.YYYY', 'DD/MMMM/YYYY'
]
}).on('dp.change', function(e) {
to = e.date;
table.draw();
});
$.fn.dataTable.ext.search.push(
function(settings, data, dataIndex) {
//data being searched
var startDate = moment(data[2], "DD/MM/YYYY");
if (!from && !to) {
return true;
}
if (!from && startDate.isSameOrBefore(to, "day")) {
return true;
}
if (!to && startDate.isSameOrAfter(from, "day")) {
return true;
}
if (startDate.isSameOrBefore(to, "day") && startDate.isSameOrAfter(from, "day")) {
return true;
}
return false;
}
);
Working JSFiddle here . 在这里工作的JSFiddle。
Hope that helps. 希望能有所帮助。
为了回答我自己的问题,datetimepicker与bootstrap 4不兼容
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.