Topic: Date Picker Mask - Dynamically Created Inputs

Savage priority asked 1 year ago

Expected behavior When adding a new Date Picker textbox, the Input Mask works correctly.

Actual behavior After adding a new Date Picker textbox dynamically, I attach a new Inputmask to all date-picker textboxes. Newest Dynamically added date picker works as expected, but previously added date picker textboxes now do not allow the addition of any other numbers except for the first 2 in the date.

Resources (screenshots, code snippets etc.) Date Creation code:

        const input = $('<input/>')
        .attr('type', 'text')
        .addClass('form-control date-picker')
        .attr('id', `vendor-file-executed-start-date-0`)
        .attr('name', `vendor-file-executed-start-date-0`)
        .attr('data-property', 'ExecutedStartDate')
        .attr('required', true)
        .attr('data-mdb-input-mask', '99/99/9999')
        .attr('data-mdb-mask-placeholder', 'true');
    const label = $('<label/>').attr('for', `vendor-file-executed-start-date-0`).addClass('form-label').text('Executed Start Date');
    const button = $('<button/>').addClass('datepicker-toggle-button btn btn-link btn-sm').attr('data-mdb-toggle', 'datepicker').append(buildIcon('fas fa-calendar datepicker-toggle-icon'));
    const startDateError = buildDiv('invalid-feedback').html('You must enter an Executed Start Date');
    const outline = buildDiv('form-outline datepicker').attr('data-mdb-inline', 'true').attr('data-mdb-format','mm/dd/yyyy').append(input).append(label).append(button).append(startDateError);

Initialization Code:

    const inputs = document.getElementsByClassName('date-picker');
    inputs.forEach((x) => {
        const cc = new Inputmask(x, dateOptions);

I am at a loss and cannot figure out why the newest one works but the older ones don't.

Thanks for the help Tim

Kamila Pieńkowska staff answered 1 year ago

Please prepare a snippet demonstrating your example. It's hard to replicate what you are trying to do without HTML and parts of JS that may be relevant but are not included here.

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 6.1.0
  • Device: Laptop
  • Browser: Edge / Chrome
  • OS: Win 10
  • Provided sample code: No
  • Provided link: No