0

I am trying to use bootstrap datepicker and it doesn't work. I have looked at so many pages in bootstrap regarding the same problem. I tried almost all of them but in the end it didn't work. It acts as a normal text field.

I have included bootstrap-datepicker.js in my file as well.

I found this example and I don't know why its not working:

<div id="search_modal" class="modal hide fade" style="width:50%;">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
                <h3>Search for a room</h3>
        </div>

        <div class="modal-body" align="">
            <label>City/place</label>
            <div class="input-append"><input type="text" id="" name=""><span class="add-on"><i class="icon-search"></i></span></div>

            <label>number of people</label>
            <div class="input-append"><input type="text" id="number" name="number"></div>

            </br>

            <input type="text" id="dp1">            
                    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.0.2/js/bootstrap-datepicker.min.js"></script>
             <script type="text/javascript">
            $( '#dp1' ).datepicker();
              </script>

        </div>

        <div class="modal-footer" >
            <button class="btn btn-secondary" data-dismiss="modal">Cancel</button>
            <button class="btn btn-primary">Register</button>
        </div>

        </div>
        <div class=""> 
        <a class="btn btn-large btn-success" href="#search_modal" data-toggle="modal">Book a room ss</a>
        </div>

How can I solve this?

Here are some of pages I looked in order to solve the problem.

Community
  • 1
  • 1
S. N
  • 3,456
  • 12
  • 42
  • 65
  • Do you want exact? http://jsfiddle.net/Sherbrow/ymp5D/ – Manoz Aug 25 '13 at 16:56
  • yes, but I aready tried it it wont work for some reason. I have booth datapicker .css and .js in my file. I have JQuery as well but I am not sure y it wont work – S. N Aug 25 '13 at 17:04

1 Answers1

0
    <div class="modal-body" align="">
        <label>City/place</label>
        <div class="input-append"><input type="text" id="" name=""><span class="add-on"><i class="icon-search"></i></span></div>

        <label>number of people</label>
        <div class="input-append"><input type="text" id="number" name="number"></div>

        </br>


        <div data-date-format="dd-mm-yyyy" data-date="12-02-2012" class="input-  append date myDatepicker">
        <input type="text" value="" size="16" class="span2">
        <span class="add-on"><i class="icon-calendar"></i></span>
        </div>
    </div>
    <div class="modal-footer" >
        <button class="btn btn-secondary" data-dismiss="modal">Cancel</button>
        <button class="btn btn-primary">Register</button>
    </div>

    </div>
    <div class=""> 
    <a class="btn btn-large btn-success" href="#search_modal" data-toggle="modal">Book a room ss</a>
    </div>
   <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.0.2/js/bootstrap-datepicker.min.js"></script>
    <script type="text/javascript">
    $( '.myDatepicke' ).datepicker();
  </script>

it works for me.

p.s. add the whole thing just before you close your body tag

probably you also want to look into the this

Here is the jsfiddle i edited your code check it, it now works perfectly

goromlagche
  • 432
  • 1
  • 5
  • 12
  • add the whole javascript content just before you close the body tag. What error are you facing? – goromlagche Aug 25 '13 at 16:42
  • Try the link I provided. Let me know if it does not work. Check on your browser console whether the javascript file is loading or not. – goromlagche Aug 25 '13 at 17:05
  • I tried that website for 2 hours and I couldnt get it to work. I just dont know what goes wrong since it wont give me any errors. – S. N Aug 25 '13 at 17:08
  • 1
    did you checked your console? can you post the detailed code? – goromlagche Aug 25 '13 at 17:10
  • its a very long code. this is part of a form where u can select ur arriving time, and all implemented within the modal. – S. N Aug 25 '13 at 17:17
  • Can you put it on jsfiddle? it will be easy to test. – goromlagche Aug 25 '13 at 17:34
  • i just put my etire modal here. – S. N Aug 25 '13 at 17:41
  • I also added a [jsfiddle](http://jsfiddle.net/goromlagche/ymp5D/58/), check it, works perfectly – goromlagche Aug 25 '13 at 18:20
  • it still doesnt work. Using Ctrl+Shift+J allowed me to see the error this error and its the only one.Uncaught ReferenceError: $ is not defined . The datepicker is not working again – S. N Aug 26 '13 at 12:15
  • I have added the jsfiddle link it has the exact code you provided and it works. Did you checked the jsfiddle? http://jsfiddle.net/goromlagche/ymp5D/58/ – goromlagche Aug 26 '13 at 16:02
  • the dropdownmenu could be opening behind the modal try adding a z-index to .datepicker.dropdown-menu .datepicker.dropdown-menu { z-index: 10000 } – Hassan ALAMI Sep 24 '19 at 08:10