Topic: Datepicker Is Returning Wrong Month (showing the month selected - 1)
cfuller free 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 );
}
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
cfuller free 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!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: 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