Question

我正在构建一个网页，我尝试使用HTML5。不，我尝试通过交叉浏览来实现一个日期选择器......并且是的...它的确有效。现在的问题是，如果我将输入标记放在我的表单中，则datepicker不起作用。这是我的例子：

    <html lang="en">
    <head>
            <meta http-equiv="Content-Type" content="text/html charset="utf-8" />
            <title>My Page.</title>
            <!--<link rel="stylesheet" href="blog.css" type="text/css">-->
            <link rel="stylesheet" href="style.css" type="text/css">
            <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
            <script src="js/jquery-1.9.1.js"></script>
            <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

            <script>
            $(function(){
                $("#datepicker").datepicker();
                });
            </script>
    </head>
<body>
    <form id="create_inserat" action="/inserat.php=<?php tbd ?>" method="post">
        <fieldset id="inserat">
            <legend>Inserat erfassen</legend>
            <ol>
                <li>
                    <label for="start">Startdatum</label>
                    <input type="date" name="date" id="datepicker" value="" />
                </li>
            </ol>
        </fieldset>
    </form>
    ....

怎么了？如果我从form-tag中输入input-tag，为什么它可以工作，但是在form-tag中（比如我的例子）它不起作用？

希望，有人可以帮助我。

问候，Yab

Answer 1

附加日期选择器功能的元素位于表单上方，因此在运行时，它无法找到datepicker输入，因为它尚未创建。你有两个选择。

将脚本移至表单
运行脚本onload

编辑：正如评论中所指出的那样，这是一堆垃圾，尽管至少我从中学到了一些东西。

问题实际上是标记中有两个具有相同ID的日期选择器，因此jQuery只会找到第一个具有此构造的日期选择器：

 $("#datepicker")

解决方案只是使用一类datepicker而不是ID。 jQuery中的类选择器将使用class =“datepicker”匹配所有元素，并将datepicker应用于它们。

 $(function(){
      $(".datepicker").datepicker();
 });

表单标记中的jquery datepicker

1 个答案: