Link to home
Start Free TrialLog in
Avatar of Alex Lord
Alex Lord

asked on

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 ?
Avatar of lenamtl
lenamtl
Flag of Canada image

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
Avatar of Alex Lord
Alex Lord

ASKER

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
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
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.
ASKER CERTIFIED SOLUTION
Avatar of Alex Lord
Alex Lord

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial