TypeError: Cannot read property ... of undefined

[ianchlee]

When I remove the value of the input field, I get an error for:
TypeError: Cannot read property 'isSame' of undefined
TypeError: Cannot read property 'clone' of undefined

It seems that it read the empty value as an error

[tamarokun]

+1, using .clear() function or setting null value will trigger isSame() bug

[seltix5]

hello,
same problem here :

VERSION : Tempus Dominus Bootstrap4 v5.0.0-alpha15

tempusdominus-bootstrap-4.min.js:7 Uncaught TypeError: Cannot read property 'isSame' of undefined
at k._updateMonths (tempusdominus-bootstrap-4.min.js:7)
at k._fillDate (tempusdominus-bootstrap-4.min.js:7)
at k.i._update (tempusdominus-bootstrap-4.min.js:6)
at k.i._setValue (tempusdominus-bootstrap-4.min.js:6)
at k.i.clear (tempusdominus-bootstrap-4.min.js:6)
at k._doAction (tempusdominus-bootstrap-4.min.js:7)
at HTMLAnchorElement.e (jquery.min.js:2)
at HTMLDivElement.dispatch (jquery.min.js:3)
at HTMLDivElement.q.handle (jquery.min.js:3)

tempusdominus-bootstrap-4.min.js:7 Uncaught TypeError: Cannot read property 'clone' of undefined
at k.hide (tempusdominus-bootstrap-4.min.js:7)
at Function.k._jQueryHandleThis (tempusdominus-bootstrap-4.min.js:7)
at r.fn.init.k._jQueryInterface [as datetimepicker] (tempusdominus-bootstrap-4.min.js:7)
at HTMLInputElement. (tempusdominus-bootstrap-4.min.js:7)
at HTMLDocument.dispatch (jquery.min.js:3)
at HTMLDocument.q.handle (jquery.min.js:3)
at Object.trigger (jquery.min.js:4)
at Object.simulate (jquery.min.js:4)
at HTMLDocument.c (jquery.min.js:4)

[mahesh139]

+1 Same problem as explained by @tamarokun when useCurrent option is set to false.

[Vladimir25]

+1 Same problem.

[Loni2Shoes]

+1 Same problem.

[radionoise]

+1 Same problem.

[ada3m0n666]

yes same here. It's an initialization problem. tempusdominus seems to auto initialize when it finds css class 'datetimepicker-input' or a data-toggle attribute with value 'datetimepicker'.
I had to remove them to prevent from auto initializing. And add them manually and call .datetimepicker() to init when i want.

[Dahkon]

Same here with alpha18

[seltix5]

hello, so after so mutch time without solution I craft my custom solution.
The problem here is in the _getLastPickedDate() that will return null and because of this there will be function calls on a null object. To solve this I just changed this line :

bootstrap-4/build/js/tempusdominus-bootstrap-4.js

Line 771 in aaa4b3b

return this._dates[this._getLastPickedDateIndex()];

return this._dates[this._getLastPickedDateIndex()] || moment(null);

[ggjersund]

@seltix5 This solution triggers TypeError: row is undefinedat tempusdominus-bootstrap-4.js:2111:21. Happens when I select a date, and remove it manually from the textfield (leaving it blank) and try to open the picker again.

[seltix5]

hello @ggjersund.
I try that in my side and dint get any error. maybe it is duo to some specific setting. can you create a demo e codepen or something to isolate the problem?

[yusuke50]

Hello,

(version 5.0.0-alpha18).
my steps are:
step1. open modal and choose a date on the datetimepicker input
step2. close modal, I set datetimepicker('date', null) on hidden.bs.modal event
step3. open modal again and choose another date on the same datetimepicker

Console prompts error of "Cannot read property 'isSame' of undefined" at step2 if without @seltix5 's solution,
but console prompts error of "Cannot read property 'clone' of undefined" when applying this solution.

Is there other ways?
Thank you.

[denisdiniz001]

Hello,
i tried alter the lib and it worked:

h.prototype._getLastPickedDate = function() { var lastDate = this._dates[this._getLastPickedDateIndex()]; if(typeof lastDate == "undefined" || lastDate == null){ lastDate = this.getMoment(); } return lastDate }

