Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

Metronic 8 - Datepicker (tempusDominus) not defined


I want to use Datepicker form widget difined in:
https://preview.keenthemes.com/html/metronic/docs/forms/datepicker

but I had an error "tempusDominus is not defined" when init widget:

picker = new tempusDominus.TempusDominus( elem, options )

Although, Tempus Dominus's CSS and Javascript files are bundled in the global plugin bundles and globally included in all pages.

How can I use it?


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (8)


Hi,

May I know what is your Metronic version?

Can you try it with the latest Metronic v8.1.8 by downloading it from Themeforest?
Please note that tempusDominus was added in the recent update of Metronic.

If you are already using Metronic's latest version then please make sure you execute your code after when the core js code is available, on the document content ready event:


// On document ready
KTUtil.onDOMContentLoaded(function() {
picker = new tempusDominus.TempusDominus( elem, options )
});


Please make sure the above code is included or called after the core js scripts includes.

Regards.



It's hard to tell which version I'm using. I am making a project based on the Laravel framework and when I start migrating to Metronic 8, I downloaded the latest version of Metronic from themeforest.net (about a month ago). This archive was contain a two folders: laravel and laravel_app and there was a download.html file with referensies in each of it, first: https://devs.keenthemes.com/metronic/laravel and second: https://drive.google.com/file/d/1Uknw_CQ-mBShfE3nnPMogh2Oy80fo7CG/view?usp=share_link.
Now I use the version that contain in there structure:
- config folder contain demo1, demo2, demo3 and so on subfolders with general.php, menu.php and pages.php config files;
- There is an Adapters, Bootstraps and Traits folders in app/Core folder

I download Metronic again today from themeforest.net, but this archive doesn't contain the structute that I described above.



Hi,

To resolve the "tempusDominus is not defined" error when initializing the Datepicker widget, you need to make sure that the Tempus Dominus JavaScript files are included in your project.

In the file `themes/metronic/laravel/resources/assets/core/plugins/plugins.js`, please add the following lines to the plugins listing:


node_modules/@eonasdan/tempus-dominus/dist/js/tempus-dominus.min.js
node_modules/@eonasdan/tempus-dominus/dist/locales/de.js
node_modules/@eonasdan/tempus-dominus/dist/plugins/customDateFormat.js


After adding these lines, save the file and run `npm run dev` to rebuild your assets. This will bundle the Tempus Dominus JavaScript files with your project.

Once the build process is completed, you should be able to use the Datepicker widget without encountering the "tempusDominus is not defined" error.

Please give it a try and let me know if you have any further questions.

Thanks



Thanks, It's works happy

I noticed that there are many different builds for the Laravel framework with different file structures and functionality.
For example, there is an assembly with a menu configuration file (menu.php) and aside (top) menu rendering functionality. But the last downloaded archive (from themeforest.net) of Metronics does not contain such features.

What are these assemblies and which one is correct?



The plugin itself worked, but it looks like there are no css styles...



Hi,

Please note that we have two versions of Laravel available: the legacy Laravel app and the latest Laravel Starter Kit. The menu.php file is specific to the legacy Laravel app and is not included in the Laravel Starter Kit.

Laravel Starter Kit will be the primary release in the future. We want to simplify it with more plain HTML template as a starter kit.

If you are referring to the legacy Laravel app and need assistance or a download link for the zip file, please let us know, and we will provide you with the necessary resources.

Thanks



Will you support the legacy Laravel app in the future?
There is a wonderful menu rendering functionality with permissions supports and callbacks in legacy app...



Hi,

We will drop the Laravel App support and focus on the Laravel Starter Kit and in the upcoming new update Metronic v8.1.9 that we are going to release in the coming weeks we will release Auth/User Management CRUD for the Laravel Start Kit.

Regards.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(