使用jQuery添加日期范围选择器并更新内容

Question

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/

Answer 1

You can use start date and end date in http://www.eyecon.ro/bootstrap-datepicker/

Or

can play around in http://jqueryui.com/datepicker/

for max and min of date range http://jqueryui.com/datepicker/#date-range

Answer 2

I made up a fiddle, I illustrate how it works; I hope I undestand correctly what are you asking.

The project use a (I ca'nt set it hidden...) input field and attach to it a jQuery datepick ; it's not used a standard jQuery UI datepicker because it isn't support the range selection.

When you add a column it will be added a class canDatePicker to every cell of the column, this class tells that can be "attached" a datepicker to the cell. Using a contenteditable for every cell I managed the current focused cell by adding a class focused , so I know the current cell. When you attach a datepicker to the cell it's added a class hasDatePicker to the cell for the future new clicks on the cell.

When you select the range from the datepicker the range is set on the text of the cell. If you click again on the cell the datepicker is opened with the cell range previously selected.

Let me know if you need more explaination of the code.

Code:

$(document).ready(function () {

    $('#datepicker').datepick({
        rangeSelect: true,
        onClose: function () {
            var dates = $('#datepicker').datepick('getDate');
            var value = '';
            for (var i = 0; i < dates.length; i++) {
                value += (i == 0 ? '' : ' - ') + $.datepick.formatDate(dates[i]);
            }
            $('.focused').html(value);
        }
    });

    $(document).on('focus', '.hasDatePicker', function (e) {
        var dates = $(this).text().split(' - ');
        $("#datepicker").datepick('setDate', dates);
        $("#datepicker").datepick('show')
    });

    $(document).on('focus', 'td', function (e) {
        $("td").removeClass('focused');
        $(e.target).addClass('focused');
    });

    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');
        $('table>tbody>tr>td:nth-child(n+4)').addClass('canDatePicker');
    });

    $('#addrow').click(function () {
        var $row = $('<tr>');

        $('th').each(function () {
            $cell.clone().appendTo($row);
        });

        $row.appendTo('tbody');
        $('table>tbody>tr>td:nth-child(n+4)').addClass('canDatePicker');
    });

    $('#adddaterange').click(function () {
        if ($(".focused").length == 0 || !($(".focused").hasClass("canDatePicker"))) return
        $(".focused").addClass("hasDatePicker");
        $("#datepicker").datepick('show')
    });


});

Demo: http://jsfiddle.net/IrvinDominin/WzkBS/

Start the demo, press Add row, Add column, focus the new cell and press Add date range, and try to use the demo.

Answer 3

$（elementId）.datepicker（{showOn：“button”，buttonImage：“images / icons / calendar.gif”，buttonImageOnly：true，minDate：（minDate）？minDate：“”，）;