將2個jQuery日期選擇器輸入字段放在一個表單中

Question

你好，我發現了一個很酷的jQuery腳本，它爲表單提供了一個很酷的日期選擇器。我想要做的是有兩個日期字段（開始和結束日期）都使用這個日期選擇器腳本;我把它們放在那裏，但只有第一個工作。所以我想我需要修改第二個腳本，所以我可以讓它在第一個腳本旁邊的同一頁上運行。我試圖重新命名，但沒有幫助...

這裏有兩個腳本：

<meta charset="utf-8"> 
<title>jQuery UI Datepicker - Default functionality</title> 
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"> 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script> 
<link rel="stylesheet" href="/resources/demos/style.css"> 
<script> 
    $(function() { 
     $("#datepicker").datepicker(); 
    }); 
</script> 


<meta charset="utf-8"> 
<title>jQuery UI Datepicker2 - Default functionality</title> 
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"> 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script> 
<link rel="stylesheet" href="/resources/demos/style.css"> 
<script> 
    $(function() { 
     $("#datepicker2").datepicker2(); 
    }); 
</script> 

這裏是窗體上的兩個日期字段：

<form method="post" action="/post-views-counter/"> 
    <div style="float: left;"> 
     Start Date: <input type="text" id="datepicker" name="date1"> 
    </div> 

    End Date: <input type="text" id="datepicker2" name="date2"> 
    <br/><br/><br/> 
    <input type="submit" value="Submit"/> 
</form> 

因此，第一個作品但第二個不是;你可以看到我試圖修改第二個不起作用的嘗試。有人能幫忙嗎？

謝謝...

Answer 1

嘗試這樣做：http://jsfiddle.net/csdtesting/nLe349a0/

的Html：

<form method="post" action="/post-views-counter/"> 
    <div style="float: left;">Start Date: 
     <input type="text" value="" id="datepicker" name="date1" /> 
    </div>End Date: 
    <input type="text" value="" id="datepicker2" name="date2" /> 
    <br/> 
    <br/> 
    <br/> 
    <input type="submit" value="Submit" /> 
</form> 

JS

$("#datepicker, #datepicker2").datepicker({}); 

Answer 2

你有y中的一些問題我們的代碼。檢查下面給出的更正。

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"> 
<link rel="stylesheet" href="/resources/demos/style.css"> 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script> 
<form method="post" action="/post-views-counter/"> 
<div style="float: left;"> 
Start Date: <input type="text" id="datepicker" name="date1"></div> 

End Date: <input type="text" id="datepicker2" name="date2"> 
<br/><br/><br/> 
<input type="submit" value="Submit"/> 
</form> 

<script> 
$(function() { 
    $("#datepicker, #datepicker2").datepicker({}); 
}); 
<script> 

http://jsfiddle.net/ba81mx8a/