Question

我正在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>

数据似乎适用于START DATE输入文本字段。当我选择开始日期字段时，将显示日历：

enter image description here

但是当我点击END DATE输入文本字段时，日历永远不会出现。我需要使用该日历选择日期START和END。

我的代码肯定有问题。有谁能告诉我？

谢谢！

Answer 1

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"/>

希望它有所帮助，欢呼声

Answer 2

您为这两个元素指定了相同的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>

Answer 3

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

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


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

希望这有帮助！

Answer 4

您对两个输入字段使用相同的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();
});

Answer 5

定义和用法 id属性指定HTML元素的唯一ID（该值在HTML文档中必须是唯一的）。来自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

jQuery Date Picker绑定到输入文本字段错误

5 个答案: