Topic: Date field Options
Sorry about the wall of text, guys.
Expected behavior
https://mdbootstrap.com/snippets/standard/mwccredit/3779699#html-tab-view
The snippet above works in the MDB editor to set options for a datefield as the docs suggest...
Actual behavior Using the same browser/device, I am unable to get this snippet of code to with inside Visual Studio when launching in localhost....
*There are no errors in the console
*There are no other datepicker fields in the html file, nor are the variables in the js file used again.
*If it wrap the snippet in a function and then call the function. It still doesn't work
// Date function editDatePicker(){ const datepickerWithLimits = document.querySelector('.datepicker-with-limits'); new mdb.Datepicker(datepickerWithLimits, { min: new Date(2020, 5, 10), max: new Date(2022, 5, 20) }); };
editDatePicker();
If I enter the function editDatePicker() into the console after the page loads. this works just fine
If I wrap the function above into a window.onload, it doesn't work again
Resources (screenshots, code snippets etc.)
SNIPPETS:
HTML:
<div class="form-outline datepicker datepicker-with-limits" data-mdb-format="mmm, dd, yyyy" data-mdb-toggle-button="false">
<input type="text" class="form-control" id="exampleDatepicker13" data-mdb-toggle="datepicker" />
<label for="exampleDatepicker13" class="form-label">Select a date</label>
<button class="datepicker-toggle-button" data-mdb-toggle="datepicker">
<i class="fas fa-calendar datepicker-toggle-icon"></i>
</button>
</div>
JS:
const datepickerWithLimits = document.querySelector('.datepicker-with-limits'); new mdb.Datepicker(datepickerWithLimits, { min: new Date(2020, 5, 10), max: new Date(2022, 5, 20) });
SCREENSHOTS:
Visual Studio: https://i.imgur.com/b7aD6to.png
Screenshot of active datefield: https://i.imgur.com/yBHKNJ4.png
Conclusion
I imagine there's an obvious answer that I've overlooked (my computer is plugged in btw). If someone can point me in the right direction to fix this I'd appreciate it.
Thank you,
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 3.11.0
- Device: PC
- Browser: Edge
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes
MWCCredit pro premium priority commented 3 years ago
Update on this.
Unrelated error my sandbox file (mdb.Tooltip). Field was not present in the document and caused all subsequent scripts to fail.
Edge dev tools (ctrl+shift+i) didn't spot the error.