gevensen Posted November 1, 2010 Share Posted November 1, 2010 Any tips on using jquery datepicker in a table using dynamically generated id's? I am having a problem selecting the id of the field i want to change I am using the basic datepicker below, but i would like to dynamically change the selector for example "#datepicker_1", "#datepicker_2", "#datepicker_3" by using the id of the text input i create in my table so datepicker selects the proper id's\ any ideas? <script> $(function() { $( "#datepicker" ).datepicker(); }); </script> <td width = "100" align = "center"> <div id = "picker_<?php echo $bank_data[$i][9];?>" class = "demo" > <input type='text' id = "datepicker_<?php echo $bank_data[$i][9];?>" name = "datepicker_<?php echo $bank_data[$i][9];?>" size="10" value ="<?php echo $display_date;?>" /> </td> Quote Link to comment Share on other sites More sharing options...
gevensen Posted November 2, 2010 Author Share Posted November 2, 2010 found a working example just wasnt using the right keywords in my search http://forum.jquery.com/topic/problem-adding-the-datepicker-to-a-dynamically-created-text-box <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <html lang="en"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta charset="utf-8"> <title>jQuery UI Datepicker - Default functionality</title> <link rel="stylesheet" href="../../sc/css/datepicker/themes/base/jquery.ui.all.css"> <script type="text/javascript" src="../../sc/js/jquery.js" language="javascript"></script> <script src="../../sc/js/datepicker/ui/jquery.ui.core.js"></script> <script src="../../sc/js/datepicker/ui/jquery.ui.widget.js"></script> <script src="../../sc/js/datepicker/ui/jquery.ui.datepicker.js"></script> <link rel="stylesheet" href="../../sc/css/datepicker/demos.css"> <script type="text/javascript"> $(document).ready(function(){ var html = ''; //create 50 rows for (var i = 0; i < 50; i++) { //create table row element html += '<tr><td class="Date"><input type="text" id="dpicker' + i + '" maxlength="8"></td></tr>'; } $('#tbod').html(html).find('input[id^=dpicker]').datepicker( {dateFormat: 'mm/dd/yy', buttonText: 'Velg dato', buttonImage: '../../sc/js/calendar.gif'}); }); </script> </head> <body> <table class="tab" width="100" border="1"> <thead> <tr> <th>Date</th> </tr> </thead> <tbody id="tbod"> </tbody> </table> </body> </html> Quote Link to comment Share on other sites More sharing options...
gevensen Posted November 3, 2010 Author Share Posted November 3, 2010 Alternately you can fill a html table dynamically and use <tbody> with and id for example <tbody id = "tbod"> then use this call for datepicker where tbod is the tbody id and datepicker_ is the id of the input field less the number attached for example datepicker_1 datepicker_2 datepicker_3 hope this helps someone else the 1st example was proving hard to fill with all the stuff i was putting in i was using it to change post dates on bank balances and the id would literally be the record number of the mysql file <script> $(function() { $('#tbod').find('input[id^=datepicker_]').datepicker(); }); </script> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.