How to get form values for a special component (bootstrap-daterangepicker)?

meteor

Solution

You could use jQuery's .data() to store the daterangepicker data on the original `<input>` element, rather than in Session. So you could rewrite your "grab the selection" code thus:

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

Then you retrieve the data from the element, rather than from 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");

And assuming the `<input>` is discarded when the modal is closed and template destroyed, you have no Session or other variables to clean up.

Problem

I am using bootstrap-daterangepicker in a form. The way I am currently grabbing the value of this selection works but the way I am getting the values doesn't seem like a good way. It seems bad to use the Session to hold the field selections and then unset them when i am done. I just want to be sure that I am not missing something. I could get the value from the input field but I would have to parse the string to pull the dates out. Doping this could be a maintenance headache because I would need to change the parsing if I change the daterangepicker date formats. The form field: ``` <input type="text" name="carpool_eventDates" id="carpool_eventDates" /> ``` JS to activate the component: ``` 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 save button click handler: ``` 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); } }); ``` Is this a good way to do this? Or is there a better way? Thanks.

Original source