Topic: MDB 5 pro Datepicker is not working.

bsteinrock.dev free asked 3 years ago


Expected behavior

*Actual behavior*I finally got the datepicker to actually show when clicked, but nothing actually works. The buttons don't do anything and you can only close it by clicking off the screen. There are no errors and I stepped through the files wtih break points and it seems to make it through everything. I'm wondering if it has more to do with the css file? I installed the official release today from git and it changed every input field in my project back to regular bootstrap outlined box. Could it possibly have something to do with the j-query I have installed? It looks like i have 3.4.1. I purchased the MDB5 pro package a few days ago and getting anything to work has been a nightmare. I wish there was a better tutorial for the Zip download/installation. if it was as simple as downloading and adding the css and js file I wouldn't be having these issues. I see other people asking questions about the datepicker options which lets me know it works... I don't understand the issue. *Resources (screenshots, code snippets etc.)*I tried to embed and create a snippet but the snippet editor goes straight to a 404...


bsteinrock.dev free answered 3 years ago


I watched the quick start tutorial and if I open the file in vs code and run that index.html page, then yes it works fine. But I'm integrating the package into an existing project in Visual Studio Community.I'm not building from the index file in the download itself. Here are some snips from my layout page, shows my style and script tags. Along with the snippet code you provided and the errors i am receiving. I'm thinking there is another library or file causing a conflict, but the only other library I have is the pre-loaded Jquery. If i remove it then i get "$ is not defined" Providing a full samples of code would be difficult, this is a fairly large project. The main issue right now, is that i was using the Jquery ui calendar plug in but it also uses the .datepicker class. Because of the .datepicker in the MDB library i can't get that to work either even when calling it with an Id and not the class. when i comment out the j-query ui reference i still get errors from the mdb lib like in the examples below. I am at a loss. Note: The colors and effects reference is just a copy i made of the free mdb lib with all of the color classes listed.

<title>@ViewData["Title"] - 502Dumpsters</title>
<link rel="stylesheet" href="~/css/all.css" />

<link rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" />
<link rel="stylesheet" href="~/css/MDB5/css/mdb.min.css" />
<link rel="stylesheet" href="~/css/MDB5/css/colorsAndEffects.css" />
<link rel="stylesheet" href="~/css/site.css" />
@RenderSection("Styles", required: false)

 <div class="container my-5">

                            <div class="form-outline datepicker">
                                <input type="text"
                                       class="form-control"
                                       id="exampleDatepicker1" />
                                <label for="exampleDatepicker1" class="form-label">Example label</label>
                            </div>

                        </div>
    </footer>
</div>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/js/MDB5/js/mdb.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
@RenderSection("Scripts", required: false)

//in my js file $(document).ready(function () {

$(".datepicker").datepicker();

});

Errors i am getting in dev tools:

input.js:144 Uncaught TypeError: Cannot read property 'value' of null at t.value (input.js:144) at t.value (input.js:51) at input.js:245 at Array.forEach () at Module.r.m.n (input.js:244) at r (bootstrap:19) at bootstrap:83 at universalModuleDefinition:9 at universalModuleDefinition:1

jquery.min.js:2 Uncaught TypeError: $(...).datepicker is not a function at HTMLDocument. (Order.js:17) at l (jquery.min.js:2) at c (jquery.min.js:2)


Arkadiusz Idzikowski staff commented 3 years ago

The component should be auto initialized via datepicker class. In this case, you should not initialize it again in JS code. Every component instance should be initialized only once (via datepicker class or via Javascript).

If you can't use datepicker class due to conflict with other library, please remove it from the HTML code and try to initialize the component with new mdb.Datepicker(your-selector).

There may be a problem with the order in which the scripts are loaded, that's why Bootstrap can't detect jQuery and the datepicker() function is not available.


bsteinrock.dev free commented 3 years ago

I just discovered somthing very interesting... I added the same div to my home page, the datepicker works just fine. I have the datepicker inside an order form on another page and that is where i am getting the errors... I am wanting to use the datepicker to select a delivery date like I was previously with the Jquery-UI datepicker. I placed a break point on the error and stepped through a few times and it looks like its being thrown on another input div not the date-picker. i have normal text inputs and one select. it looks like may its happening on the select, i checked and it matches what's in the documentation. What could be causing a conflict when using it within a form? Here is my order page html:

Checkout: First name Last Name Your phone Email Select a date Address City State KY IN Zip Code Summary @Model.DisplaySize yards /7 day rental $@Model.Price.Amount Total (USD) @Model.Price.Amount Pay

Payment succeeded, see the result in your Stripe dashboard. Refresh the page to pay again.


bsteinrock.dev free commented 3 years ago

I got it working, the button for the toggle was causing a post back because in asp .net button automatically perform a submit action by default. Also there is something in my select drop down causing an issue and returning a null value on page load. I commented everything out except the first couple of inputs and it worked. Then un-commented each input until I recreated the error. Thank you so much for your help!


Michal Szymanski staff answered 3 years ago


Dear user,

as long as you don't provide your code we cannot help you.

From our side, everything works as expected. And actually it is simple as that -copy and paste. After downloading you don't need to do anything more. Just unzip the package and copy-paste the component you like.

Snippet editor also works fine - I've created a snippet with a working date picker. Have a look and tell me if in this snippet also you can see these bugs you mentioned in your message.

https://mdbootstrap.com/snippets/standard/ascensus/2431766

Did you follow our Quick Start for MDB5? Is anything unclear there?

https://youtu.be/h6uT2NKfBJQ



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: -
  • Device: Laptop
  • Browser: chrome
  • OS: windows
  • Provided sample code: No
  • Provided link: No