Question

I am using modal box in my page. when i click text-field where datapicker is added, it is not showing anything. But in ‘inspect element of chrome’ i can see that ‘hasDatepicker’ class is already added up. But how ever cant see the datepicker inside modal box.

I tried datepicker in the same page where modal box exists, then the datepicker is working.

code is

         <script>
           $(function() {
              $( "#datepicker" ).datepicker();
           });
        </script>

Html code is

                    <div class="">
             <a type="button" class="openmodalbox" href="javascript:void(0);" value="Modal box" title="Add Allergy">
                       add
                   <span class="modalboxContent">
            <div class="headdin_div">Add Allergies</div>
                <table>
                    <tr><td>Allergies</td><td><input class="inp_padd" type="text"></input></td></tr>
                    <tr><td>Type</td><td><input class="inp_padd" type="text"></input></td></tr>
                     <tr> <td>First observed</td><td><input type="text" class="inp_padd" id="datepicker"></input></td></tr>
                     <tr><td></td><td><input type="submit" class="save_button_style" value="Save" /></td></tr>
                </table>      
                </span> 
                </a>    
                 </div> 

Is it the problem with modal box? Or datepicker property?

Please Help

Thanks

Answer 1

I’ve changed your code a little bit:

<div class="">
        <a type="button" class="openmodalbox" href="#1" value="Modal box" title="Add Allergy" id="btn">add </a>
        <span class="modalboxContent">
                <div class="headdin_div">
                    Add Allergies</div>
                <table>
                    <tr>
                        <td>Allergies</td>
                        <td><input class="inp_padd" type="text"></input></td>
                    </tr>
                    <tr>
                        <td>Type</td>
                        <td><input class="inp_padd" type="text"></input></td>
                    </tr>
                    <tr>
                        <td>First observed</td>
                        <td><input type="text" class="inp_padd" id="datepicker"></input></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><input type="submit" class="save_button_style" value="Save" /></td>
                    </tr>
                </table>
            </span>
    </div>

and js:

            $(function () {
            $("#datepicker").datepicker();


            $(".modalboxContent").dialog({
                autoOpen: false
            });

            $("#btn").click(function () {
                $(".modalboxContent").dialog('open');
            });
        });

it’s working fine now:

http://jsfiddle.net/ye24d/