JQUERY UI datepicker not working when applied to multiple ids

Question

I am trying to integrate JQUERY datepicker with the following form. I can't seem to figure out why the datepicker doesn't work no matter what I try. I have looked everywhere on stack overflow and none of the solutions worked.

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

what is manage.css?

m2j
– m2j

2016-12-06 19:54:06 +00:00
Commented Dec 6, 2016 at 19:54 — m2j
– m2j, Commented Dec 6, 2016 at 19:54
Just the css for the page. Its a basic form.

nemesis94
– nemesis94

2016-12-06 19:54:43 +00:00
Commented Dec 6, 2016 at 19:54 — nemesis94
– nemesis94, Commented Dec 6, 2016 at 19:54

m2j · Accepted Answer · 2016-12-06 20:47:58Z

1

just replace $( "#startdate" , "#enddate" ) with $( "#startdate, #enddate" ). Your code will work

I just added class to the <input> field and use it in the script for multiple datepick. And reduced yyyy to yy for the required format. The yyyy will give you 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>

edited Dec 6, 2016 at 20:47

answered Dec 6, 2016 at 20:25

m2j

1,1605 gold badges19 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nemesis94 Over a year ago

That works! But I still don't understand why it didn't work for multiple id's

Collectives™ on Stack Overflow

JQUERY UI datepicker not working when applied to multiple ids

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related