彈出日期選擇器

-3

如何在動態加載的textbox.i.e中添加Jquery datepicker，當我點擊一個按鈕時，包含來自外部頁面的文本框的彈出框將顯示在當前頁面中。在那個文本框中我想使用datepicker。彈出日期選擇器

我用下面的AJAX加載一個外部頁面

<script type="text/javascript"> 
function manageapp(id,apcno) 
    { 
     /*alert(id); 
     alert(apcno);*/ 
     //alert(dd); 
     if (window.XMLHttpRequest) 
     {// code for IE7+, Firefox, Chrome, Opera, Safari 
      req=new XMLHttpRequest(); 
     } 
     else 
     {// code for IE6, IE5 
      req=new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
     var strURL="manage_ajx.php?id="+id+"&acpno="+apcno; 
     if (req) 
     { 
      req.onreadystatechange = function() { 
      if (req.readyState == 4) { 
      // only if "OK" 
       if (req.status == 200) 
       { 
        document.getElementById('show_details').innerHTML=req.responseText; 
       } else { 
        alert("There was a problem while using XMLHTTP:\n" + req.statusText); 
        } 
       }    
      }   
      req.open("GET", strURL, true); 
      req.send(null); 
     } 
    } 


</script>

繼對彈出

<script type="text/javascript"> 
//New Pop up 
$(document).ready(function() { 
    $('#inline').hide(); 
    $('.login-window').click(function() { 

      $('#inline').addClass("login-popup"); 
      $('#inline').css({'visibility':'visible'}); 

     // Getting the variable's value from a link 
     var loginBox = $(this).attr('href'); 

     //Fade in the Popup and add close button 
     $('#inline').fadeIn(300); 

     //Set the center alignment padding + border 
     var popMargTop = ($(loginBox).height() + 24)/2; 
     var popMargLeft = ($(loginBox).width() + 24)/2; 

     $('#loginBox').css({ 
      'margin-top' : -popMargTop, 
      'margin-left' : -popMargLeft 
     }); 

     // Add the mask to body 
     $('body').append('<div id="mask"></div>'); 
     $('#mask').fadeIn(300); 

     return false; 
    }); 

    // When clicking on the button close or the mask layer the popup closed 
    $('a.close, #mask').live('click', function() { 
     $('#mask , .login-popup').fadeOut(300 , function() { 
     $('#mask').remove(); 
    }); 
    return false; 
    }); 
}); 
</script>

以下是呼叫thae彈出頁面 // PHP編碼

<a class="login-window" href="#inline" title="Business Details" onclick="javascript:manageapp('<?php echo $patientlist[$i]['ap_id']; ?>','<?php echo $patientlist[$i]['apc'];?>')"> 

<img src="images/calendar-icon.png" title="manage appointment"/> 

</a>

？> // php編碼

任何機構可以幫我解決這個問題

來源

2012-12-27 MANIKANDAN

我找到了解決方案，做如下，添加在阿賈克斯回報功能的日期選擇器功能，即在成功

<script type="text/javascript"> 
    function manageapp(id,apcno) 
    { 
     /*alert(id); 
     alert(apcno);*/ 
     //alert(dd); 
     if (window.XMLHttpRequest) 
     {// code for IE7+, Firefox, Chrome, Opera, Safari 
      req=new XMLHttpRequest(); 
     } 
     else 
     {// code for IE6, IE5 
      req=new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
     var strURL="manage_ajx.php?id="+id+"&acpno="+apcno; 
     if (req) 
     { 
      req.onreadystatechange = function() { 
      if (req.readyState == 4) { 
      // only if "OK" 
       if (req.status == 200) 
       { 


        document.getElementById('show_details').innerHTML=req.responseText; 


         $("#frompop").datepicker({ 
          defaultDate: "+1w", 
          changeMonth: true, 
          changeYear: true, 
          numberOfMonths: 1, 

         }); 
         $('#timepickerpop').timepicker({ 'timeFormat': 'g:i A','step':15,'minTime': '8:00am','maxTime': '8:00pm' }); 



       } else { 
        alert("There was a problem while using XMLHTTP:\n" + req.statusText); 
        } 
       }    
      }   
      req.open("GET", strURL, true); 
      req.send(null); 
     } 
    } 
    </script>

來源

2012-12-28 04:24:10 MANIKANDAN

<!doctype html> 

<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>jQuery UI Datepicker - Default functionality</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script> 
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css" /> 
    <script> 
    $(function() { 
     $("#datepicker").datepicker(); 
    }); 
    </script> 
</head> 
<body> 

<p>Date: <input type="text" id="datepicker" /></p> 


</body> 
</html>

而對於更多deatils請按照鏈接http://jqueryui.com/datepicker/

來源

2012-12-27 07:22:21

試試這個：

$(document).on('load', 'your_datepicker_class_or_id', function(){ 
    $(this).datepicker(); 
});

，並假設you have these to referenced你上面的js東西：

<script src="http://code.jquery.com/jquery-1.8.3.js"></script> 
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

來源

2012-12-27 07:37:01 Jai

喜JAI，感謝您的答覆，我想這一點，但它不工作，我插入在那個Jquery函數提醒，它不工作 – MANIKANDAN

彈出日期選擇器

回答

相關問題