【问题标题】:Jquery Datepicker in multiple fields and saving the inputsJquery Datepicker 在多个字段中并保存输入
【发布时间】:2018-11-23 11:41:48
【问题描述】:

我还在学习,我的最新项目让我陷入了困境:

在管理客户的表中,我希望每一行都有一个带有日期选择器的输入字段(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
    }
});
});

直到这里,它工作正常。然后虽然:

  1. 日期选择器仅出现在表格第一行的第一个输入字段中,即使单击其他字段也只会出现在那里。我可以做些什么来为每个输入字段添加一个日期选择器?我已经在使用类选择器。我已经对此进行了研究并找到了一些解决方案,但无论哪种方式我都无法真正理解它。

  2. 即使刷新页面,如何保存写入输入字段的日期?

我将非常感谢任何帮助,并且在在这里提问之前我已经进行了研究,但没有任何帮助。

问候

【问题讨论】:

  • 您是否尝试过向 添加 id 属性?添加一些逻辑,以确保每个 都有一个 id,然后尝试一下。我认为 上需要 id
  • 谢谢!但是他们不应该有不同的ID吗?由于我只列出一次,我该怎么做?
  • 是的,在 html 中,元素上的每个 id 都应该是唯一的。这取决于您如何构建表格内容。如果它是手动输入的,那么只需为每个 td 分配一个唯一的 id,即 , 等等.. 等等..
  • 该表是通过循环访问客户来构建的。
  • 对不起,只是再看一遍,jQuery('.datepicker').dateRangePicker( ... 根据类分配给表中的每个输入。您需要在文本上添加某种 id提交数据时的输入,以便您知道要保存的实体。

标签: jquery input datepicker submit


【解决方案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");
}

【讨论】:

  • 我不知道如何设置不同的 ID 或稍后如何为元素调用它们,我在 Google 上找不到任何用于该搜索的内容。我所做的让它们在每次页面加载时都发生了变化,这并没有真正实现任何目标。我只有这一行(),因为整个表在循环中被调用以为每个客户创建一行。
  • 不过,谢谢你的帮助,我只是觉得自己很愚蠢,哈哈。
  • 如果表格上的每一行都是针对客户的,那么您可以将 html id 属性应用到该行作为表格创建的一部分。 id 可以只是数据库中客户的主键,也可以是允许您在数据库中查找和更新他们的数据的东西。在函数中,当它被调用时,您可以使用 JQuery 获取父行 html ID 并将其传递给 AJAX 调用。不要放弃一切都是可以实现的。也许将您目前拥有的内容放入 JSFiddle 中,我们可以从那里获取它...
  • 我能在这里嫁给你,或者至少尊重你一千次吗?开个玩笑,你能给我举个例子来说明那个电话的样子吗?我现在设法做 ID 的事情。
猜你喜欢
相关资源
最近更新 更多
热门标签