1

我正在尝试做一个 jquery 表单，并且在开始时间和结束时间字段中我需要一个日期选择器。我已经为上述字段使用了一个 id，所以不能使用 id="datepicker"。谁能告诉我还有什么其他方法可以做到这一点

<!doctype html>
<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>jQuery UI Dialog - Modal form</title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <link rel="stylesheet" href="/resources/demos/style.css" />
        <style>
            body {
                font-size: 62.5%;
            }
            label, input {
                display:block;
            }
            input.text {
                margin-bottom:12px;
                width:95%;
                padding: .4em;
            }
            fieldset {
                padding:0;
                border:0;
                margin-top:25px;
            }
            h1 {
                font-size: 1.2em;
                margin: .6em 0;
            }
            div#users-contain {
                width: 350px;
                margin: 20px 0;
            }
            div#users-contain table {
                margin: 1em 0;
                border-collapse: collapse;
                width: 100%;
            }
            div#users-contain table td, div#users-contain table th {
                border: 1px solid #eee;
                padding: .6em 10px;
                text-align: left;
            }
            .ui-dialog .ui-state-error {
                padding: .3em;
            }
            .validateTips {
                border: 1px solid transparent;
                padding: 0.3em;
            }
        </style>
        <script>
            $(function() {
                var name = $("#name"),
                    StartTime = $("#StartTime"),
                    EndTime = $("#EndTime"),
                    allFields = $([]).add(name).add(StartTime).add(EndTime),
                    tips = $(".validateTips");

                function updateTips(t) {
                    tips.text(t)
                        .addClass("ui-state-highlight");
                    setTimeout(function() {
                        tips.removeClass("ui-state-highlight", 1500);
                    }, 500);
                }

                function checkLength(o, n, min, max) {
                    if (o.val().length > max || o.val().length < min) {
                        o.addClass("ui-state-error");
                        updateTips("Length of " + n + " must be between " + min + " and " + max + ".");
                        return false;
                    } else {
                        return true;
                    }
                }

                function checkRegexp(o, regexp, n) {
                    if (!(regexp.test(o.val()))) {
                        o.addClass("ui-state-error");
                        updateTips(n);
                        return false;
                    } else {
                        return true;
                    }
                }
                $("#dialog-form").dialog({
                    autoOpen: false,
                    height: 300,
                    width: 350,
                    modal: true,
                    buttons: {
                        "Create an account": function() {
                            var bValid = true;
                            allFields.removeClass("ui-state-error");

                            if (true) {
                                $("#users tbody").append("<tr>" +
                                    "<td>" + name.val() + "</td>" +
                                    "<td>" + StartTime.val() + "</td>" +
                                    "<td>" + EndTime.val() + "</td>" +
                                    "</tr>");
                                $(this).dialog("close");
                            }
                        },
                        Cancel: function() {
                            $(this).dialog("close");
                        }
                    },
                    close: function() {
                        allFields.val("").removeClass("ui-state-error");
                    }
                });
                $("#create-user")
                    .button()
                    .click(function() {
                    $("#dialog-form").dialog("open");
                });
            });
        </script>
    </head>

    <body>
        <div id="dialog-form" title="Create new user">
            <p class="validateTips">All form fields are required.</p>
            <form>
                <fieldset>
                    <label for="name">Name</label>
                    <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
                    <label for="StartTime">Start Time</label>
                    <input type="text" name="StartTime" id="StartTime" value="" class="text ui-widget-content ui-corner-all" id="datepicker" />
                    <label for="EndTime">End Time</label>
                    <input type="password" name="EndTime" id="EndTime" value="" class="text ui-widget-content ui-corner-all" />
                </fieldset>
            </form>
        </div>
        <div id="users-contain" class="ui-widget">

<h1>Appointment Details</h1>

            <table id="users" class="ui-widget ui-widget-content">
                <thead>
                    <tr class="ui-widget-header ">
                        <th>Name</th>
                        <th>Start Time</th>
                        <th>End Time</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>John Doe</td>
                        <td>john.doe@example.com</td>
                        <td>johndoe1</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <button id="create-user">Create Appointments</button>
    </body>

</html>
4

1 回答 1

2

我看到您的代码存在一些问题，但要严格解决这里的问题是您必须解决的问题

...
<input type="text" name="StartTime" id="StartTime" value="" class="text ui-widget-content ui-corner-all" id="datepicker"/>
<label for="EndTime">End Time</label>
<input type="password" name="EndTime" id="EndTime" value="" class="text ui-widget-content ui-corner-all" />
...
  • 注意你的第一个输入有 2 个 id，你应该去掉第二个
  • 我看到您正在使用 jQuery UI 作为 datepicker 插件，因此您应该知道 datepicker 需要像这样显式调用
$("#StartTime, #EndTime").datepicker();

您不必为它们定义特定的 ID。查看日期选择器的示例/文档

  • 我看到您的第二个输入是密码类型。我相信它应该是文字
于 2013-05-25T10:29:14.737 回答