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

Question

我在表单中使用bootstrap-daterangepicker。我目前获取这个选择的值的方式是有效的，但我获取值的方式似乎不是一个好方法。

使用会话来保存字段选择，然后在完成后取消设置它们，这似乎不太好。我只想确定我没有遗漏什么。

我可以从输入字段中获得值，但我必须解析字符串才能提取日期。掺杂这可能是一个令人头疼的维护问题，因为如果我更改daterangepicker日期格式，我将需要更改解析。

表单域：

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

要激活组件，请执行以下操作：

    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>元素上，而不是存储在会话中。所以你可以这样重写你的“抓取选择”代码：

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

然后从元素检索数据，而不是从会话检索数据：

// 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>在关闭模式并销毁模板时被丢弃，则没有会话或其他变量需要清理。