[RoanBrand]

Try this workaround if you don't want to alter the library:

Run the following just after running .clear():

$('#datetimepicker1').datetimepicker("destroy");
$('#datetimepicker1').datetimepicker({ useCurrent: false });

The docs say the destroy function removes all the attached event listeners, but for me they stayed.

[oberzan]

+1 Same problem.

[teiv91]

Same problem. When will this be fixed? I dont want to alter the lib.

[daniapa]

The problem still happening with the option {useCurrent: false}.

I have done a jsfiddle with the example.

The solution seems to be alter the lib as says @denisdiniz001

[teiv91]

The problem happening also if you clear the input field and try to select a date again.

[gamevnlc]

Same issue. Any idea how to fix

[alinaalam]

Please notify us when it'll get solved. It's annoying to find out that there is no way to tackle this issue without having to alter the library

[terrylow]

i received a similar issue TypeError: this._getLastPickedDate(...) is undefined when i try to remove a few characters from the picked date string in the textfield, which causes a invalid date and clear automatically then the error show.

[jorgecf]

Any update? I can't set a simple example with an empty date without crashing in _getLastPickedDate. @denisdiniz001 workaround works just right as a temporary solution

[gertsteyn]

Having the same issue, mine surfaces as "Cannot read property '_options' of undefined"...

There have been two stable releases since this issue and a solution was proposed.

@Eonasdan I am not a JavaScript specialist, some feedback from you on if this is a bug that will be addressed (and a ballpark idea of timeline) or caused by incorrect implementation would be very helpful.

Thanks

[ThomasDotCodes]

submitted a PR. Couldn't find the code in src, only in build

#185

[fielde]

A better way to fix this issue is to look at the root cause. When the _setValue is called with a NULL is does not restore the dates[], causing subsequent tests on it to fail. The clue is that when the control is initialised with a null value the originator has ensure the dates[] has a value at position 0.

I simply modified the _setValue to handle the null and restore the _dates[] to ensure there was always a value at position 0 by adding the code below to line 407 in the _setValue method.

Hope this save some time for all.

[uladzimir-miadzinski]

when will the fix?

[kylelynchkurzawa]

@fielde Your fix worked for me, thank you so much!

[karatektus]

for me too, how is this still not fixed? :D

[kevinbrydon]

@fielde fix worked! for those who prefer copy and pasting the code

this._dates[0] = this.getMoment();
this._viewDate = this.getMoment().clone();

[sander-lameco]

When will the PR get accepted or when will a permanent fix be published?
I'm using NPM to install this package so I can't alter the files.

[mrlss]

Hey! Thanks for the great plugin, you did awesome job!

While looking for a workaround of this issue, i founded that @fielde solution is working, but working with default locale. When you reseting datepicker with this code

this._dates[0] = this.getMoment();
this._viewDate = this.getMoment().clone();

you getting your current locale from the moment.js, not the one that was changed in the options. Playing a little with code, i founded that just adding .locale(this._options.locale) fixing this, here updated code:

this._dates[0] = this.getMoment();
this._viewDate = this.getMoment().locale(this._options.locale).clone();

