具有相同内容的 HTML 2 区域

我正在尝试做一个基于Groovy/Grails的日期选择器。我对HTML不是很熟悉，但我设法做了一个选择区域，当用户单击它时，它会出现一个日历，然后正确选择日期并将其保存在数据库中。但我想再做一个，用它作为结束日期。我尝试了很多事情，但我没有做到。谁能帮忙？这是到目前为止的代码：

<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="main"/>
<title>WannabeDoodle</title>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#datepicker").datepicker();
});
</script>
</head>
<body>
<center><h1><b>Schedule an event</b></h1></center>
<br>
<center><font color="#2977C1">1. Generals ></font> <b>2. Set the date ></b> 3. Invite</center>
<br>
<g:form controller="SetDate" action="next">
<div class="fieldcontain">
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
<form>
<label for="startDate">Select date</label>
<g:textField name="startDate" id="datepicker" value="${startDate}"/>
</form>
<br><br>
<center>
<a href="http://localhost:8080/Groodle/CreateGenerals"><font color=#2875bd>Back</font></a>
&emsp;
<g:actionSubmit class="buttons" value="Next"/>
</center>
</div>
</g:form>
</body>
</html>

我修复了它。我在脚本中制作了第二个日期选择器ID，名为datepicker2，并在结束日期使用它。

<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="main"/>
<title>WannabeGroodle</title>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#datepicker").datepicker();
$("#datepicker2").datepicker();
});
</script>
</head>
<body>
<center><h1><b>Schedule an event</b></h1></center>
<br>
<center><font color="#2977C1">1. Generals ></font> <b>2. Set the date ></b> 3. Invite</center>
<br>
<g:form controller="SetDate" action="next">
<div class="fieldcontain">
<form>
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
<label for="startDate">Select date</label>
<g:textField name="startDate" id="datepicker" value="${startDate}"/>    
<br><br>
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
<label for="endDate">Select end date</label>
<g:textField name="endDate" id="datepicker2" value="${endDate}"/>               
</form>
<br><br><br>
<center>
<a href="http://localhost:8080/Groodle/CreateGenerals"><font color=#2875bd>Back</font></a>
&emsp;
<g:actionSubmit class="buttons" value="Next"/>
</center>
</div>
</g:form>
</body>
</html>

相关内容

最新更新

热门标签：