Datepicker zeigt nicht in der Modal box JQuery

Ich bin mit modal-box in meine Seite. wenn ich auf das text-Feld, wo datapicker Hinzugefügt, es zeigt nichts an. Aber in "inspect element" des chrome - " ich kann sehen, dass 'hasDatepicker' - Klasse ist bereits addiert. Aber wie immer kann nicht sehen, das datepicker-innen modal-box.

Versuchte ich datepicker auf der gleichen Seite, wo sich die modal-box vorhanden ist, dann wird der datepicker funktioniert.

code ist

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

Html-code ist

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

Ist es das problem mit der modal-box? Oder datepicker-Eigenschaft?

Bitte Helfen

Dank

  • könntest du posten, html und js-code für die modale als auch?
InformationsquelleAutor Erma Isabel | 2012-09-20
  1. 2

    Ich geändert habe deine code ein wenig:

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

    und js:

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


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

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

    es funktioniert jetzt gut:

    http://jsfiddle.net/ye24d/

    • Ich danke Euch so sehr.....du hast mich gerettet
    • Wenn es Ihnen nichts ausmacht, ich habe noch ein Zweifel..css-Eigenschaft modelbox nicht durch datepicker css..wie kann ich es verhindern?
    • versuchen Sie es mit google jQuery_ui cdn jsfiddle.net/ye24d/2 , es ist nur die Frage der Anpassung der jquery-ui-css, Ursache, Sie beide verwenden die gleichen css-Klassen und Dateien
    InformationsquelleAutor CjCoax
  2. 1

    hier ist die Demo zu code, die arbeiten jsFiddle Demo

    anschließen müssen Sie Ihren code auf input-Datei oder die Schaltfläche und fügen Sie link zu ui css und jquery ui . Sie sehen es im obigen link.

    html-code :

    <label for="from">From</label>
<input type="text" id="fromDate" name="fromDate"/>
<label for="to">to</label>
<input type="text" id="toDate" name="toDate"/>

​

    java-script-code :

    $(function() {
        var dates = $( "#fromDate, #toDate" ).datepicker({
            defaultDate: "+1w",
            changeMonth: true,
            numberOfMonths: 3,
            onSelect: function( selectedDate ) {
                var option = this.id == "fromDate" ? "minDate" : "maxDate",
                    instance = $( this ).data( "datepicker" ),
                    date = $.datepicker.parseDate(
                        instance.settings.dateFormat ||
                        $.datepicker._defaults.dateFormat,
                        selectedDate, instance.settings );
                dates.not( this ).datepicker( "option", option, date );
            }
        });
    });​
    • Danke für die Antwort...Aber mein problem ist, dass der datepicker funktioniert nicht innerhalb modalbox (modal popup)
    • können Sie einfügen können, um Ihren code auf jsFiddle ,es wird sein leichter zu finden Sie Ihre vollständigen code?
    InformationsquelleAutor yossi
  3. 1

    Problem ist, da Ihre modale box blockout alles, was mit z-index-Eigenschaft. Sie haben das überschreiben der Klasse der datapicker und ordnen Sie es mit z-index-Eigenschaft größer als der z-index der modal-dialog. Datepicker funktioniert.

    • Wie genau? Datepickers z-index -1 und die modal-box z-index 9999
    • dann der z-index der datepicker wäre größer als 9999.
    • Ich habe versucht, die bereits
    • funktionierte gut für mich! Dank Zahid
    InformationsquelleAutor Zahid Riaz
Schreibe einen Kommentar