应用于多个ID时,JQUERY UI datepicker无法正常工作

时间:2016-12-06 19:42:41

标签: jquery-ui-datepicker

我正在尝试将JQUERY datepicker与以下表单进行整合。我似乎无法弄清楚为什么无论我尝试什么,日期选择器都不起作用。我已经看到堆栈溢出的所有地方,没有一个解决方案工作。

<html>
    <head>
        <script type="text/javascript"     src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript"     src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
        <link href="manage.css" rel="stylesheet" type="text/css" />
        <link rel="stylesheet"     href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" type="text/css" media="all">
            <script>
    $(document).ready(function() {
     $(function() {
        $( "#startdate" , "#enddate" ).datepicker( {dateFormat: 'yyyy-mm-dd' }   );

      });
    });
    </script>
        </head>
        <body>
            <form action="" method="POST" name="form1">
                <label>
                    <b>Start Date</b>
                    <span class="style1">*</span> (format YYYY-MM-DD)   
                </label>
                <br />
                <input type="text" name="time_start" id="startdate"/>
                <br/>
                <br/>

          **strong text**
                <label>
                    <b>End Date</b>
                    <span class="style1">*</span> (format YYYY-MM-DD)   
                </label>
                <br />
                <input type="text" name="time_end" id="enddate"/>
                <br/>
                <br/>
            </form>
        </body>
    </html>

1 个答案:

答案 0 :(得分:1)

只需将$( "#startdate" , "#enddate" )替换为$( "#startdate, #enddate" )即可。您的代码将起作用

我刚刚将类添加到<input>字段,并在脚本中使用它来进行多个日期选择。并将yyyy缩减为yy以获取所需格式。 yyyy将为您提供20162016-12-07

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" type="text/css" media="all">
        <script>
            $(document).ready(function() {
                $(function(){$('.datepick').datepicker( {dateFormat: 'yy-mm-dd' } ); }); 
            });
        </script>
    </head> 
    <body>
        <form action="" method="POST" name="form1">
            <label>
                <b>Start Date</b>
                <span class="style1">*</span> (format YYYY-MM-DD)   
            </label>
            <br />
            <input type="text" name="time_start" class="datepick" id="startdate"/>
            <br/>
            <br/>
            <label>
                <b>End Date</b>
                <span class="style1">*</span> (format YYYY-MM-DD)   
            </label>
            <br />
            <input type="text" name="time_end" class="datepick" id="enddate"/>
            <br/>
            <br/>
        </form>
    </body>
</html>