Search jQuery

jQuery Forum

Need Multiple Datepickers; Getting Only One

in Using jQuery UI • 7 years ago

Hello again! I demoed the Datepicker widget on one particular date field and it worked awesomely, but when I tried to apply it to other date fields on the same PHP document, that one Datepicker that I had demoed with is the only one that works. From my previous issue, I have confirmed that my Header works (1st code below), and my Date fields all have either of the last two codes below. I suspect that the error lies in the ID section of the Date input codes (bolded), but my attempts to mimic this and this both failed. Can someone help me solve this, and can someone tell me exactly what, if anything, the "name" tag does? (I think I'd added it so that the compiler PHP could identify the different inputs separately, but I forgot.)

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/start/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/_layout/stylesheets/members_bulletin_datepicker.css">
<script>
   $(function() {
   $("#datepicker").datepicker();
   });
</script>

<span>Date: <input type="text" name="Date" id="datepicker" placeholder="mm/dd/yyyy"></span><br>

<span>Start Date: <input type="text" name="startDate" id="datepicker" placeholder="mm/dd/yyyy"></span><br>
<span>End Date: <input type="text" name="endDate" id="datepicker" placeholder="mm/dd/yyyy"></span><br>

Replies(3)

coldfusio..

Re: Need Multiple Datepickers; Getting Only One

7 years ago

Putting "datepicker's" aside for a moment you can't have id's on a page with the same ID.

So this as merely html is not allowed:

<span>Start Date: <input type="text" name="startDate" id="datepicker" placeholder="mm/dd/yyyy"></span><br>
<span>End Date: <input type="text" name="endDate" id="datepicker" placeholder="mm/dd/yyyy"></span><br>

So to answer your question you need 2 datepickers each one targeting some input.

So try this instead:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
body {
    font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
    font-size: 62.5%;
}
   </style>
<script>
$(function() {
    $( "#datepicker1" ).datepicker();
    $( "#datepicker2" ).datepicker();
});
</script>
</head>
<body>

<p>Date depart: <input type="text" id="datepicker1"></p>
<p>Date arrive: <input type="text" id="datepicker2"></p>

</body>
</html>

coldfusio..

Re: Re: Need Multiple Datepickers; Getting Only One

7 years ago

For the second part you write,

Can someone help me solve this, and can someone tell me exactly what, if anything, the "name" tag does?

See this example:

http://james2013.batcave.net/multi_datepickers_and_submit.htm

Study the code above using view source. Then the PHP code that processes the form contains:

<html>
<body>

You passed the depart date as being <?php echo $_POST["startDate"]; ?><br>
You passed the end date as being <?php echo $_POST["endDate"]; ?>

</body>
</html>

So if you are using a traditional form, you use the name to get at the values of your assigned datepickers.

See:

http://www.w3schools.com/tags/tag_input.asp

For valid attributes for input tags

nint3ndraw

Re: Need Multiple Datepickers; Getting Only One

7 years ago

Ah, so multiple IDs is impossible and Name distinguishes each data value as something else on the PHP form. Thanks very much for your help!

Top Reply

Response title

Attachments

jQuery Forum

Need Multiple Datepickers; Getting Only One

Replies(3)

Re: Need Multiple Datepickers; Getting Only One

Re: Re: Need Multiple Datepickers; Getting Only One

Re: Need Multiple Datepickers; Getting Only One

Statistics

Tags

Actions

Related Posts