Bootstrap datePicker not working

Alex Lord
Alex Lord used Ask the Experts™
on
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">'
                          ,'</div>'
                          ,'</div>' 
                        );
        $("#update-deal").html(dateForm);

Open in new window


any clues ?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Hi

which datepicker are you using, as there are different version..
Are you using this one?
https://github.com/uxsolutions/bootstrap-datepicker

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

Author

Commented:
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

Commented:
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 :


...

$("#update-deal").html(dateForm);

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

Open in new window


Take a look to this Working JSFiddle Snippet
PMI ACP® Project Management

Prepare for the PMI Agile Certified Practitioner (PMI-ACP)® exam, which formally recognizes your knowledge of agile principles and your skill with agile techniques.

Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
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 VermaakTechnical Specialist
Awarded 2017
Distinguished Expert 2018

Commented:
hasDatepicker

this class was brecking it

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial