11

Bootstrap-datetimepicker is not working with jQuery 3.1.1. I need to use the same jQuery library to run all the other dependent functions.

Karan Batra
  • 161
  • 1
  • 2
  • 10

3 Answers3

13

I am getting same error. 

input.size is not a function TypeError

modify bootstrap-datetimepicker.js line no: 2253

if (input.size() === {

to

if (input.length === 0) {

line no:2264

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

to

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

add css

.input-group.date .dropdown-menu{
     display: block;    
 }
kelvin kantaria
  • 1,438
  • 11
  • 15
  • This worked until I updated Bootstrap. If they haven't fixed it yet, there must be some other workaround. – BWhite Sep 12 '19 at 18:26
11

As per the docs, the required files for bootstrap datetimepicker to run are :

jQuery

Moment.js

Bootstrap.js

Bootstrap CSS

Bootstrap Datepicker CSS

Locales: Moment's locale files

See this fiddle and check External Resources on the left

Initialize like this

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

I have used the following files : jQuery 3.1.1

moment.js

bootstrap.min.css

bootstrap.min.js

bootstrap-datetimepicker.min.css

bootstrap-datetimepicker.min.js

Also, read this installation post in the documentation for better understanding.

Community
  • 1
  • 1
philantrovert
  • 9,904
  • 3
  • 37
  • 61
  • 2
    Issue resolved with above above mentioned files. Thanks – Karan Batra Dec 20 '16 at 08:32
  • I am using same jQuery 3.1.1 but it does not working . My files order are : 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 Jan 06 '17 at 05:32
  • @philantrovert thanks for getting back. It seems working fine. i was using `bootstrap-datetimepicker.js` rather then `bootstrap-datetimepicker.min.js` but it works with `bootstrap-datetimepicker.min.js`. I would like to update approved answer. The order is must only for `Javascript` files. I have added CSS separately and everything is working fine for me. Once again thanks for your positive answer. – Muhammad Bilal Jan 06 '17 at 06:39
  • 1
    @Muhammad that's strange. A `min` is essentially a minified version of the same javascript file. Great that you got it worked out though. – philantrovert Jan 06 '17 at 06:41
  • 5
    `bootstrap-datetimepicker.js` is not compatible with `jquery.3.1.1` due to this exception: `jQuery.Deferred exception: input.size is not a function TypeError: input.size is not a function` – Muhammad Bilal Jan 06 '17 at 07:06
  • You need a more recent jQuery migrate. – Ludovic Kuty Feb 28 '18 at 13:31
  • @LudovicKuty Looks like your suggestion of updating jquery may have solved it. Kind of hidden here at the end and I didn't even see it until the fifth time reading through. – BWhite Sep 12 '19 at 21:02
0
$('.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
  • 31
  • 3