Bootstrap datePicker not working

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 ?
Alex LordAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

lenamtlCommented:
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
Alex LordAuthor 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 DeveloperCommented:
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
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Julian HansenCommented:
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 SpecialistCommented:
Alex LordAuthor Commented:
hasDatepicker

this class was brecking it

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.