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

Question

我有以下 HTML，当您单击 Add Column 按钮时，它会添加我的表格标题。然后，当您单击 Add Row 时，它会创建行。

我需要添加一个日期选择器并创建按钮，以便用户可以选择一个日期范围，然后该日期范围需要进入相应的旅行日期行。

用户需要点击Add Column，然后需要点击Add Date Range，然后它应该在单元格中放置一个日期。添加日期范围需要在每一行中显示自己的列。然后，当用户选择一个范围时，它应该显示如下内容: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

我制作了一个 fiddle ，我演示了它是如何工作的；我希望我能正确理解你在问什么。

该项目使用(我不能将其隐藏...)输入字段并附加一个 jQuery datepick ;它没有使用标准的 jQuery UI 日期选择器，因为它不支持范围选择。

当你添加一个列时，它会被添加一个类 canDatePicker 到列的每个单元格，这个类告诉你可以“附加”一个日期选择器到单元格。为每个单元格使用一个 contenteditable 我通过添加类 focused 来管理当前的焦点单元格，所以我知道当前的单元格。当您将日期选择器附加到单元格时，它会向单元格添加一个类 hasDatePicker 以供将来对该单元格进行新的点击。

当您从日期选择器中选择范围时，范围将设置在单元格的文本上。如果您再次单击该单元格，则会打开日期选择器，其中包含之前选择的单元格范围。

如果您需要更多代码解释，请告诉我。

代码:

$(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')
    });


});

演示:http://jsfiddle.net/IrvinDominin/WzkBS/

启动演示，按“添加行”、“添加列”，聚焦新单元格并按“添加日期范围”，然后尝试使用演示。