CODEWITHSUNDEEP
jqueryhtml
gman_donster
gman_donster

Reputation: 331

Putting 2 jQuery date picker input fields on one form

Hello i found a cool jQuery script that does a cool date picker thing for a form. What I would like to do is have two date fields (start and end date) both using this date picker script; i put them both on there but only the first one works. So I am thinking I need to modify the second script somehow so I can have it run on the same page next to the first one. I tried to rename it but that did not help…

here are the two scripts:

<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
    $(function() {
        $( "#datepicker" ).datepicker();
    });
</script>


<meta charset="utf-8">
<title>jQuery UI Datepicker2 - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
    $(function() {
        $( "#datepicker2" ).datepicker2();
    });
</script>

Here are the two date fields on the form:

<form method="post" action="/post-views-counter/">
    <div style="float: left;">
        Start Date: <input type="text" id="datepicker" name="date1">
    </div>

    End Date: <input type="text" id="datepicker2" name="date2">
    <br/><br/><br/>
    <input type="submit" value="Submit"/>
</form>

So the first one works but second one does not; you can see my attempt to modify the second one which did not work. Can anyone help with this?

Thanks...

Upvotes: 1

Views: 7663

Answers (2)

ButterflyRay
ButterflyRay

Reputation: 423

You had some issues in your code. Check the corrections given bellow.

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<form method="post" action="/post-views-counter/">
<div style="float: left;">
Start Date: <input type="text" id="datepicker" name="date1"></div>

End Date: <input type="text" id="datepicker2" name="date2">
<br/><br/><br/>
<input type="submit" value="Submit"/>
</form>

<script>
$(function() {
    $("#datepicker, #datepicker2").datepicker({});
});
<script>

http://jsfiddle.net/ba81mx8a/

Upvotes: 1

Giannis Grivas
Giannis Grivas

Reputation: 3412

Try to do this: http://jsfiddle.net/csdtesting/nLe349a0/

Html:

<form method="post" action="/post-views-counter/">
    <div style="float: left;">Start Date:
        <input type="text" value="" id="datepicker" name="date1" />
    </div>End Date:
    <input type="text" value="" id="datepicker2" name="date2" />
    <br/>
    <br/>
    <br/>
    <input type="submit" value="Submit" />
</form>

JS

$("#datepicker, #datepicker2").datepicker({});

Upvotes: 5

Related Questions