如何獲取特殊組件的表單值（bootstrap-daterangepicker）？

Question

我在表單中使用bootstrap-daterangepicker。我現在抓住這個選擇的價值的方式，但我獲得價值的方式似乎並不是一個好方法。

使用會話來保存字段選擇，然後在我完成時取消設置它們似乎不好。我只想確保我不會錯過任何東西。

我可以從輸入字段中獲取值，但我必須解析字符串才能將日期拉出。摻雜這可能是一個維護頭痛，因爲如果我更改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); 
}); 

然後你從元素檢索數據，而不是從會議：

// 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>被丟棄的模式時，被關閉並且模板被銷燬，你沒有會話或其他變量來清理。