Question

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

Answer 1

我修好了。我在脚本中创建了第二个名为datepicker2的datepicker 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>

HTML 2区域具有相同的内容

1 个答案: