jQuery日期选择器绑定到输入文本字段错误

我在jQuery中创建日期范围选择器并将其绑定到输入文本字段。jQuery日期选择器绑定到输入文本字段错误

的代码是这样的：

<!DOCTYPE html> 
<html> 
<head> 
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 

    <script> 

    $(document).ready(function() { 
    $("#datepicker").datepicker(); 
    }); 

    </script> 


</head> 
<body style="font-size:62.5%;"> 
    <form action="sample.php" method="post"> 

Start Date: <input type="text" name="startdate" id="datepicker"/> 
End Date: <input type="text" name="enddate" id="datepicker"/> 
<input type="submit" /> 
</form> 
</body> 
</html>

数据似乎是工作的开始日期输入文本字段。当我选择起始日期字段，显示的日历：

enter image description here

但是当我点击结束日期输入文本字段，永远不会出现在日历。我需要通过使用该日历选择日期开始和结束。

我的代码中一定是错的。谁能告诉我？

谢谢！

来源

2012-03-19 Tristan Jade Awat

非常感谢您的帮助。 – 2012-03-19 08:11:28

Hiya所以你有2个元素开始和结束日期相同id = datepicker这是不正确的。

看到这样的例子：http://jsbin.com/evudo

解决方案：

请初始化为输入框，

$(document).ready(function() { 
     $("#start_datepicker").datepicker(); 
    $("#end_datepicker").datepicker(); 

    });

HTML

Start Date: <input type="text" name="startdate" id="start_datepicker"/> 
End Date: <input type="text" name="enddate" id="end_datepicker"/>

希望它能帮助，欢呼

来源

2012-03-19 07:46:55

两个输入字段都使用相同的ID。尝试此

Start Date: <input type="text" name="startdate" id="datepicker_start"/> 
End Date: <input type="text" name="enddate" id="datepicker_end"/> 


$(document).ready(function() { 
    $("#datepicker_start").datepicker(); 
    $("#datepicker_end").datepicker(); 
});

来源

2012-03-19 07:46:59

定义和用法 id属性指定用于HTML元素（值必须是在HTML文档中是唯一的）的唯一ID。从W3schools，如果你想使用两个文本字段尝试有一个日期范围

这

var dates = j$("#trdatefrom, #trdateto").datepicker({ 
       changeMonth: true, 
       changeYear: true, 
       maxDate: new Date(), 
       dateFormat: "yy/mm/dd", 
       onSelect: function(selectedDate) { 
         var option = this.id == "trdatefrom" ? "minDate" : "maxDate", 
           instance = j$(this).data("datepicker"), 
           date =j$.datepicker.parseDate(
             instance.settings.dateFormat || 
             j$.datepicker._defaults.dateFormat, 
             selectedDate, instance.settings); 
         dates.not(this).datepicker("option", option, date); 
       } 
     });

从jquery datepicker docu

来源

2012-03-19 07:47:32 ton

这与这个特定问题有什么关系？ – redDevil 2012-03-19 07:51:29

@achusonline编辑了我的答案，以便在问题的上下文中作出回答 – ton 2012-03-19 08:21:13

你已经给了这两个要素相同的ID .. ID值的元素在该文件中应该是唯一的。

<script>  
$(document).ready(function() {  
     $("#datepicker1").datepicker(); });  
     $("#datepicker2").datepicker(); });  

</script> </head> 
<body style="font-size:62.5%;"> 
<form action="sample.php" method="post"> 
    Start Date: <input type="text" name="startdate" id="datepicker1"/> 
    End Date: <input type="text" name="enddate" id="datepicker2"/> 
<input type="submit" /> </form> 
</body> </html>

或者你可以使用一个类，

<script>  
$(document).ready(function() {  
     $(".datepicker").datepicker(); });  
</script> </head> 
<body style="font-size:62.5%;"> 
<form action="sample.php" method="post"> 
    Start Date: <input type="text" name="startdate" class="datepicker"/> 
    End Date: <input type="text" name="enddate" class="datepicker"/> 
<input type="submit" /> </form> 
</body> </html>

来源

2012-03-19 07:49:21 redDevil

ID应该根据标准是唯一的，请尝试更改开始日期和结束日期的ID。或者用class替换id。

Start Date: <input type="text" name="startdate" class="datepicker"/> 
End Date: <input type="text" name="enddate" class="datepicker"/> 


$(document).ready(function() { 
    $(".datepicker").datepicker(); 
    });

希望这有助于！

来源

2012-03-19 07:52:33 Vimalnath

jQuery日期选择器绑定到输入文本字段错误

回答

相关问题