Datepicker Is Returning Wrong Month (showing the month selec


Topic: Datepicker Is Returning Wrong Month (showing the month selected - 1)

cfuller asked 3 years ago

Expected behavior I am using using Datepicker for the first time. The pop up is working as expected. When I click on a date I would like that date put into the input field. For example, clicking June 16, 2021 should return "6/16/2021"

Actual behavior When I click on a date, the correct day number and year are put into the field, but the month is always one month previous. For example, if I click on June 16, 2021, it will enter 5/16/2021 into the textbox. If I enter January 6, 2021, it will enter into the textbox: 0/6/2021

*Resources (screenshots, code snippets etc.)*Sample page available at: https://new.charters.link/test/public-3.php.

Sample HTML

            <div class='col-3' >
                <div  data-mdb-format = "m/d/yyyy" class='form-outline mb-4 datepicker' >
                    <input  placeholder = "m/d/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 = "m/d/yyyy"  data-mdb-inline = "true" class='form-outline mb-4 datepicker' >
                    <input  placeholder = "m/d/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>        

Sample JavaScript

    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 ); 
}

cfuller answered 3 years ago

Upon further playing with this I found that if I change the data-mdb-format to "mm/dd/yyyy" it will work correctly. But the documentation available at https://mdbootstrap.com/docs/standard/forms/datepicker/ says that we should be able to use "m" as the month to get 1-12 instead of "mm" to get 01-12.

Any suggestions if I want to use "m" instead of "mm"?

Thanks!


Dawid Wajszczuk staff answered 3 years ago

Hi,

It seems like some kind of bug. Thanks for reporting this. We will try to fix it as soon as possible. As for now, I suggest using "mm" instead of "m".

Keep coding,
Dawid


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: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 3.7.1
  • Device: Desktop PC
  • Browser: Chrome, Firefox, Edge
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes
Tags