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

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

或者

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

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

Answer 2

我做了一个小提琴，我说明它是如何工作的;我希望我没有正确地理解你在问什么。

该项目使用一个（我可以设置它隐藏...）输入字段并附加一个jQuery datepick;它没有使用标准的jQuery UI datepicker，因为它不支持范围选择。

当你添加一个列时，它会向列的每个单元格添加一个类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/

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

Answer 3

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

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

3 个答案: