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日期選擇器綁定到輸入文本字段錯誤

回答

相關問題