Question

我仍在学习，而我最新的项目使我陷入了困境：

在用于管理客户的表中，我想为每个行都有一个带日期选择器（使用https://longbill.github.io/jquery-date-range-picker/的输入字段），如下所示：

<td>
//some more content
    <div class="includeDatepicker">
        <input type="text" class="datepicker">
    </div>
</td>

整个过程设置如下：

jQuery("document").ready(function () {
    jQuery('.datepicker').dateRangePicker({
    autoClose: true,
    singleDate : true,
    showShortcuts: false,
    singleMonth: true,
    startOfWeek: 'monday',
    separator : ' ~ ',
    format: 'DD.MM.YYYY HH:mm',
    time: {
        enabled: true
    }
});
});

直到这里，它都可以正常工作。然后：

日期选择器仅出现在表第一行中的第一个输入字段，并且即使单击其他日期，也只会出现在该位置。如何为每个输入字段添加日期选择器？我已经在使用类选择器。我已经对此进行了研究，并找到了一些解决方案，但是我实在无法以任何方式来解决这个问题。
即使刷新页面，怎么可能保存写入输入字段的日期？

我将非常感谢您提供的任何帮助，在进行询问之前，我已经进行了研究，但都无济于事。

问候

Answer 1

我认为第二部分是这样的方法：

jQuery("document").ready(function () {
    jQuery('.datepicker').dateRangePicker({
    autoClose: true,
    singleDate : true,
    showShortcuts: false,
    singleMonth: true,
    startOfWeek: 'monday',
    separator : ' ~ ',
    format: 'DD.MM.YYYY HH:mm',
    time: {
        enabled: true
    }
},function(start, end, label) {
    console.log(start.format('YYYY-MM-DD') + ' TO: ' + end.format('YYYY-MM-DD'));
}
    );
});

在上面的函数中，您可以对数据库进行AJAX调用，但是正如我之前所说，您将在元素上需要一些ID，以便可以将其传递回服务层，以确保您知道它们是什么实体正在更新。...

我不确定您使用的是哪种日期范围选择器，但是如果我认为使用的是日期范围选择器，那么@ http://www.daterangepicker.com/#options

添加新功能，例如：

function updateDBWithVals(urlToServer,startDateFromFrontEnd,endDateFromFrontEnd,rowID) {    
    return $.ajax({
            url:            urlToServer,
            data:           {startDate : startDateFromFrontEnd, endDate: endDateFromFrontEnd, entityID: rowID},
            type:           "POST",                         
            success:        function(response) { 
                                    console.log(response);
                            },
            error:          function(error) {
                                console.log(error);
                            }
        }); 
}

现在在您的回叫功能中，只需调用它即可。

function(start, end, label) {
    console.log(start.format('YYYY-MM-DD') + ' TO: ' + end.format('YYYY-MM-DD'));
    updateDBWithVals("urlToYourServerLogic",start.format('YYYY-MM-DD'),end.format('YYYY-MM-DD'),"theIDOfTheRow");
}

jQuery Datepicker在多个字段中并保存输入

1 个答案: