jQuery日期選擇器與輸入文本字段錯誤相關
[英]jQuery Date Picker tied up to an input text field error
問題描述
我正在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和END。
我的代碼一定有問題。 誰能告訴我？
謝謝！
5 個解決方案
解決方案1
3 已采納 2012-03-19 07:46:55
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"/>
希望能有所幫助，歡呼
解決方案2
2 2012-03-19 07:49:21
您為兩個元素都指定了相同的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>
解決方案3
2 2012-03-19 07:52:33
根據標准，ID應該是唯一的，請嘗試更改開始日期和結束日期的ID。 或將id替換為class。
Start Date: <input type="text" name="startdate" class="datepicker"/>
End Date: <input type="text" name="enddate" class="datepicker"/>
$(document).ready(function() {
$(".datepicker").datepicker();
});
希望這可以幫助！
解決方案4
1 2012-03-19 07:46:59
兩個輸入字段都使用相同的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();
});
解決方案5
0 2012-03-19 07:47:32
定義和用法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日期選擇器沒有在ajax生成的輸入字段上工作
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.