Databases
StackOverflow2013
Postsdbo
POAdding a date range picker with jQuery and updating content
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAdding a date range picker with jQuery and updating content
    text
    copied!<p>I have the following HTML which adds my table headings when you click on the <code>Add Column</code> button. Then when you click <code>Add Row</code> it creates the rows.</p> <p>I need to add a date picker and create the button so that the user can pick a date range, then that date range needs to go into the respective travel dates row.</p> <p>The user needs to click <code>Add Column</code>, then needs to click <code>Add Date Range</code> and then it should put a date in the cell. The Add Date Range needs to have its own column showing in each row. Then when the user picks a range it should show up something like: <code>Fri, 20 Sep - Mon, 7 Oct 2013</code></p> <p><strong>HTML:</strong></p> <pre><code>&lt;button id="addcolumn"&gt;Add Column&lt;/button&gt; &lt;button id="addrow"&gt;Add Row&lt;/button&gt; &lt;button id="adddaterange"&gt;Add Date Range&lt;/button&gt; &lt;table width="100%" border="1" cellpadding="0" cellspacing="0"&gt; &lt;thead id="theads"&gt; &lt;tr&gt; &lt;th class="th"&gt;Travel Dates&lt;/th&gt; &lt;th class="th"&gt;Duration&lt;/th&gt; &lt;th class="th"&gt;Trip Cost&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody id="tbody"&gt; &lt;/tbody&gt; &lt;/table&gt; </code></pre> <p><strong>jQuery:</strong></p> <pre><code>$(document).ready(function () { var $cell = $('&lt;td&gt;', { 'class': 'td', 'align': 'center', 'contenteditable': '', 'text': 'Content' }); var $header = $('&lt;th&gt;', { 'class': 'th', 'contenteditable': '', 'text': 'Heading' }); $('#addcolumn').click(function() { $header.clone().appendTo('thead tr'); $cell.clone().appendTo('tbody tr'); }); $('#addrow').click(function(){ var $row = $('&lt;tr&gt;'); $('th').each(function() { $cell.clone().appendTo($row); }); $row.appendTo('tbody'); }); }); </code></pre> <p><strong>JSFIDDLE:</strong> <a href="http://jsfiddle.net/prBZS/35/" rel="nofollow">http://jsfiddle.net/prBZS/35/</a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload