Voyager: Datepicker doesn't show up

[taiwanleaftea]

• Laravel Version: 5.5
• Voyager Version: 1.0.1
• PHP Version: 7.0.23
• Database Driver & Version: MySQL 5.7.19

Description:

Datepicker doesn't show up for date field

Steps To Reproduce:

1. Create a table
2. Add datetime field
3. Create BREAD and choose date type for this field
4. Add new record using BREAD

The field has input type="date" attribute, but datepicker doesn't show up. There are also a lot of warnings and errors in browser console (i.e. jQuery.Deferred exception: r is undefined init@http://xxxxx/vendor/tcg/voyager/assets/js/app.js:77:1613, TypeError: r is undefined in app.js)

[fletch3555]

This issue is likely in JS and has nothing to do with the datepicker specifically. Can you paste the console errors/warnings?

[taiwanleaftea]

jQuery.Deferred exception: r is undefined init@http://asterisconew/vendor/tcg/voyager/assets/js/app.js:77:1613
o<@http://asterisconew/vendor/tcg/voyager/assets/js/app.js:77:851
e.fn.datetimepicker/<@http://asterisconew/vendor/tcg/voyager/assets/js/app.js:77:16669
each@http://asterisconew/vendor/tcg/voyager/assets/js/app.js:14:14817
each@http://asterisconew/vendor/tcg/voyager/assets/js/app.js:14:13079
e.fn.datetimepicker@http://asterisconew/vendor/tcg/voyager/assets/js/app.js:77:16554
@http://asterisconew/admin/testtables/create:410:21
each@http://asterisconew/vendor/tcg/voyager/assets/js/app.js:14:14817
each@http://asterisconew/vendor/tcg/voyager/assets/js/app.js:14:13079
@http://asterisconew/admin/testtables/create:407:13
c@http://asterisconew/vendor/tcg/voyager/assets/js/app.js:24:25133
o/http://asterisconew/vendor/tcg/voyager/assets/js/app.js:24:25449
undefined app.js:24:26730
TypeError: r is undefined[Подробнее] app.js:77:1613
init http://asterisconew/vendor/tcg/voyager/assets/js/app.js:77:1613
o< http://asterisconew/vendor/tcg/voyager/assets/js/app.js:77:851
e.fn.datetimepicker/< http://asterisconew/vendor/tcg/voyager/assets/js/app.js:77:16669
each http://asterisconew/vendor/tcg/voyager/assets/js/app.js:14:14817
each http://asterisconew/vendor/tcg/voyager/assets/js/app.js:14:13079
e.fn.datetimepicker http://asterisconew/vendor/tcg/voyager/assets/js/app.js:77:16554
<анонимная> http://asterisconew/admin/testtables/create:410:21
each http://asterisconew/vendor/tcg/voyager/assets/js/app.js:14:14817
each http://asterisconew/vendor/tcg/voyager/assets/js/app.js:14:13079
<анонимная> http://asterisconew/admin/testtables/create:407:13
c http://asterisconew/vendor/tcg/voyager/assets/js/app.js:24:25133
o/http://asterisconew/vendor/tcg/voyager/assets/js/app.js:24:25449
Welcome to Voyager 1.0 voyager.js:1:1

[taiwanleaftea]

