3

我有以下 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/

4

3 回答 3

1

您可以在http://www.eyecon.ro/bootstrap-datepicker/中使用开始日期和结束日期

或者

可以在http://jqueryui.com/datepicker/中玩耍

日期范围的最大值和最小值 http://jqueryui.com/datepicker/#date-range

于 2013-08-25T13:34:02.553 回答
1

我编了一个小提琴，我说明了它是如何工作的；我希望我能正确理解你在问什么。

该项目使用（我不能将其设置为隐藏...）输入字段并附加一个 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/

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

于 2013-08-28T14:26:34.013 回答
0

$( elementId ).datepicker({ showOn: "button", buttonImage: "images/icons/calendar.gif", buttonImageOnly: true, minDate: (minDate)?minDate : "", );

于 2013-09-02T11:14:48.050 回答