Topic: mdb.Datetimepicker is not a constructor

sdpollack premium asked 1 year ago

I'm trying to follow the example in to use custom formatting for my datetimepicker.

<script type="module">
    $(document).ready(function () {

        const NextEventAtPicker = document.querySelector('#BSRSchedule_NextEvent');
        new mdb.Datetimepicker(NextEventAtPicker, {
            datepicker: { format: 'm-d-yyyy' },


<div class="form-group datetimepicker" data-mdb-inline="true">
    <label asp-for="BSRSchedule.NextEvent" class="control-label"></label>
     <input type='text' asp-for="BSRSchedule.NextEvent" class="form-control" readonly disabled=@readOnly />

I get the following errors:

jquery.min.js:2 jQuery.Deferred exception: mdb.Datetimepicker is not a constructor TypeError: mdb.Datetimepicker is not a constructor


Uncaught TypeError: mdb.Datetimepicker is not a constructor

This is an ASP.NET Razor Pages project. I have tried using Webpack to bundle my mbd, but currently I'm using the js files directly from the downloaded MDB5-STANDARD-UI-KIT-Pro-Essential-6.4.0. (I have retained the css files generated with my SCSS updates.)

I load mdb using:

<script type="text/javascript" src="~/lib/mdb/dist/js/mdb.min.js"></script>

I've tried variations of the "importing JS modules" instructions at : but they haven't worked for me.

I'm probably missing something obvious, but I can't find it.

sdpollack premium answered 1 year ago

Thanks. I'm getting closer, but now I am getting...

manipulator.js:104 Uncaught TypeError: Cannot read properties of null (reading 'style')
    at manipulator.js:104:15
    at Array.forEach (<anonymous>)
    at Object.addStyle (manipulator.js:103:24)
    at yw._appendValidationInfo (index.js:270:19)
    at yw._init (index.js:139:10)
    at new yw (index.js:89:10)
    at Edit?id=4:2402:9
(anonymous) @   manipulator.js:104
addStyle    @   manipulator.js:103
_appendValidationInfo   @   index.js:270
_init   @   index.js:139
yw  @   index.js:89
(anonymous) @   Edit?id=4:2402

Kamila Pieńkowska staff commented 1 year ago

Do you still use jQuery? Does this happen in snippets or does it happen only locally?

Also, have you tried initiating datepicker with data attributes? Does this error occur when there is no JS?

sdpollack premium commented 1 year ago

Yes, the application uses JQuery extensively. In order for other parts of the application to work, I have to load JQuery first, before Bootstrap and MDB.

Yes, I have tried to use data attributes, but I need to use a custom format and the documentation says "Note: This options works only with JS initialization." The data-mdb-format attribute does not seems to work with datetimepicker.

The error does not occur with no JS.

I'm unclear what you're asking about re: snippets or locally. I am not using any VS Code snippets.

sdpollack premium commented 1 year ago

I've decided to remove the datetimepicker. You can consider this closed.

Kamila Pieńkowska staff answered 1 year ago

Try taking your JS code out of $(document).ready or import jquery after MDB package.

Also, you are doing unnecessary double init. Remove datetimepicker class from HTML.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 6.4.0
  • Device: PC
  • Browser: Chrome
  • OS: Win 10
  • Provided sample code: No
  • Provided link: Yes