Topic: mdb.Datetimepicker is not a constructor
I'm trying to follow the example in https://mdbootstrap.com/docs/standard/forms/datetimepicker/ 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' },
});
}
</script>
and
<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 />
</div>
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
and
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 : https://mdbootstrap.com/docs/standard/pro/installation/ but they haven't worked for me.
I'm probably missing something obvious, but I can't find it.
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.
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
kpienkowska staff commented 2 years 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 pro premium commented 2 years 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 pro premium commented 2 years ago
I've decided to remove the datetimepicker. You can consider this closed.
Closed
This topic is closed.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Closed
- User: Pro
- 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