Solved

jQuery DatePicker on a table with multiple rows

Posted on 2010-11-19
2
668 Views
Last Modified: 2012-05-10
Hi,

I have a table as follows:

<ul class="xyz">
   <li>Date</li>
   <li>Start</li>
   <li>End</li>
</ul>
<ul class="abc">
   <li><input type="text" name="date0" id="date"></li>
   <li><...></li>
   <li><...></li>
</ul>
<ul class="abc">
   <li><input type="text" name="date1" id="date"></li>
   <li><...></li>
   <li><...></li>
</ul>
.
.
.
<ul class="abc">
   <li><input type="text" name="date100" id="date"></li>
   <li><...></li>
   <li><...></li>
</ul>

The last row can be any number as it depends on the number of queries being pulled out of the database.

Currently my datepicker scripts says

$(function() {       
        $( "#date" ).datepicker({
              minDate: 0,
              changeMonth: true,
              changeYear: true,
              dateFormat: 'dd-mm-yy',
              showOn: "button",
              buttonImage: "/images/calendar.gif",
              buttonImageOnly: true,
               showOtherMonths: true,
              selectOtherMonths: true              
        });      
});       

How do I change it so that it is executed whenever the user tries to select a date in any 'dateX' field?

Thanks

0
Comment
Question by:jagku
2 Comments
 
LVL 2

Accepted Solution

by:
marceloOrigoni earned 500 total points
ID: 34174271
the best way, is to add a class="date" to each field, like this:

<ul class="abc">
   <li><input type="text" name="date100" id="date" class="date"></li>
   <li><...></li>
   <li><...></li>
</ul>

and then execute the datepicker like this:

$(function() {      
        $( ".date" ).datepicker({
              minDate: 0,
              changeMonth: true,
              changeYear: true,
              dateFormat: 'dd-mm-yy',
              showOn: "button",
              buttonImage: "/images/calendar.gif",
              buttonImageOnly: true,
               showOtherMonths: true,
              selectOtherMonths: true              
        });      
});  

Marcelo
0
 

Author Closing Comment

by:jagku
ID: 34174332
Excellent - many thanks!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now