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

Adding a date range picker with jQuery and updating content

本文关键字：更新 新内容 选择器 范围 jQuery 添加 日期 使用      更新时间：2023-09-26

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

我制作了一把小提琴，并展示了它的工作原理；我希望我没有正确理解你在问什么。

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

开始演示，按Add row，Add column，聚焦新单元格并按Add date range，然后尝试使用演示。

您可以在http://www.eyecon.ro/bootstrap-datepicker/

或

可以在http://jqueryui.com/datepicker/

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

$（elementId）.datepicker({showOn:"按钮"，buttonImage:"images/icons/calendar.gif"，buttonImageOnly:true，minDate:（minDate）？minDate:"，)；

相关文章：