Hope this would help someone and issue will we solved soon, because we are unable to use you lib from NPM unfortunately due to the source changes :(

Thanks!

[boikoeugene]

why hasn't this been solved for a long time?! i need clear function, but it doesn't work correctly

[tushar2004]

Hi,
I was also having the same problem. I was trying to use 'clear' function but it wasn't working properly. But now I have got it fixed.

Just try this out:
$('datetimepicker').datetimepicker('clear');
$('datetimepicker').datetimepicker('destroy');

Hope it'd save some time of yours.

[leechogas]

Hi,
Is this issue has been resolved?

[heroselohim]

Resolved removing the class "input-group" in the HTML.

[lesilent]

Previously I was using a modified version that applied the fix from @mrlss but I wanted to see if it was possible to use the original build and simply override the functions. Below is my code, and it seems to work:

jQuery.fn.datetimepicker.Constructor.prototype._origSetValue = jQuery.fn.datetimepicker.Constructor.prototype._setValue;
jQuery.fn.datetimepicker.Constructor.prototype._setValue = function _setValue(targetMoment, index) {
	var oldDate = this.unset ? null : this._dates[index];
	var outpValue = '';
	if (!targetMoment && (!this._options.allowMultidate || this._dates.length === 1)) {
		this.unset = true;
		this._dates = [this.getMoment()];
		this._datesFormatted = [];
		this._viewDate = this.getMoment().locale(this._options.locale).clone();
		if (this.input !== undefined) {
			this.input.val('');
			this.input.trigger('input');
		}
		this._element.data('date', outpValue);
		this._notifyEvent({
			type: jQuery.fn.datetimepicker.Constructor.Event.CHANGE,
			date: false,
			oldDate: oldDate
		});
		this._update();
	}
	else
	{
		this._origSetValue(targetMoment, index);
	}
};

This should allow those that install the library using a cdn or NPM to apply the fix without having to modify the source.

[JasminSAB]

yes same here. It's an initialization problem. tempusdominus seems to auto initialize when it finds css class 'datetimepicker-input' or a data-toggle attribute with value 'datetimepicker'.
I had to remove them to prevent from auto initializing. And add them manually and call .datetimepicker() to init when i want.

Thanks, what I did is that I removed id's with datetimepicker"NN", and removed datetimepicker-input classes from elements, now it works like charm.

[Aporie]

Same here, I've removed data-toggle attribute and datetimepicker-input class from the html. I then initialize it and add data-toggle just right after.

[garbinmarcelo]

2017.. by the way this error is more terrible than I thought hehehe.. I started using the package today and came across it.. Any news on adjusting this or the package is abandoned?

[JasminSAB]

2017.. by the way this error is more terrible than I thought hehehe.. I started using the package today and came across it.. Any news on adjusting this or the package is abandoned?

Hi, what I did is that I removed id's with datetimepicker"NN", and removed datetimepicker-input classes from elements, now it works like charm.

[garbinmarcelo]

2017.. by the way this error is more terrible than I thought hehehe.. I started using the package today and came across it.. Any news on adjusting this or the package is abandoned?

Hi, what I did is that I removed id's with datetimepicker"NN", and removed datetimepicker-input classes from elements, now it works like charm.

Right, I went back to version 4 which seems to be working better. Some errors that I found in this version do not happen in the previous one, I ended up wasting some time trying to adjust this, it seems that this package stopped at "time" =/

[Yeshwanth-Surabhi]

Hi @fielde you had modified bootstrap js right?

[Yeshwanth-Surabhi]

2017.. by the way this error is more terrible than I thought hehehe.. I started using the package today and came across it.. Any news on adjusting this or the package is abandoned?

Hi, what I did is that I removed id's with datetimepicker"NN", and removed datetimepicker-input classes from elements, now it works like charm.

Thanks @JasminSAB, your solution did the trick for me.

[manhquang144]

Hi, is this issue expected to be resolved soon ?

[paulwellnerbou]

@JasminSAB I tried your workaround, but without success. I already have completely different IDs than datetimepicker1 (e.g. #datePickerStart). And removing the class datetimepicker-input did not make any difference. What exactly did you do?

[jmmaguigad]

2017.. by the way this error is more terrible than I thought hehehe.. I started using the package today and came across it.. Any news on adjusting this or the package is abandoned?

Hi, what I did is that I removed id's with datetimepicker"NN", and removed datetimepicker-input classes from elements, now it works like charm.

i just removed datetimepicker-input and it works. thanks

[hugogcorrea]

Hi,
i have tried this solution:

else {
if (!this._options.keepInvalid) {
	if (this.input !== undefined) {
	  //fixed bug, index set 0 if undefined at line 473
		index = index == undefined ? 0 : index;
		this.input.val('' + (this.unset ? '' : this._dates[index].format(this.actualFormat)));
		this.input.trigger('input');
	}
}

and worked for me

link of cnd: https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.1.2/js/tempusdominus-bootstrap-4.js

[khuongphp]

@JasminSAB I tried your workaround, but without success. I already have completely different IDs than datetimepicker1 (e.g. #datePickerStart). And removing the class datetimepicker-input did not make any difference. What exactly did you do?

Thank you. That should be right answer