web-dev-qa-db-ja.com

jQuery UI datepickerがjQueryダイアログモーダルで機能しないのはなぜですか？

テキスト入力の1つでjQueryUIdatepickerを使用したいと思います。これはダイアログモーダルです。

実際、通常のドキュメントテキスト入力でdatepickerを呼び出すことができ、カレンダーを通常どおり取得しましたが、ダイアログモーダルテキスト入力ではそれを実行できません（モーダルテキスト入力内でクリックした後、JavaScriptエラーなしで何も取得しませんでした）。

これはdatepickerを呼び出すための私のコードです：

$(function() {
    $("#MytextInputID").datepicker({ dateFormat: 'dd/mm/yy' });
);

Css .ui-datepicker Z-indexプロパティを変更しようとしましたが、それでも何も得られませんでした。

この問題を解決するためのヒントはありますか？

よろしく、

my_page.htmlにあります

function openSaisieARModal()
        {
            window_select_CodeAgence = new showModalWindow('SaisieARModal', 500);
        }

そして私はこのスクリプトを使用します

var showModalWindow=function(id, width)
{
    var newId=id+'Copy';
    this.id=newId;

var previousNode=document.getElementById(newId);
if(previousNode!=null)
{
    previousNode.parentNode.removeChild(previousNode);
}

var rootNode=document.getElementsByTagName('body')[0];
this.node=document.createElement("div");
rootNode.appendChild(this.node);
this.node.setAttribute('id', newId);
this.node.setAttribute('title', document.getElementById(id).getAttribute('title'));
this.node.innerHTML=document.getElementById(id).innerHTML;
if(width==null)
{
    width=400;
}
$('#'+newId).dialog({autoOpen: true, modal: true, width:width });

this.closeWindow=function()
{
    $('#'+this.id).dialog('close');
}

this.centerContent=function()
{
    this.node.style.textAlign='center';
}

this.center=function()
{
    $('#'+this.id).dialog('option', 'position', 'center');
}
</ code>

}

これはmy_page.htmlのモーダルHTMLコードです

<div style="display:none;">
        <div id="SaisieARModal" title="DATE">
            <table class="tableFrame" cellspacing="0px" width="100%">
                <tr>
                    <td class="topLeft">

                    </td>
                    <td class="topCenter">

                    </td>
                    <td class="topRight">

                    </td>
                </tr>
                <tr>
                    <td class="middleLeft">

                    </td>
                    <td class="middleCenter">
                        <table>
                            <tr align="center">
                                <td>
                                    Date
                                </td>
                                <td>
                                    <input id="MyTextInputID" type="text"  />
                                </td>
                            </tr>
                        </table>
                    </td>
                    <td class="middleRight">

                    </td>
                </tr>
                <tr>
                    <td class="bottomLeft">

                    </td>
                    <td class="bottomCenter">

                    </td>
                    <td class="bottomRight">

                    </td>
                </tr>
            </table>
            <div>
            </div>
        </div>
</div>
jquerydatepickerjquery-ui-datepickeruidatepicker
14
aa th

うまくいく簡単な例をモックアップしました。 ui-datepickerでz-indexを変更しようとしましたが、Firebugでレンダリングされたコードを調べたところ、必要なIDはui-datepicker-divのようです。 z-indexを9999に設定すると、モーダルダイアログの上部に表示されます。

<script type='text/javascript'> 
  $(function() {
      $("#datepicker").datepicker({ dateFormat: 'dd/mm/yy' });
  });

  function openmodal() {   
      var $dialogContent = $("#event_edit_container");       

      $dialogContent.dialog({
         modal: true,
         title: "Test",
         close: function() {},
         buttons: {
          save : function() {},
          cancel : function() {}
         }
      }).show();
      $("#ui-datepicker-div").css("z-index", "9999");   
  }
</script>

<div ><a href="javascript:openmodal();">Open modal</a></div>
<div id="event_edit_container" >
    <form>
        Date: <input type="text" id="datepicker" name="datepicker">
    </form>
</div>
17
Scott Gottreu

設定する場合

#ui-datepicker-div {z-index:1003;}

動作しません、試してみてください

#ui-datepicker-div {z-index:1003 !important;}
6
user914796

私の場合、ZendXJqueryヘルパーを使用していました。クリップスタイルを修正するために、次のcssを追加しました。

#ui-datepicker-div {z-index:9999; clip:auto}
2
fredcallagan

以下のように、モーダルダイアログウィンドウのopen関数で日付ピッカーを初期化します。

  1. 日付ピッカー要素：

    <input type="text" id="myDateStr"/>

  2. open関数から呼び出して、ダイアログボックスから日付ピッカーを初期化します。

    'open：function（）{'

        $('#myDateStr').datepicker
    ({
                          dateFormat: 'mm/dd/yy',
                          changeMonth: true,
                          changeYear: true,
                        });
    }

これは微調整なしで完全に機能しました。

z-indexを変更するために既存のcssクラスまたはスタイルを変更する必要はありません。

2
manojR

Jquery-ui-1.8.1.custom.css（またはお持ちのjquery uiのバージョン）で変更します

.ui-datepicker

からのクラス

{ width: 17em; padding: .2em .2em 0; }

に

{ width: 17em; padding: .2em .2em 0; z-index:99999; }

それは私にとってはうまくいき、日付ピッカーはモーダルダイアログ内でうまく機能します！

1
Nikolaevich Mijakovich

enter code here単純化した場合（テスト用）

$('#'+newId).dialog({autoOpen: true, modal: true, width:width });

そしてそれを作ります：

$('#SaisieARModal').dialog({autoOpen: true, modal: true, width:width });

モーダルは表示されますか？また、bgiframe: trueオプションを試しましたか？

これが完全に関連性があるかどうかはわかりませんが、何かが（おそらく）日付ピッカーをモ​​ーダルなもののどこかに置いています。

編集：あなたが変更した場合、もう1つ：

$(function() { $("#MytextInputID").datepicker({ dateFormat: 'dd/mm/yy' }); });

に

    $(function() { 
       $("#MytextInputID").datepicker({ dateFormat: 'dd/mm/yy' });
       $("#MytextInputID").click(function(){alert("working");});
    });

アラートは表示されますか？

0
Mark Schultheiss

私の場合、以下の方がうまくいきます

$(document).on("click", ".modal-body", function () {

    $("#datepicker").datepicker({
                dateFormat: 'yy-mm-dd'

            });

});
0
Gabriela Macias

参照している「モーダルダイアログ」を明確にできますか。私はこれを想定しています：

http://docs.jquery.com/UI/Dialog

あなたのコードをもっと見ることなしに、それは難しいです。添付のHTMLを投稿すると便利な場合があります。

ただし、覚えておくべきことの1つは、モーダルダイアログでは、新しいウィンドウを開いているような印象を与えることです。ただし、実際には、コンテンツは他のコンテンツと同じHTMLドキュメント内にあります。これは、要素IDを割り当てるときに混乱を招くことがよくあります。たとえば、一部の重複が指定される場合があります。

また、セレクターが正しく機能していること、つまり目的のアイテムを選択していることを確認できる範囲でデバッグ/テストを行っていることも前提としています。

0
James Wiseman