Bootstrap-Datetimepicker与jQuery 3不兼容，无法正常工作

Question

Bootstrap-datetimepicker在使用jQuery 3.1.1时无法正常工作。我需要使用相同的jQuery库来运行所有其他相关函数。

- Karan Batra

---

jQuery 3.3.1？：O：O - philantrovert

@philantrovert 他来自未来 :)) - madalinivascu

@Karan Batra 请等到 jQuery 版本达到 v3.3.1，我们会在那时帮助你的 :)) - madalinivascu

请在此处提交您的问题：https://github.com/Eonasdan/bootstrap-datetimepicker/issues - Benny Code

是的，我正在使用 moment.js。 - Karan Batra

Answer 1

我遇到了相同的错误。

input.size is not a function TypeError

修改 bootstrap-datetimepicker.js 的第2253行。

if (input.size() === {

至

if (input.length === 0) {

行号：2264

if (element.find('.datepickerbutton').size() === 0) {

到

if (element.find('.datepickerbutton').length === 0) {

添加CSS

.input-group.date .dropdown-menu{
     display: block;    
 }

- kelvin kantaria

---

这个在我更新Bootstrap之前是可以工作的。如果他们还没有修复它，那么一定有其他的解决方法。 - BWhite

Answer 2

根据文档，运行bootstrap datetimepicker所需的文件为：

jQuery

Moment.js

Bootstrap.js

Bootstrap CSS

Bootstrap Datepicker CSS

本地化文件: Moment的本地化文件

请参阅此示例并检查左侧的外部资源

按照以下方式初始化

$('#datetimepicker1').datetimepicker();

我使用了以下文件： jQuery 3.1.1

moment.js

bootstrap.min.css

bootstrap.min.js

bootstrap-datetimepicker.min.css

bootstrap-datetimepicker.min.js

此外，阅读文档中的安装文章可以更好地理解。

- philantrovert

---

以上提到的文件问题已经解决。谢谢。 - Karan Batra

我正在使用相同的jQuery 3.1.1版本，但它无法正常工作。我的文件顺序如下： jquery-3.1.1.js moment.js bootstrap.3.3.7.min.js moment-with-locales.js jquery-migrate-1.4.1.js bootstrap-datetimepicker.js - Muhammad Bilal

@philantrovert，感谢您的回复。看起来一切都正常。我之前使用的是bootstrap-datetimepicker.js而不是bootstrap-datetimepicker.min.js，但是它可以与bootstrap-datetimepicker.min.js一起使用。我想更新批准的答案。顺序仅适用于Javascript文件。我已经单独添加了CSS，现在一切都正常。再次感谢您的积极回答。 - Muhammad Bilal

@Muhammad，这很奇怪。min本质上是相同JavaScript文件的缩小版本。不过很高兴你解决了它。 - philantrovert

由于这个异常错误：“jQuery.Deferred exception: input.size is not a function TypeError: input.size is not a function”，bootstrap-datetimepicker.js与jquery.3.1.1不兼容。 - Muhammad Bilal

Answer 3

$('.datepicker-manual').datepicker({
 startDate: new Date(),
 format: 'dd/mm/yyyy', //you can change date format to any
 autoclose: true,
 todayHighlight: true,
 placeholder:new Date(),
 startDate: new Date(), //this will be today's date
 endDate: new Date(new Date().setDate(new Date().getDate() + 360))
});
$(document).on( "change", ".datepicker-manual", function() {
    $(this).datepicker('hide');
});

- RajiGates RajeshKumar

---

对我来说百分之百有效...更改事件对于自动隐藏很重要... - RajiGates RajeshKumar