具有相同内容的 HTML 2 区域答案

【问题标题】：HTML 2 areas with the same content具有相同内容的 HTML 2 区域
【发布时间】：2017-08-19 11:04:59
【问题描述】：

我正在尝试基于 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>

【问题讨论】：

标签： jquery html grails datepicker

【解决方案1】：

我修好了。我在脚本中创建了第二个名为 datepicker2 的日期选择器 ID，并在结束日期使用它。

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

【讨论】：