3

我在表单中使用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);
        }             
      });

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

谢谢。

4

1 回答 1

4

您可以使用 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>当模式关闭并且模板被破坏时被丢弃，你没有 Session 或其他变量需要清理。

于 2013-02-10T22:38:45.313 回答