每次在PHP中添加新行时查看javaScript datepicker

时间:2013-12-16 07:48:42

标签: javascript php css

我需要一些帮助。我并不擅长PHP& JavaScript的。以下是我的代码。我想在每次添加新行时查看日期选择器。但是,结果并不像我想要的那样。有人可以帮我弄清楚我的错误是什么以及如何解决它? TQ

<html>
<head>
<title>Test Code</title>
<link type="text/css" href="css/custom-theme/jquery-ui-1.7.1.custom.css" rel="stylesheet"    /> 
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>

</head>
<body>
<form>
<div id="dates">        
<div>
<script>
$(function test1(){

// Datepicker
$.datepicker.setDefaults({
showOn: 'both',
buttonImageOnly: true,
buttonImage: 'calendar.gif',
buttonText: 'Calendar',
changeMonth: true,
changeYear: true,
firstDay: 1, 
dateFormat: 'yy-mm-dd'
});

$('#datepicker1').datepicker();
});
</script>
<label>Date 1</label>
<input type="text" name="datepicker1" id="datepicker1" />
</div>      
</div>
<div>
<input type="submit" id="submit1" value=" Add "/>
</div>
</form>
<script type="text/javascript">
var dates = document.getElementById('dates'),
template = dates.getElementsByTagName('div'),
current = template.length,
max = 20;

template = template[0];

submit1.onclick = function () {
var new_field = template.cloneNode(true);
current += 1;
new_field.innerHTML = new_field.innerHTML.replace(/1/g, current);
dates.appendChild(new_field);   
return false;
};
document.body.appendChild(add_link);
</script>
</body>
</html>

http://jsbin.com/IXofulic/2/edit

3 个答案:

答案 0 :(得分:1)

将您的日期选择代码置于文档就绪状态。

$(document).ready(function() {

$('#datepicker1').datepicker();

});

答案 1 :(得分:0)

简单您已获得id来获取datepicker

$('#datepicker1').datepicker();
});

而是使用班级名称

$('.datepicker1').datepicker();
    });

答案 2 :(得分:0)

最好使用Jquery日期选择器。它很容易并且可以完成你的任务。

按照您可以使用的代码。

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

在HTML格式的表单中添加:

<input type="text" name="datepicker1" id="datepicker1" placeholder="Select Date" />

Javascript:

<script>
   $(function() {
   $( "#datepicker1" ).datepicker({ dateFormat: 'yy-mm-dd' });
 });
 </script>