Adding a date range picker with jQuery and updating content

Adding a date range picker with jQuery and updating content

I have the following HTML which adds my table headings when you click on
the Add Column button. Then when you click Add Row it creates the rows.
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.
The user needs to click Add Column, then needs to click Add Date Range 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: Fri, 20 Sep - Mon, 7 Oct 2013
HTML:
<button id="addcolumn">Add Column</button>
<button id="addrow">Add Row</button>
<button id="adddaterange">Add Date Range</button>
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<thead id="theads">
<tr>
<th class="th">Travel Dates</th>
<th class="th">Duration</th>
<th class="th">Trip Cost</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
jQuery:
$(document).ready(function () {
var $cell = $('<td>', {
'class': 'td',
'align': 'center',
'contenteditable': '',
'text': 'Content'
});
var $header = $('<th>', {
'class': 'th',
'contenteditable': '',
'text': 'Heading'
});
$('#addcolumn').click(function() {
$header.clone().appendTo('thead tr');
$cell.clone().appendTo('tbody tr');
});
$('#addrow').click(function(){
var $row = $('<tr>');
$('th').each(function() {
$cell.clone().appendTo($row);
});
$row.appendTo('tbody');
});
});
JSFIDDLE: http://jsfiddle.net/prBZS/35/