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> Link to comment https://forums.phpfreaks.com/topic/217455-using-jquery-datepicker-in-a-table/ 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> Link to comment https://forums.phpfreaks.com/topic/217455-using-jquery-datepicker-in-a-table/#findComment-1129317 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> Link to comment https://forums.phpfreaks.com/topic/217455-using-jquery-datepicker-in-a-table/#findComment-1129990 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.