Cannot read property '_options' of undefined

[seltix5]

Hello,
For some reason, when there is one simple javascript error (not related with tempusdominus) this script generates one error when clicking in the input field to open the picker (No Icon demo used).

Error :
tempusdominus-bootstrap-4.js:2762 Uncaught TypeError: Cannot read property '_options' of undefined
at HTMLInputElement. (tempusdominus-bootstrap-4.js:2762)
at HTMLDocument.dispatch (jquery.js:5206)
at HTMLDocument.elemData.handle (jquery.js:5014)
at Object.trigger (jquery.js:8201)
at Object.simulate (jquery.js:8260)
at HTMLDocument.handler (jquery.js:8319)

HTML :

No Icon (input field only):
<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <input type="text" class="form-control datetimepicker-input" id="datetimepicker5" data-toggle="datetimepicker" data-target="#datetimepicker5"/>
        </div>
    </div>
</div>

Javascript :

console.log(notAvailableVar);  

$(function () {
  $('#datetimepicker5').datetimepicker();
});

https://jsfiddle.net/seltix/vtfks15z/1/

[la55u]

having the same issue here, did you find a solution?

[seltix5]

having the same issue here, did you find a solution?

no :/

[mikeDevInMyDreams]

I Had this issue when it was a required field, and there was no data inside of the input. The error happened when i would use the call $.validator.unobtrusive.parse('form').

[mprythero]

Has there been any update to this problem?

[seiyata]

+1

[dnwilson]

+1

[tolu-six]

+1

[coltonf93]

The problem is on this line. Config needs a null check with a more informative error message:

bootstrap-4/src/js/tempusdominus-bootstrap-4.js

Line 1168 in 540bfae

if (!config._options.allowInputToggle) {

[gRoberts84]

If you do not use the jQuery plugin ($.fn.datetimepicker) then the only time the data object is set on the element is when getSelectorFromElement is called.

I am using the data-toggle method, so the data object is never set, causing the above issue.

Could be worth refactoring to use getSelectorFromElement which would also allow you to override the defaults without having to use the constructor.

[ikarthikng]

Edited the library as suggested by @coltonf93 as shown below to stop getting _options when input was focused without icon. Hopefully, this fix will be included in the main branch soon.

Still haven't found a fix for 'isSame' undefined errors when the date is deleted from the input box and datetimepicker is focused again.

[myfbone]

+1

[jaypan13]

I was getting this issue today (version - 5.1.2) while working on one client request. It seems that if the input date is blank then it gives this error. I know it's better to fix that per other members but just putting here, if anybody wants it.
$(function () {
var today = new Date();
var dateTime = (today.getMonth() + 1) + '/' + today.getDate() + '/' + today.getFullYear() + ' ' + today.getHours() + ":" + today.getMinutes();
$("#dtSimlutated .datetimepicker-input").val(dateTime); // Assign the value
$("#dtSimlutated .datetimepicker-input").trigger("click"); // Trigger click
});

HTML:
<div class="input-group date" id="dtSimlutated" data-target-input="nearest"> <input type="text" class="form-control datetimepicker-input" placeholder="Simulated Datetime" data-target="#dtSimlutated" value="" /> <div class="input-group-append" data-target="#dtSimlutated" data-toggle="datetimepicker"> <div class="input-group-text"><i class="fa fa-calendar"></i></div> </div> </div>

[david-offord]

Had an issue similar to this, where it kept saying cannot read property of undefined. Turned out I had accidentally included the library 2 times within that page (one in _Layout.html and one in my actual page.)

[Kokil]

having the same issue here

[satriaWork]

try this

<div class="input-group date datepickers" id="ass_date" data-target-input="nearest">
	<label for="assessment_date" class="col-md-4 col-form-label arterix">Assessment Date</label>
	<input id="assessment_date" name="assessment_date" type="text" data-target="#ass_date" data-toggle="datetimepicker" 
         class="form-control col-md-6 datetimepicker-input assessment-date-keypress" data-target="#ass_date" 
         autocomplete="off" required>
</div>

then add this code(JS)

$(.datepickers).datetimepicker({});

hope can help :)

[Srini-Amico]

@satriaWork comment worked for me. you should use the nearest div in selector .

[jinwanseo]

Thanks to your answer, I solved it.
It was the same problem as you. Thank you.

[Idiono-mfon]

@satriaWork Thanks for the answer

Side note: for those looking for just date alone without time, initialize your datetimepicker constructor as thus: $('#datetimepicker4').datetimepicker({
format: 'L'
});

[iamsimakov]

@satriaWork your answer is still actual
if error occurred check any were which jQuery Selector you use here:

$(document).ready(function(){
  $('.datetimepickers').datetimepicker();
});

in my case early I had datetimepicker class on Input field
and I changed to datetimepickers
and $('.datetimepickers').datetimepicker(); - this selector should be present on wrapper div!

[odysseyalive]

I had this same issue. I had to assign an id to the input-group (or div the datetimepicker is being applied to) to get around it -- even though the id isn't being used anywhere else.

[leihehehe]

After checking this issue, again and again, mine finally got solved. The code in front of datetimepicker() got an error which caused the javascript to stop there. It did not reach datetimepicker(), so the dateTime picker was not initialized. Make sure you always check the console.