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

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>

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. https://mdbootstrap.com/snippets/standard/kpienkowska/5914036


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.

FREE CONSULTATION

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

Status

Answered

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