.datetimepicker is unresolved function or method

Describe the problem I am trying to control the disabled hours based on change in the input field so that different days will have different disabled hours. Naturally the disabled hours for each day are stored in a table in sqlite.

NOTE: The datetimepicker works fine, is displayed on the page when rendered and is fully functional. I just cant use any JS to dynamically update it.

In the current test case scenario I am only trying to override the disabledHours with a different list of numbers. To isolate the problem with the unresolved reference of datetimepicker I tried to trigger a simple beep in the console

When I try to implement JS in the template as: $(document).ready(function() { $('.input-group>input').datetimepicker({ console.log('Beep'); }); });

datetimepicker is not recognised and is an unresolved reference AND console.log is underlined red at the "." part with error message: : or , expected

My code: Settings.py: Installed apps: https://pastebin.com/Vt1kcgyE I commented out BOOTSTRAP4 = {} so jquery is not included twice. This was a suggested measure found while researching possible solutions to my problem. BOOTSTRAP4 = { 'include_jquery': True, }

Form: (simplified to minimum for development and testing purpose) https://pastebin.com/GgKkPYss

View: https://pastebin.com/wdXNj4Vt

Template: https://pastebin.com/q0aKthJn

This is how the head looks when the page is loaded: https://pastebin.com/Lzmi7xxJ

Expected behavior in the desired outcome scenarion the following script should change the disabled hours upon change in the field:

Console errors

No error on django console. JS console error: 1) https://pastebin.com/YKA3AazY - fixed by adding let $J = jQuery.noConflict(); to the top of the script 2) https://pastebin.com/xgGRcW6E

3) When i add the above jQuery.noConflict(); line the errors in the browser console are down to 1: https://pastebin.com/XhbP63PE 4)Pycharm still does not recognise .datetimepicker()

Setup Information

OS: [Windows 10]
Browser [chrome, firefox]
Browser version [latest]
Python version [3.8]
Django version [3.1.3]
Bootstrap version [4]
jQuery version [https://code.jquery.com/jquery-3.5.1.min.js] - this should be loaded with with load blocks as the documentation suggests, all other jquery is disabled to avoid conflicts, the current HTML template doesn't inherit from base.html or any other.

Troubleshooting steps: YES - I have followed the [configuration instructions][configuration_page] and checked out the [common error troubleshooting][troubleshooting_page] page.

While researching I found an opinion that states .datetimepicker is component of jQuery UI which should be included separately. adding the jQueryUI CDN link like this gave no result: https://pastebin.com/hBDbHh3h

Looking at other peers' issues here I followed the advice to refer to input-group>input but no joy: https://github.com/monim67/django-bootstrap-datepicker-plus/issues/18

Looking forward to your reply!

monim67 / django-bootstrap-datepicker-plus

.datetimepicker is unresolved function or method #55