Php 弹出窗口中的日期选择器
如何在动态加载的文本框中添加Jquery datepicker。即，当我单击一个按钮时，包含来自外部页面的文本框的弹出窗口将显示在当前页面中。在那个文本框中，我想使用datepicker 我使用以下ajax加载外部页面Php 弹出窗口中的日期选择器,php,jquery,popup,datepicker,Php,Jquery,Popup,Datepicker,如何在动态加载的文本框中添加Jquery datepicker。即，当我单击一个按钮时，包含来自外部页面的文本框的弹出窗口将显示在当前页面中。在那个文本框中，我想使用datepicker 我使用以下ajax加载外部页面 <script type="text/javascript"> function manageapp(id,apcno) { /*alert(id); alert(apcno);*/ //alert(dd
<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>
函数manageapp（id，apcno）
{
/*警报（id）；
警报（apcno）*/
//警报（dd）；
if（window.XMLHttpRequest）
{//IE7+、Firefox、Chrome、Opera、Safari的代码
req=新的XMLHttpRequest（）；
}
其他的
{//IE6、IE5的代码
req=新的ActiveXObject（“Microsoft.XMLHTTP”）；
}
var strURL=“manage_ajx.php？id=“+id+”&acpno=“+apcno；
如果（请求）
{
req.onreadystatechange=函数（）{
如果（req.readyState==4）{
//只有在“OK”的情况下
如果（请求状态==200）
{
document.getElementById（'show_details'）。innerHTML=req.responseText；
}否则{
警报（“使用XMLHTTP:\n“+req.statusText时出现问题”）；
}
}
}
请求打开（“获取”，strURL，true）；
请求发送（空）；
}
}
<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>
//新弹出窗口
$（文档）.ready（函数（）{
$（'#inline'）.hide（）；
$（'.login窗口'）。单击（函数（）{
$（'#inline'）.addClass（“登录弹出窗口”）；
$（'#inline'）.css（{'visibility'：'visible'}）；
//从链接获取变量的值
var loginBox=$（this.attr（'href'）；
//淡入弹出窗口并添加关闭按钮
$（'#inline'）.fadeIn（300）；
//设置中心对齐填充+边框
var popMargTop=（$（loginBox）.height（）+24）/2；
var popMargLeft=（$（loginBox）.width（）+24）/2；
$（'#loginBox'）.css（{
“页边距顶部”：-popMargTop，
“左边距”：-popMargLeft
});
//将遮罩添加到主体
$（'body'）。追加（''）；
$（'面具'）.fadeIn（300）；
返回false；
});
//单击“关闭”按钮或遮罩层时，弹出窗口关闭
$（'a.close，#mask'）.live（'click'，function（）{
$（'#掩码，.login popup'）.fadeOut（300，函数（）{
$（“#掩码”）.remove（）；
});
返回false；
});
});
<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>
<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>
<!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>
jQuery UI日期选择器-默认功能
$（函数（）{
$（“#日期选择器”）.datepicker（）；
});
日期：
$(document).on('load', 'your_datepicker_class_or_id', function(){
$(this).datepicker();
});
您在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>
我找到了解决方案，如下所示，在Ajax返回函数ie中添加datepicker函数成功
<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>
函数manageapp（id，apcno）
{
/*警报（id）；
警报（apcno）*/
//警报（dd）；
if（window.XMLHttpRequest）
{//IE7+、Firefox、Chrome、Opera、Safari的代码
req=新的XMLHttpRequest（）；
}
其他的
{//IE6、IE5的代码
req=新的ActiveXObject（“Microsoft.XMLHTTP”）；
}
var strURL=“manage_ajx.php？id=“+id+”&acpno=“+apcno；
如果（请求）
{
req.onreadystatechange=函数（）{
如果（req.readyState==4）{
//只有在“OK”的情况下
如果（请求状态==200）
{
document.getElementById（'show_details'）。innerHTML=req.responseText；
$（“#frompop”）.datepicker({
默认日期：“+1w”，
变化月：对，
变化年：是的，
月数：1，
});
$（'timepickerop'）.timepicker（{'timeFormat'：'g:ia'，'step'：15，'minTime'：'8:00am'，'maxTime'：'8:00pm'）；
}否则{
警报（“使用XMLHTTP:\n“+req.statusText时出现问题”）；
}
}
}
请求打开（“获取”，strURL，true）；
请求发送（空）；
}
}