jquery - 将 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({});