brian03 priority asked 6 months ago

Expected behavior I am using the inline datepicker and I would like to show the calendar when user clicks in field not just when they click on the icon. I added a script for this but it is not working.

I would also like to prevent them from entering invalid data. Do I have to add custom validation for this?

Actual behavior

Resources (screenshots, code snippets etc.) Datepicker HTML Date Rentals Began


  // Show calendar when focus is on field. Do not allow anything except a date
  document.addEventListener('DOMContentLoaded', function () {
    alert("Init datepicker");
    // Initialize the datepicker
    var datepicker = new mdb.Datepicker(document.getElementById('dateRentalsBegan'), {
      inline: true,  // Display the calendar inline
      format: 'mm-dd-yyyy'  // Specify the date format

    // Show the calendar when the input field is clicked
    document.getElementById('dateRentalsBegan').addEventListener('click', function () {
      alert("input field click");

Kamila Pieńkowska staff answered 6 months ago

You can set datepicker input as datepicker to toggle. That way you will force the user to enter a date with the calendar that way date will be valid.

brian03 priority commented 6 months ago

I do not see any javascript in the code snippet. Can you please provide?

brian03 priority commented 6 months ago

Nevermind, I see I was missing the data-mdb-toggle="datepicker" statement. Thanks!

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 7.1.0
  • Device: Laptop
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No