My testtable has following fields:
CREATE TABLE testtables (
id int(10) unsigned NOT NULL AUTO_INCREMENT,
created datetime DEFAULT NULL,
created_at timestamp NULL DEFAULT NULL,
updated_at timestamp NULL DEFAULT NULL,
PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

[NicolaeCasir]

Just tried it out! All works fine!
Some screenshots

P.S. And console is clear :+1:

[taiwanleaftea]

will make a fresh install and try again
what for the browser do you have?
i have firefox 55.0.3

[NicolaeCasir]

@timbertlt I tried on Chrome 61.0.3160... But...
On Firefox 55.0.2 - Nope!
P.S: Check this

[vaggelis2018]

I think it has to do with JQuery. It is not recognized after last update. Maybe something in script load order

[taiwanleaftea]

if I understand correctly this chart, Chrome shows native HTML5 datetime control for this field, which is not supported by Firefox. Firefox should show Jquery datetimepicker, which cannot be initialized.

[vaggelis2018]

@timbertlt i get native HTML5 on firefox latest version too. Firefox developer edition 57.0b1 (64-bit)

[taiwanleaftea]

@vaggelis2018 yes, firefox from version 57 will support HTML5 datetime. I've 55.0.3, which is the latest "normal" edition.

[vaggelis2018]

This is how i fixed this problem

1820

[DODMax]

I feel like the problem is that the wrong library as been included when all the JS has been minified for version 1.
Before we were using https://github.com/Eonasdan/bootstrap-datetimepicker
Now the JS included in app.js (line 77) is http://www.eyecon.ro/bootstrap-datepicker/
Similar names but different libraries. Or was the change intended?

[neizerth]

version of bootstrap-datetimepicker that used in voyager is 0.0.7 (current 4.17.47)
It has bug at line 63 (https://github.com/Eonasdan/bootstrap-datetimepicker/blob/v0.0.7/src/js/bootstrap-datetimepicker.js#L63)

v 0.0.7 is from Bootstrap 2 and does not working correctly without append/prepend components (just look at L40, L49, L57, and L63 - if you don't use component, icon variable will be undefined)

So, better solution in this situation is update library or change to something more

New name of npm library is eonasdan-bootstrap-datetimepicker

[cadmicro]

I am also having this same issue.. it is definitely a bug... this needs to be urgently fixed please - and not just some manual work around... it should be fixed for everyone in a version release.

[joselara]

Yup temporary workaround is to update the master:

<script type="text/javascript" src="{{ voyager_asset('js/app.js') }}"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment-with-locales.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

[Vishal-Deshpande]

Temp fix:
Go to vendor\tcg\voyager\resources\views\master.blade.php
find
After this line add

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment-with-locales.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

[johntzulik]

after this:
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">

I added this too:
<link href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet">

Thanks you really help me guys!!!
Regards

[fletch3555]

Instead of just suggesting workarounds, why don't you guys figure out the actual fix and open a PR? This is a community driven project, not a dictatorship. The couple maintainers we have can't do all of the work. We're more moderators than anything else.

[MartinJac]

Fixed on my local, I'll create a PR for this over the weekend.

[bbredewold]

@MartinJac Have you been able to look at this?

[desmax]

still got the bug

[cotiga]

Hello,
Where are we with this bug?
I add the .JS and CSS to the master, I no longer have the jQuery error, but still no TimePicker with Firefox v55 (I can not, and does not want to go under FF Quantum)

[Luc45]

This just happened to me as well

[juliencap]

I had problems too, but only with that message:
_jQuery.Deferred exception: Cannot read property 'addClass' of undefined TypeError: Cannot read property 'addClass' of undefined_

I started creating a table and bread with Timestamp parameters. After, I edited both with Date parameters and I had this error.

Create a new fresh table with Date paramters solve the thing for me. Now, DatePicker is OK.

[b4dnewz]

The datepicker is not working when the timestamp datarow type is selected, it throw the error:

jQuery.Deferred exception: Cannot read property 'addClass' of undefined
at o.init (app.js:77)
    at new o (app.js:77)
    at HTMLInputElement.<anonymous> (app.js:77)
    at Function.each (app.js:14)
    at Ee.fn.init.each (app.js:14)
    at Ee.fn.init.e.fn.datetimepicker (app.js:77)
    at HTMLDocument.<anonymous> (app.js:24)
    at c (app.js:24)
    at u (app.js:24)

This makes impossible to have a datetime field as type for table column, since only date type works and everytime you create/update it doesn't grab the time part of the date (minutes, seconds)

Anyone with a working solution? I need to save created_at and updated_at as timestamps when editable on voyager admin panel.

[textoo]

Hello,
no need to edit the voyager master.blade view to apply the workaround , just add the JS and CSS in the additional_js and additonal_css in config/voyager.php :

'additional_css' => [
        'https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css'
    ],

'additional_js' => [
        'https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment-with-locales.js',
        'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js'
    ]

@neizerth did your fix is eligible for a PR ?

[fletch3555]

Closed in #3334. Merged into 1.x

[m-hcb]

thanks @textoo, you got it neat

[axeloz]

Hello

I have the same issue here. Using Voyager latest version (1.1.10).

In order to make it work, I must make sure that the "created_at", "updated_at" and "deleted_at" fields will not be shown when adding or editing a content otherwise the JS crashes and everything else among it (like the Markdown editor for example).

Is the fix released yet ?
Thanks

[fletch3555]

@axeloz, this was merged into the 1.x branch, and not on any released version. So you're correct, you won't see it on v1.1.10

[miguelcarrascoq]

@axeloz, this was merged into the 1.x branch, and not on any released version. So you're correct, you won't see it on v1.1.10

I'm v1.1.10 also, and I fix it with textoo (modify config/voyager.php) solution.

run "php artisan config:cache" and test again (it work for me)

[cuzboo]

Just tried it out! All works fine!
Some screenshots

P.S. And console is clear

You are my idol.

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. If you have further questions please ask in our Slack group.