在jQuery中添加和初始化jQuery Datepicker在對話框中移動

我創建了一個jQuery對話框，當點擊按鈕時，也從另一個DIV克隆的對話框中創建了datepicker文本框，但是當我點擊文本框時，datepickers會不按預期彈出。在jQuery中添加和初始化jQuery Datepicker在對話框中移動

enter image description here

<div id='searchdialog'>blank div</div> 
<div id='search'> 
    <input type='text' id='arrivDate' /> 
    <input type='text' id='deparDate' /> 
</div> 
<button id="popup" onclick="setPopupForm()">Click</button> 

function setPopupForm(){ 
    $('#searchdialog').html($('#search').html()); 
    $('#searchdialog').find('#arrivDate').attr('id','arrivDate2'); 
    $('#searchdialog').find('#deparDate').attr('id','deparDate2'); 

    $('#searchdialog').dialog({ 
     height: 280, 
     width: 740, 
     resizable: false, 
     modal: true, 
     draggable: true 
    }); 

    $('#arrivDate2').datepicker({ 
     defaultDate: "+7", 
     changeMonth: true, 
     numberOfMonths: 1, 
    }); 
}

搜索 - 已存在

searchdialog DIV - 的 '搜索' 的內容加入到這個DIV，改變文本框的ID爲 'arrivDate2' 和 'deparDate2'

當點擊一個按鈕時，會觸發函數「setPopupForm（）」並彈出對話框。但是當我點擊'arrivDate2'時，datepicker無法打開。我試圖在對話框中初始化選擇器，但仍然無法工作。

請幫我弄清楚這一點。

這裏是上述我試過的JSFIDDLE。 JSFIDDLE

這是我正在處理的真實例子。我試圖將查找酒店中的內容克隆到對話框中，並通過在旅途中更改新的內容ID來創建另外兩個日期選擇器。 EXAMPLE

來源

2014-04-22 TechyTee

什麼是datepicker和對話框的相對z-索引？ –

做了一個小提琴來重現它：http://jsfiddle.net/barmar/2J4eQ/。我注意到，如果我點擊輸入字段外部，然後點擊裏面，datepicker出現。 – Barmar

@Barmar，如果你添加'$（'＃arrivDate'）。blur（）。focus（）;'最後它會自動打開默認 –

var content = "<div><input type='text' id='arrivDate' /></div>"; 
    $('#searchdialog').html(content); 
    $('#arrivDate').datepicker({ 
     defaultDate: "+7", 
     changeMonth: true, 
     numberOfMonths: 1, 
    }); 
    $('#searchdialog').dialog({height: 280, width: 740, resizable: false, modal: true, draggable: true});

首次呼叫日期選擇爲arrivDate然後調用對話框searchdialog ..

FIDDLE DEMO

來源

2014-04-22 12:47:41 Tuhin

您可以用簡單地將blur到輸入

var content = "<span id='lala'></span><div><input type='text' id='arrivDate' /></div>"; 
$('#searchdialog').html(content).blur(); 
$('#searchdialog').dialog({ 
    height: 280, 
    width: 740, 
    resizable: false, 
    modal: true, 
    draggable: true 
}); 
       /* Here it is */ 
       /****/ 
$('#arrivDate').blur().datepicker({ 
    defaultDate: "+7", 
    changeMonth: true, 
    numberOfMonths: 1, 
});

UPDATED FIDDLE HERE嘗試

來源

2014-04-22 12:51:47 webeno

在jQuery中添加和初始化jQuery Datepicker在對話框中移動

回答

相關問題