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

Script

<script>
  // 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 () {
      datepicker.toggle();
      alert("input field click");
    });
  });
</script>