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

您的代码中存在一些问题。检查下面给出的更正。

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

在一个表单上放置2个jQuery日期选择器输入字段

2 个答案: