We help IT Professionals succeed at work.

Bootstrap datePicker not working

Alex Lord
Alex Lord asked
bootstrap date picker not working on click

i setup the input from js and append it with js to a modals content.

$("#EXPECTED_CLOSE_DATE").datepicker({dateFormat:"yy-mm-dd", minDate: new Date()});

Open in new window

this is sitting in the document.ready

how the input is set up.

   dateForm.push('<div class="form-group">'
                          ,'<label class="control-label col-xs-4" for="edit-deal-date">Estimated closing date</label>' 
                          ,'<div id = "find-bind" class="col-xs-8">'
                          ,'<input id="EXPECTED_CLOSE_DATE" name="EXPECTED_CLOSE_DATE" placeholder="click for new date!" value="'+dealJson.date+'"type="text" class="form-control hasDatepicker">'
                          ,'<input id="subaction" name="subaction" value="updateDeals" type="hidden" class="form-control">'
                          ,'<input id="engID" name="engID" value="'+engID+'" type="hidden" class="form-control">'

Open in new window

any clues ?
Watch Question


which datepicker are you using, as there are different version..
Are you using this one?

When you said it's not working could you elaborate what is not working exactly, do you see the date picker?

Sometimes you may need to adjust the z-index css as the datepicker may appear under the modal...

Using Chrome, Right click / inspect your page to see if there any errors in console, let the console open and do some action to see if an error will occurred

If you can set a codepen or jsfiddle example that will help


when i click on the input the date picker does not show, and yes that is the date picker i am using.

and i can confirm the class for datepicker isnt showing,

it hard to put on jsfiddle but what it is i have a boot strap modal and i am using js to append the modal body with a input box with the datepicker class
Zakaria AcharkiAnalyst Developer
Distinguished Expert 2018

You need to call the initialization code of the `datepicker` after appending the HTML code to the modal, so make sure the order of your script is like :



$("#EXPECTED_CLOSE_DATE").datepicker({dateFormat:"yy-mm-dd", minDate: new Date()});

Open in new window

Take a look to this Working JSFiddle Snippet
Most Valuable Expert 2017
Distinguished Expert 2019

We need to see the final markup - the page HTML.

Also - check your console for errors. Chances are there is a JavaScript error that is preventing the code from running.
Shaun VermaakSenior Consultant
Awarded 2017
Distinguished Expert 2019


this class was brecking it