Javascript DatePicker不起作用

时间:2012-06-25 19:41:54

标签: javascript datepicker

我无法让jquery的日期选择器在我的页面上工作。如果有人想了解更多细节,我在codecall上有一个论坛帖子。这是一个链接http://forum.codecall.net/topic/70462-copy-and-paste-date-picker-javascipt/。这是我的代码与此页面相关联。当我单击文本字段时,日期选择器不会显示。为什么?有谁能看到这个问题?

<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
$(function() {
$( "#start_date" ).datepicker();
});
$(function() {
$( "#end_date" ).datepicker();
});

<div id="dateField"> 
<p> 
Start Date: <input type="TEXT" 
name="start_date" id="startDate" 
value="" /> 
</p> 
<p> 
End Date: <input type="TEXT" 
name="end_date" id="endDate" 
value="" /> 
</p> 
<small>Dates Should be in the format DD/MM/YYYY</small> 
</p> 
</div>  

2 个答案:

答案 0 :(得分:1)

将jQuery UI datepicker代码包装在<script>标记中,并使用type属性将其标记为javascript。为您的两个datepicker调用使用单个文档就绪块。确保您使用的是元素的正确ID。

<script type="text/javascript">
   $(document).ready(function() {

        $("#startDate").datepicker();
        $("#endDate").datepicker();
   });
</script>

答案 1 :(得分:1)

切换您的ID和名称标签。 ID属性必须位于$('ID')。datepicker()内,而不是名称。

<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>

<script type="text/javascript">
$(function() {
$( "#start_date" ).datepicker();
});
$(function() {
$( "#end_date" ).datepicker();
});
</script>

<div id="dateField"> 
<p> 
Start Date: <input type="TEXT" 
id="start_date" name="startDate" 
value="" /> 
</p> 
<p> 
End Date: <input type="TEXT" 
id="end_date" name="endDate" 
value="" /> 
</p> 
<small>Dates Should be in the format DD/MM/YYYY</small> 
</p> 
</div>