Warning: foreach() argument must be of type array|object, string given in /data/www/live/gen_includes/functions_gen.php on line 3707

Public Testing Page 3

MDB5 Pro Datepicker Issue

The Problem?

When I use the placeholder format of m-d-yyyy in a field using datepicker, when you click on a date in the datepicker, it puts the date - 1 month into the input. For example, if you click on June 11, it will put "5/11/2021" in the date input field instead of "6/11/2021".

When I change the placeholder format to mm-dd-yyyy then it works fine.

Documentation (https://mdbootstrap.com/docs/standard/forms/datepicker/) says that "m" can be used as a month of the yera, and that it will return 1-12.

Samples

Broken

Placeholder: m-d-yyyy

Broken

Placeholder: m-d-yyyy + inline datepicker

Working

Placeholder: mm-dd-yyyy

Working

Placeholder: mm-dd-yyyy + inline datepicker

Start Date

End Date

Date 3

Date 4

 
 <div class='col-3' >
 <div data-mdb-format = 'm/d/yyyy' class='form-outline mb-4 datepicker' >
 <input placeholder = 'm/d/yyyy' id = 'inp_startDate_gMkaJI' class='form-control form-control-lg fs-4 clientValidateInput' >
 </input><label for = 'inp_startDate_gMkaJI' class='form-label fs-5' >Start Date
 </label>
 </div>
 </div>

 <div class='col-3' >
 <div data-mdb-format = 'm/d/yyyy' data-mdb-inline = 'true' class='form-outline mb-4 datepicker' >
 <input placeholder = 'm/d/yyyy' id = 'inp_endDate_DDEPll' min = '2021-06-01' max = '2021-10-31' class='form-control form-control-lg fs-4 clientValidateInput' >
 </input><label for = 'inp_endDate_DDEPll' class='form-label fs-5' >End Date
 </label>
 </div>
 </div>

 <div class='col-3' >
 <div data-mdb-format = 'mm/dd/yyyy' class='form-outline mb-4 datepicker' >
 <input placeholder = 'mm/dd/yyyy' id = 'inp_date3_gMkaJI' class='form-control form-control-lg fs-4 clientValidateInput' >
 </input><label for = 'inp_date3_gMkaJI' class='form-label fs-5' >Date 3
 </label>
 </div>
 </div>

 <div class='col-3' >
 <div data-mdb-format = 'mm/dd/yyyy' data-mdb-inline = 'true' class='form-outline mb-4 datepicker' >
 <input placeholder = 'mm/dd/yyyy' id = 'inp_date4_DDEPll' class='form-control form-control-lg fs-4 clientValidateInput' >
 </input><label for = 'inp_date4_DDEPll' class='form-label fs-5' >Date 4
 </label>
 </div>
 </div>

Javascript

<script>

//MDB5 Form Functionality 

    document.arrive( '.inputMask', function() { new Inputmask( this, this.dataset.inputMask ) });
    Array.prototype.filter.call( document.getElementsByClassName( 'inputmask' ), function( div ) { if( this.hasOwnProperty( 'inputmask' ) ) { new Inputmask( this, this.dataset.inputmask ); } } );
    
    document.arrive( '.form-outline', function() { new mdb.Input( this ).init(); } ); 
    Array.prototype.filter.call( document.getElementsByClassName( 'form-outline' ), function( div ) { new mdb.Input( div ).init(); }); 
    
    document.arrive( '.form-outline.datepicker', function() { activateDatePicker( this ); } );
    Array.prototype.filter.call( document.getElementsByClassName( 'form-outline datepicker'), function(obj) { activateDatePicker( obj ); } );
    
    function activateDatePicker( obj ) { 
        var options = {}; 
        var inputs = obj.getElementsByTagName( 'input' ); 
        for( var i = 0 ; i < inputs.length ; ++i ) { 
            if (!isEmpty( inputs[i].min ) ) { options.min = new Date( inputs[i].min ); }
            if( !isEmpty( inputs[i].max ) ) { options.max = new Date( inputs[i].max ); }
        }
        new mdb.Datepicker( obj, options ); 
    }
    
// Helper Functions
    function isEmpty(str) {
        return (!str || str.length === 0 );
    }
    
</script>