Date Picker Mask - Dynamically Created Inputs


Topic: Date Picker Mask - Dynamically Created Inputs

Savage pro premium priority asked 2 years 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


kpienkowska staff answered 2 years 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.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: Pro
  • 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