Question

我在表单中使用bootstrap-daterangepicker。我目前抓住这个选择的价值的方式是有效的，但我得到这些值的方式似乎并不是一个好方法。

使用Session来保存字段选择并在完成后取消设置它们似乎很糟糕。我只是想确定我没有错过任何东西。

我可以从输入字段中获取值，但是我必须解析字符串以拉出日期。兴奋剂这可能是一个维护问题，因为如果我更改daterangepicker日期格式，我需要更改解析。

表单字段：

    <input type="text" name="carpool_eventDates" id="carpool_eventDates" />

JS激活组件：

    Template.add_event.rendered = function () {
      // initialize add event modal;
      $('#addEvent')
       .modal();
      // initialize the date range picker
      $('input[name="carpool_eventDates"]').daterangepicker(
        // default date range options
        {ranges: {'Last 5 Days': [Date.today().add({ days: -4 }), 'today'],
              'Next 5 Days': ['today', Date.today().add({ days: 4 })]}
        },
        // grab the selection
        function(start, end) {
          Session.set("showAddEventDialogue_dateRangeStart",start);
          Session.set("showAddEventDialogue_dateRangeEnd",end);
        });
      };

JS保存按钮单击处理程序：

    Template.add_event.events({
        'click button.save-addEventDialogue': function(e, tmpl) {

          // Get the date range selection from the session
          var start = Session.get("showAddEventDialogue_dateRangeStart");
          var end = Session.get("showAddEventDialogue_dateRangeEnd");

          // Do something with the dates

          // Clear the dates from the session now that we are done with them
          Session.set("showAddEventDialogue_dateRangeStart","");
          Session.set("showAddEventDialogue_dateRangeEnd","");

          // Close the dialogue
          Session.set("showAddEventDialogue", false);
        }             
      });

这是一个很好的方法吗？或者有更好的方法吗？

感谢。

Answer 1

您可以使用jQuery的.data()将daterangepicker数据存储在原始<input>元素上，而不是存储在Session中。因此，您可以重写“抓取选择”代码：

// grab the selection
function(start, end) {
  $('input[name="carpool_eventDates"]')
    .data("showAddEventDialogue_dateRangeStart", start)
    .data("showAddEventDialogue_dateRangeEnd", end);
});

然后从元素中检索数据，而不是从Session：

// Get the date range selection from the element
var start = $('input[name="carpool_eventDates"]').data("showAddEventDialogue_dateRangeStart");
var end = $('input[name="carpool_eventDates"]').data("showAddEventDialogue_dateRangeEnd");

假设在关闭模态并销毁模板时丢弃<input>，则没有要清理的会话或其他变量。

如何获取特殊组件的表单值（bootstrap-daterangepicker）？

1 个答案: